JSFiddle - React, Tailwind, and code Playground

by firegroove

HTML

<div class="horizontal">
<p>TITLE 1</p>
<input type="radio" name="name" id="rad1" checked /> <label for="rad1" onclick="" data-content="Option 1">Option 1</label>
<input type="radio" name="name" id="rad2" /> <label for="rad2" onclick="" data-content="Option 2">Option 2</label>
<input type="radio" name="name" id="rad3" /> <label for="rad3" onclick="" data-content="Option 3">Option 3</label>
<input type="radio" name="name" id="rad4" /> <label for="rad4" onclick="" data-content="Option 4">Option 4</label>
<input type="radio" name="name" id="rad5" /> <label for="rad5" onclick="" data-content="Option 5">Option 5</label>
<br><br><br><br>

<div class="vertical">
<p>TITLE 2</p>
    <input type="radio" name="vert" id="vert1" checked /> <label for="vert1" onclick="" data-content="Option 11">Option 1</label>
    <input type="radio" name="vert" id="vert2" /> <label for="vert2" onclick="" data-content="Option 12">Option 2</label>
    <input type="radio" name="vert" id="vert3" /> <label for="vert3" onclick="" data-content="Option 13">Option 3</label>
    <input type="radio" name="vert" id="vert4" /> <label for="vert4" onclick="" data-content="Option 14">Option 4</label>
    <input type="radio" name="vert" id="vert5" /> <label for="vert5" onclick="" data-content="Option 15">Option 5</label>
</div>

CSS

body {
  padding: 50px;
  background-color: hsl(0,0%,20%);
}
p{
	color:#fff
}
input {
  opacity:0;
  position: absolute;
}

	 
	 
	 
input:active {
  -webkit-transform: scale(1.5);
  -webkit-transition: -webkit-transform .1s cubic-bezier(0, 0, .2, 1);
}



input + label:after {
    padding-left: 30px;
    clear: both;
    float: left;
    display: block;
    color: #fff;
    text-shadow: 1px 5px 10px hsl(0,10%,40%);
    content: attr(data-content);
    text-indent: 0;
    white-space: nowrap;
    font-size: 16px;
}

input + label {
    display: block;
    margin: 10px;
    width: 24px;
    height: 24px;
    cursor: pointer;
    vertical-align: middle;
    background-color: hsla(0, 0%, 0%, 0.2);
    background-repeat: no-repeat;
    text-indent: -9999px;
    white-space: nowrap;
    font-size: 0;
    
    background-image: -webkit-radial-gradient(hsla(200, 100%, 90%, 1) 0%, hsla(200, 100%, 70%, 1) 15%, hsla(200, 100%, 60%, 0.3) 28%, hsla(200, 100%, 30%, 0) 70%);
    background-image: -moz-radial-gradient(hsla(200, 100%, 90%, 1) 0%, hsla(200, 100%, 70%, 1) 15%, hsla(200, 100%, 60%, 0.3) 28%, hsla(200, 100%, 30%, 0) 70%);
    background-image: -o-radial-gradient(hsla(200, 100%, 90%, 1) 0%, hsla(200, 100%, 70%, 1) 15%, hsla(200, 100%, 60%, 0.3) 28%, hsla(200, 100%, 30%, 0) 70%);
    background-image: radial-gradient(hsla(200, 100%, 90%, 1) 0%, hsla(200, 100%, 70%, 1) 15%, hsla(200, 100%, 60%, 0.3) 28%, hsla(200, 100%, 30%, 0) 70%);
        
    -webkit-border-radius: 12px;
       -moz-border-radius: 12px;
            border-radius: 12px;    
        
    -webkit-box-shadow: hsla(0, 0%, 100%, 0.15) 0 1px 1px, inset hsla(0, 0%, 0%, 0.5) 0 0 0 1px;
       -moz-box-shadow: hsla(0, 0%, 100%, 0.15) 0 1px 1px, inset hsla(0, 0%, 0%, 0.5) 0 0 0 1px;
            box-shadow: hsla(0, 0%, 100%, 0.15) 0 1px 1px, inset hsla(0, 0%, 0%, 0.5) 0 0 0 1px;
        
    -webkit-transition: background-position 0.15s cubic-bezier(0.8, 0, 1, 1), -webkit-transform 0.25s cubic-bezier(0.8, 0,...