JSFiddle - React, Tailwind, and code Playground

by Muhammad Hassaan

HTML

<form action="" class="poll-section">
                    	<h3>Can You Name The Single-Word Hit Song By These Artists, Following the First Letter And Year?</h3>
                        <div class="quiz-wrap">
                            <div class="quiz-block"></div>
                            <div class="quiz-go">
                            	<input type="button" value="Submit" class="btn" />
                            </div>
                       	</div>
                    </form>

CSS

.poll-section *{ box-sizing:border-box;}
						.poll-section h3{ margin:0 0 30px;}
						.poll-section .quiz-content{ background:#f5f5f5; border-bottom:1px solid #d5d5d5; margin:0 0 15px; padding:20px 15px;}
						.poll-section .quiz-content h4{ font-size:18px; margin:0 0 15px;}
						.quiz-opts:after{ content:""; display:block; clear:both; height:0;}
						.quiz-opts label{ display:block; float:left; width:32%; margin-left:1%; line-height:20px;}
						.quiz-opts label:first-child{ margin-left:0;}
						.quiz-opts label input{ width:14px; height:14px; margin-right:15px;}
						.quiz-go{}
						.quiz-go input[type="button"]{ cursor: pointer; font-size: 15px; text-transform: uppercase; color: #FFFFFF; background: #EE9830; padding: 10px 30px; border: 0 none; position: relative; transition: all 300ms ease-in-out; border-radius: 3px;}
						.quiz-go input[type="button"]:hover{ box-shadow: 0 1px 1px #888; background: #32A2D0; color: #fff;}

JavaScript

var j=1;
	var data = [ 
	 {"question": "Year '2000', Letter 'S', Artist 'Santana (feat. Rob Thomas) –'", "Opt1": "Smooth", "Opt2": "Shiva", "Opt3":"S.O.S", "Correct":"Shiva"}, 
	 {"question": "Year '2001', Letter 'F', Artist 'Alicia Keys' –", "Opt1": "Factory", "Opt2": "Fade", "Opt3":"Fallin", "value": "Opt1", "Correct":"Fade"}, 
	 {"question": "Year '2002', Letter 'D', Artist 'Nelly (feat. Kelly Rowland)' –", "Opt1": "Dafodils", "Opt2": "Dilemma", "Opt3":"Dammit", "value": "Opt2", "Correct":"Dafodils"}, 
	 {"question": "Year '2004', Letter 'Y', Artist 'Usher (feat. Lil Jon & Ludacris)' –", "Opt1": "Y.M.C.A", "Opt2": "Yeah", "Opt3":"Yes", "value": "Opt1", "Correct":"Yeah"}, 
	 {"question": "Year '2006', Letter 'S', Artist 'Justin Timberlake' –", "Opt1": "Sex", "Opt2": "Sexbomb", "Opt3":"Sexyback", "value": "Opt1", "Correct":"Sex"}, 
	 {"question": "Year '2007', Letter 'U', Artist 'Rihanna (feat. Jay-Z)' –", "Opt1": "Umbrella", "Opt2": "U.F.O", "Opt3":"Unbroken", "value": "Opt1", "Correct":"Umbrella"}, 
	 {"question": "Year '2008', Letter 'L', Artist 'Flo Rida (feat. T-Pain)' –", "Opt1": "Low", "Opt2": "Lazy", "Opt3":"Lemon", "value": "Opt1", "Correct":"Lazy"},
	 {"question": "Year '2011', Letter 'G', Artist 'Bruno Mars' –", "Opt1": "Gap", "Opt2": "Gasuline", "Opt3":"Grenade", "value": "Opt1", "Correct":"Grenade"}, 
	 {"question": "Year '2012', Letter 'R', Artist 'Imagine Dragons' –", "Opt1": "Radiant", "Opt2": "Radioactive", "Opt3":"Rax`x`dio", "value": "Opt1", "Correct":"Radioactive"}, 
	 {"question": "Year '2015', Letter 'C', Artist 'OMI' –", "Opt1": "Cheerleader", "Opt2": "Caffiene", "Opt3":"Californication", "value": "Opt1", "Correct":"Californication"}, 
	];
	
	$(data).each(function(i, item) {
		
		$(".quiz-block").append('<div class="quiz-content"><h4>'+data[i].question+'</h4><div class="quiz-opts"><label><input data-correct="'+data[i].Correct+'" required type="radio" name="q'+j+'" value="'+data[i].Opt1+'"/>'+data[i].Opt1+'</label><label><input...