JSFiddle - React, Tailwind, and code Playground

HTML

<form id="form1" runat="server">
<div><br /><br />
<div style="text-align: center;"> 
<label class="button"> 
<input type="radio" name="button" /> 
<span class="outer"><span class="inner"></span></span> 
Add Details 
</label> 
<label class="button"> 
    <input type="radio" name="button" /> 
    <span class="outer"><span class="inner"></span></span> 
    Choice 2
</label>
<br />
<br /><br /><br /></div>
<br />
</div>
</form>

CSS

.button
{
background: #cfe7fa;
background: -moz-linear-gradient(top,#cfe7fa 0%,#6393c1 100%);
background: -webkit-gradient(linear,left top,left bottom,color-stop(0%,#cfe7fa),color-stop(100%,#6393c1));
background: -webkit-linear-gradient(top,#cfe7fa 0%,#6393c1 100%);
background: -o-linear-gradient(top,#cfe7fa 0%,#6393c1 100%);
background: -ms-linear-gradient(top,#cfe7fa 0%,#6393c1 100%);
background: linear-gradient(top,#cfe7fa 0%,#6393c1 100%);
border: 1px solid #6393c1;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
border-radius: 20px;
-moz-box-shadow: inset 1px 1px 0 rgba(255,255,255,.5),inset -1px -1px 0 rgba(0,0,0,.5);
-webkit-box-shadow: inset 1px 1px 0 rgba(255,255,255,.5),inset -1px -1px 0 rgba(0,0,0,.5);
box-shadow: inset 1px 1px 0 rgba(255,255,255,.5),inset -1px -1px 0 rgba(0,0,0,.5);
cursor: pointer;
display: inline-block;
font: 10px Arial,Verdana,Geneva,sans-serif;
line-height: 22.5px;
padding-right: 5px;
}

.button:hover .inner {
opacity:.5;
}

.button input {
display:none;
}

.button input:checked + .outer .inner {
opacity:1;
}

.button .outer {
background:#2989d8;
background:-moz-radial-gradient(center,ellipse cover,#2989d8 0%,#101354 99%);
background:-webkit-gradient(radial,center center,0px,center center,100%,color-stop(0%,#2989d8),color-stop(99%,#101354));
background:-webkit-radial-gradient(center,ellipse cover,#2989d8 0%,#101354 99%);
background:-o-radial-gradient(center,ellipse cover,#2989d8 0%,#101354 99%);
background:-ms-radial-gradient(center,ellipse cover,#2989d8 0%,#101354 99%);
background:radial-gradient(center,ellipse cover,#2989d8 0%,#101354 99%);
border:1px solid black;
-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;
display:block;
float:left;
height:10px;
margin:5px;
width:10px;
}

.button .inner {
background:#e4f5fc;
background:-moz-radial-gradient(center,ellipse cover,#e4f5fc 0%,#bfe8f9 50%,#9fd8ef 51%,#2ab0ed 100%);
background:-webkit-gradient(radial,center center,0px,center...