JSFiddle - React, Tailwind, and code Playground

by Sunny SM

HTML

<!DOCTYPE html>
<html>
 <title>Simple HTML5 blog</title>
<head></head>
<body>

<div class="content">
    <div class="container_q">
       
                <div class="contfull" style="width:700px !important;">
     <div style="display: block; margin-top: 0px;" class="section group tohide" id="question_6">
                  <div class="col span_3_of_3"><div class="simplehead"><div>Hvor godt mener du at følgende påstander om artiklene i Skeidars kundemagasin stemmer? (1 = stemmer overhode ikke, 5 = stemmer veldig godt)</div>
</div></div>
                  <div class="col span_3_of_3">
                    <table class="rwd-table">
		
		<tbody><tr><!--THIS CODE LIST OPTIONS NUMBER/TEXT-->
		<th>&nbsp;</th>
						<th class="borderrad">1</th>
						<th class="borderrad">2</th>
						<th class="borderrad">3</th>
						<th class="borderrad">4</th>
						<th class="borderrad">5</th>
						<th class="borderrad">Ingen oppfatning</th>
			</tr><!-- END HERE -->	
	
	<tr>
		<td data-th="&nbsp;" class="surveyquest">Artiklene henvender seg til meg</td>
	    		    		<td data-th="1" class="borderrad"><span class="radbtn"> <input id="1_32964120" name="radio_32964120" value="1" type="radio"><label for="1_32964120"></label></span></td>
	        	    		<td data-th="2" class="borderrad"><span class="radbtn"> <input id="2_32964120" name="radio_32964120" value="2" type="radio"><label for="2_32964120"></label></span></td>
	        	    		<td data-th="3" class="borderrad"><span class="radbtn"> <input id="3_32964120" name="radio_32964120" value="3" type="radio"><label for="3_32964120"></label></span></td>
	        	    		<td data-th="4" class="borderrad"><span class="radbtn"> <input id="4_32964120" name="radio_32964120" value="4" type="radio"><label for="4_32964120"></label></span></td>
	        	    		<td data-th="5" class="borderrad"><span class="radbtn"> <input id="5_32964120" name="radio_32964120" value="5" type="radio"><label for="5_32964120"></label></span></td>
	        	    		<td...

CSS

<style>
    .contfull{
        max-height:900px;
    }
	
@font-face {
    font-family: "gothammediumwebfont";
    src: url("fonts/gothammediumwebfont.eot") format("embedded-opentype"), url("fonts/gothammediumwebfont.woff2") format("woff2"), url("fonts/gothammediumwebfont.woff") format("woff"), url("fonts/gothammediumwebfont.ttf") format("truetype"), url("fonts/gothammediumwebfont.svg#gothammediumwebfont") format("svg");
}
@font-face {
    font-family: "GothamBook";
    src: url("fonts/GothamBook.eot") format("embedded-opentype"), url("fonts/GothamBook.woff2") format("woff2"), url("fonts/GothamBook.woff") format("woff"), url("fonts/GothamBook.ttf") format("truetype"), url("fonts/GothamBook.svg#GothamBook") format("svg");
}
body {
    background: #cbd0d4 none repeat scroll 0 0;
    color: #444444;
    font-family: "GothamBook";
    font-size: 14px;
    margin: 0;
    min-width: 100% !important;
    padding: 0;
}
.content {
    margin: 0 auto;
    width: 100%;
}
.container_q {
    background: #f0efef none repeat scroll 0 0;
    float: left;
    height: 100%;
    width: 100%;
}
.header_q {
    background: #ffffff none repeat scroll 0 0;
    box-shadow: 0 2px 2px #e0dcdc;
    display: block;
    padding: 10px 20px 4px;
    position: relative;
    z-index: 100;
}
.logo_q {
    display: inline-block;
}
.logo_q a {
    outline: medium none;
}
.contfull {
    background: #f0efef none repeat scroll 0 0;
    display: inline-block;
    height: 100%;
    overflow-y: scroll;
    padding: 15px 2%;
    position: fixed;
    width:60%;
}
.btncross {
    float: right;
}
.btncross a {
    background: #fff url("../imagesSurvey/cross-img.png") no-repeat scroll center center;
    border-radius: 20px;
    box-shadow: 0 0 1px 1px #f2f2f2;
    display: inline-block;
    height: 27px;
    margin-right: 3px;
    width: 27px;
}
.btncross a:hover {
    background: #e5e5e5 url("../imagesSurvey/cross-img.png") no-repeat scroll center center;
}
.btncross a.min {
    background-position: 5px...