JSFiddle - React, Tailwind, and code Playground

by masifabc

HTML

<!-- QUESTIONS-- -->
<div class="div1 card">
<h1>Question 1 ?</h1>

<div id="radioset">

    <label><input type="radio" name="toggle"><span>YES</span></label><br>
    <label><input type="radio" name="toggle"><span>NO</span></label><br>
	<label><input type="radio" name="toggle"><span>N/A</span></label><br>
    
</div>
</div>


<br>
<div class="div1 card">
<h1>Question 2 ?</h1>

<div id="radioset">

    <label ><input type="radio" name="toggle2"><span>YES</span></label><br>
    <label ><input type="radio" name="toggle2"><span>NO</span></label><br>
	<label><input type="radio" name="toggle2"><span>N/A</span></label><br>
    
</div>
</div>

<br>
<div class="div1 card">
<h1>Question 3 ?</h1>

<div id="radioset">

    <label ><input type="radio" name="toggle3"><span>YES</span></label><br>
    <label ><input type="radio" name="toggle3"><span>NO</span></label><br>
	<label><input type="radio" name="toggle3"><span>N/A</span></label><br>
    
</div>
</div>


<p>___________________________________________________________________________________</p>

CSS

body {
    font-family:sans-serif;
}

#radioset {
    margin:4px;
   
    float:center;
	
  
}

#radioset label {
    float:left;
    width:170px;
    margin:4px;
    background-color:#EFEFEF;
    border-radius:4px;
    border:1px solid #D0D0D0;
    overflow:auto;
	width:100%
       
}

#radioset label span {
    text-align:center;
    font-size: 32px;
    padding:13px 0px;
    display:block;
	
}

#radioset label input {
    position:absolute;
    top:-20px;
	visibility: hidden;
}

#radioset input:checked + span {
    background-color:red;
    color:#F7F7F7;
}

.button {
  /*background-color: #4CAF50;  Green */
  border: 2px solid black;
  /*color: white;*/
  padding: 16px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 5vw;
  margin: 4px 2px;
  transition-duration: 0.4s;
  cursor: pointer;
  width: 100%;
}

.div1 {
  width: 95vw;
  
  border-radius: 20px;
  background-color: #ddd;
  padding: 10px;
  margin:0 auto;
  overflow:hidden;
}


.card {
  /* Add shadows to create the "card" effect */
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.9);
  transition: 0.3s;
}

/* On mouse-over, add a deeper shadow */
.card:hover {
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.9);
}



input{
width: 100%;
height: 50px;
font-size: 5vw;
}


h1 {
	font-size:6vw;
}