need a react component

I need a react component (with latest modules) for kids matching activity to support responsive and also support touch screeens. json will be provided by an API. sample json is attached. questions and answers will be shuffled and shown in two columns. to draw the line and match (kind of drag and drop). when they match correctly, draw line in green or use tick mark. if it is not matched, ross mark or red line. if question or answer is text, random text color is used from the text colors array in json. circle or rectangle border colors will be randomly picked for each question and answer from border colors. shape attribute define this. sound url will be played when question or anser clicked. this attribut is optionla. activitycountperpage is used to paginate , with previous and next. if questions has 15 and activitycountperpage is 5, then 3 pages will be appeared with previous and next button. { "title":"Matching Activity", "activitycountperpage":5, "border colors":["red","blue","green","#00FF00"], "text colors":["black","purple","#FFFF00"], "questions":[ { "content":"Elephant", "type":"text", "sound":"url to play sound when click the content", "shape":"rectangle", }, { "content":"Lion", "type":"text", "sound":"url to play sound when click the content", "shape":"rectangle", }, { "content":"Zebra", "type":"text", "sound":"url to play sound when click the content", "shape":"rectangle", } ] "answers":[ { { "content":"image url", "type":"image", "sound":"url to play sound when click the content", "shape":"circle", }, { "content":"Image url", "type":"image", "sound":"url to play sound when click the content", "shape":"rectangle", }, { "content":"Image Url", "type":"text", "sound":"url to play sound when click the content", "shape":"rectangle", } ] }