JSFiddle - React, Tailwind, and code Playground

by Marcus

HTML

<div class="texfrm_o">
                	<div class="texfrm_i" style="width:99%; padding:1vh 0 2vh 0; margin:auto;">
                    	<label class="label_02" style="width:77%; text-align:center; margin:auto;">
                        	Generating Ideas
                        </label>
                        
                        <div class="anscont" style="width:100%;">
                        	<div class="r_cont_lab" style="float:left; margin-left:1vw;">Weakest</div>
                            
                            <div class="radcont" style="width:66%; margin:auto;">
                            	<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>
                                
                                <div class="radbox">
                                    <label for="q7a4" class="rad_lab">4</label>
                                    <input type="radio" class="rad_buttn2" value="4" name="Generating_Ideas" id="q7a4" />
                                </div>
                                
                                <div class="radbox">
                                    <label...

CSS

.anscont{
		height:auto;
		margin:1vh 0 0 0;
		/*padding:3vh;*/
		background-color:#F60;
		}

.label_02{
		width:88%;
		height:auto;
		display:block;
		font-family:'Oswald', sans-serif;
		font-size:1.5vw;
		background-color:#c9fffb;/*teal blue*/
		color:#489c7f;/*tal_green*/
		box-shadow:#8fd7d2 0px 0px 33px;
		border-radius:2.2px;
		}
		@media (max-width:1266px) {
    		.label_02{font-size:3vw;}
    	}

.radcont{
		height:5vw;
		margin:auto;
		display:block;
		background-color:#666;
		}

.radbox{
		width:10%;
		height:auto;
		float:left;
		display:block;
		}
		@media (max-width:1266px) {
    		.radbox{width:10%;}
    	}

.rad_lab{
		width:100%;
		height:auto;
		text-align:center;
		font-family: 'Roboto', sans-serif;
		font-size:1vw;
		margin:auto;
		display:block;
		/*padding-bottom:4.4px;*/
		}
		@media (max-width:1266px) {
    		.rad_lab{font-size:1.5vw;}
    	}

.rad_buttn2{
		width:1.5vw;
		height:1.5vw;
		display:block;
		margin:auto;
		}
		@media (max-width:1266px) {
    		.rad_buttn2{height:2vw; width:2vw;}
    	}

.r_cont_lab{
		width:auto;
		height:auto;
		font-size:1.5vw;
		text-align:center;
		font-family:'Roboto', sans-serif;
		color:#383838;
		background-color:#3F9;
		}

.texfrm_i{
		border-radius:11px;
		position:relative;
		display:block;
		height:auto;
		margin:auto;
		/*padding: 3px 0px 11px 0px;*/
		background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f9f9f9), color-stop(24%,#cecece), color-stop(67%,#cecece), color-stop(67%,#f2f2f2), color-stop(67%,#cecece), color-stop(100%,#828282)); /* Chrome,Safari4+ */
		box-shadow:#383838 0px 11px 5.6px;
		}