JSFiddle - React, Tailwind, and code Playground

by korimako

HTML

<html>
<head>
<title>My Page</title>
</head>
<body style="font:100% sans-serif">
<form name="myform" action="http://www.mydomain.com/myformhandler.cgi" method="POST">
<div style="font-size:20px"><br>
<input type="radio" name="group1" value="Milk" class="ee" id="milk"><label for="milk" onclick="">Milk<br>
<input type="radio" name="group1" value="Butter" class="ee" id="butter" onclick="" checked><label for="butter">Butter<br>
<input type="radio" name="group1" value="Cheese" class="ee" id="cheese" onclick=""><label for="cheese">Cheese
<hr>
<div style="font-size:15px">
    <input type="radio" name="group2" value="Water" class="regular-radio" id="water"><label for="water" onclick="">Water</label><br>
<input type="radio" name="group2" value="Beer" class="regular-radio" id="beer"><label for="beer" onclick="">Beer</label><br>
<input type="radio" name="group2" value="Wine" class="regular-radio" id="wine" checked><label for="wine" onclick="">Wine</label><br>
</div>
<hr>
<div style="font-size:110%">
<input type="radio" name="group3" value="Water" class="regular-radio" id="water1"><label for="water1" onclick="">Water</label><br>
<input type="radio" name="group3" value="Beer" class="regular-radio" id="beer1"><label for="beer1" onclick="">Beer</label><br>
<input type="radio" name="group3" value="Wine" class="regular-radio" id="wine1" checked><label for="wine1" onclick="">Wine</label><br>
</div>  

<div style="font-size:60%">
<div class="sdlg-sc owner-dialog content-dialog"><span id="radios" style="float: left; "><input type="radio" id="undefined" name="restrictions" checked=""><br> <br><input type="radio" id="undefined" name="restrictions"></span><div id="anyone"><b> Anyone </b> <br> anyone can post <br></div><div id="anons"><b> No anons </b> <br> Users must sign up with Chatango to post <br></div></div>
</div>
    
</div>
</form>
</body>
</html>

CSS

input[type=radio]{
    -webkit-appearance: none; 
    background-color: #fff;
    border: 1px solid #999;  
    border-radius: 1em;
    display: inline-block;
    position: relative;
    font-size:50%;
    width: 2em;
    height: 2em;
    top:.2em;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    margin-right:.5em;
}
 
input[type=radio]:checked:after {
    content: '';
    border-radius: 1em;
    display: inline-block;
    position: absolute;
    top:-3px;
    left:-3px;
    width: 2em;
    height: 2em;
    border: 1px solid #999; 
   -moz-box-sizing:border-box;
  -webkit-box-sizing:border-box;   
}
 
input[type=radio]:checked {
    background: #999;
    border: 3px solid #FFF; 
}