JSFiddle - React, Tailwind, and code Playground

by J. Albert Bowden

HTML

<div>
<input type="radio" name="choice" value="1">
<input type="radio" name="choice" value="2">
<input type="radio" name="choice" value="3" checked>
<input type="radio" name="choice" value="4">
</div>

CSS

div
{
  padding: 20px;
  background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#e8e8ef));
}
input[type=radio]
{
  -webkit-appearance: none;
  position: relative;
  width: 30px;
  height: 30px;
  margin: 10px;
  border: 1px solid #c8c8cf;
  border-radius: 30px;
  background: -webkit-gradient(linear, left top, left bottom, from(#f8f8fa), to(#d8d8df));
  box-shadow: 0 1px 0 rgba(255,255,255,0.8);
}
input[type=radio]:active
{
  border-color: #a0a0a8;
  background: -webkit-gradient(linear, left top, left bottom, from(#f8f8ff), to(#c0c0c8));
  box-shadow: inset 0 1px 4px rgba(0,0,0,0.3), 0 1px 0 rgba(255,255,255,0.8);
}
input[type=radio]:hover,
input[type=radio]:checked
{
  border-color: #b0b0b8;
  background: -webkit-gradient(linear, left top, left bottom, from(#fdfdff), to(#c0c0c8));
}
input[type=radio]:checked:before
{
  content: "";
  display: block;
  position: absolute;
  left: 6px;
  top: 6px;
  width: 16px;
  height: 16px;
  border-radius: 16px;
  background: -webkit-gradient(linear, left top, left bottom, from(#222), to(#888));
  box-shadow: inset 0 1px 4px rgba(0,0,0,0.8), inset 0 -1px 1px rgba(255,255,255,0.2), 0 1px 0 rgba(255,255,255,0.4);
}