JSFiddle - React, Tailwind, and code Playground
HTML
<header>
</header>
<body>
<div id="page04">
<div id="p_content">
<div class="title02">
You As An Entrepreneur
</div><br /><br />
<div class="sub_title03">
There's 14 main areas that contribute to the success of every project, rate yourself on a scale of 1-10 on how well you perform in each area.
</div><br /><br /><br />
<div class="texfrm_o" style="height:128px;">
<div class="texfrm_i" style="width:99%; height:128px; margin:auto;"><br />
<label class="label_02" style="width:77%; text-align:center; margin:auto;">Generating Ideas</label><br />
<div class="anscont">
<div class="r_cont_lab" style="float:left; margin-left:4px;">
Weakest
</div>
<div class="radcont">
<div class="radbox">
<label for="q7a1" class="rad_lab">1</label>
<input type="radio" class="rad_buttn2" value="1" name="Generating Ideas" id="q7a1">
</div>
<div class="radbox">
<label for="q7a2" class="rad_lab">2</label>
<input type="radio" class="rad_buttn2" value="2" name="Generating Ideas" id="q7a2">
</div>
<div class="radbox">
<label for="q7a3" class="rad_lab">3</label>
<input type="radio" class="rad_buttn2" value="3" name="Generating Ideas" id="q7a3">
</div>
...
CSS
/*HTML ELEMENTS*/
body{
width:1266px;
height:612px;
background-color:#161616;
background-image:url(http://www.jotform.com/uploads/The_Mighty_Optiq/form_files/Background.png);
background-position:top 40px center;
background-repeat:no-repeat;
background-attachment:fixed;
margin:auto;
position:relative;
top:40px;
z-index:1;
}
header{
width:1266px;
height:40px;
margin:auto;
display:block;
background-image:url(http://www.jotform.com/uploads/The_Mighty_Optiq/form_files/header.png);
position:fixed;
z-index:4;
}
footer{
width:1266px;
height:40px;
margin:auto;
display:block;
background-image:url(http://www.jotform.com/uploads/The_Mighty_Optiq/form_files/footer.png);
z-index:4;
}
/*Pages*/
#welcome{
width:888px;
height:1600px;
margin:auto;
display:none;
border-radius:11px;
background-color:#1B1B1B;
}
#page01{
width:888px;
height:1100px;
margin:auto;
display:none;
}
#page02{
width:888px;
height:572px;
margin:auto;
display:none;
}
#page03{
width:888px;
height:1199px;
margin:auto;
display:none;
}
#page04{
width:888px;
height:1199px;
margin:auto;
display:block;
}
/*Page Frames*/
#background{
width:888px;
height:100%;
background-color:#fff;
opacity:.44;
display:block;
border-radius:11px;
position:relative;
top:0px;
z-index:2;
}
#p_content{
width:888px;
height:auto;
display:block;
position:absolute;
margin:auto;
top:40px;
z-index:3;
}
/*Construction Frames*/
.r_cont_lab{
background-color:#CC9;
width:88px;
height:22px;
font-size:8pt;
text-align:center;
font-family:'Roboto',...