JSFiddle - React, Tailwind, and code Playground

Metro Styled Radio Inputs

by Jennifer Perrin

HTML

<div class="container">
   <div class="row pad-btm-40">
      <!-- START tabs -->
      <div class="span16">
         <div class="spaceEmOut">
            <fieldset class="switch switch-three">
               <legend>Multi Switch</legend>
               <input id="week4" name="view4" type="radio" checked />
               <label for="week4">WEEK</label>
               <input id="month4" name="view4" type="radio" />
               <label for="month4">MONTH</label>
               <input id="year4" name="view4" type="radio" />
               <label for="year4">YEAR</label>
               <span class="switch-button"></span>
            </fieldset>
         </div>
         <div class="spaceEmOut">
            <fieldset class="switch switch-two">
               <legend>Single Switch</legend>
               <input id="yes" name="view" type="radio" checked />
               <label for="yes">YES</label>
               <input id="no" name="view" type="radio" />
               <label for="no">NO</label>
               <span class="switch-button"></span>
            </fieldset>
         </div>
      </div>
   </div>
</div>

CSS

@media only screen {
    .toggle	{
        color: #fff;
        display: block;
        font-family: sans-serif;
        font-size: 12px;
        font-weight: bold;
        margin: 0;
        padding: 0;
        position: relative;
        width: 200px;
    }
    .toggle label {
        display: block;
        padding: 3px 0;
        position: relative;
        width: 100%;
        z-index: 3;
    }
    .toggle input {
        opacity: 0;
        position: absolute;
        z-index: 5;
    }
    .toggle input:focus ~ .toggle-button {
        outline: 1px dotted #6B6B6B;
    }
    .switch	{
        border: 0;
        color: #fff;
        font-family: sans-serif;
        font-size: 12px;
        font-weight: bold;
        padding: 0;
        position: relative;
        width: 300px;
    }
    .switch legend {
        color: #6B6B6B;
        display: block;
        float: left;
        font-size: 12px;
        line-height: 15px;
        padding: 7px 10% 3px 0;
        text-align: right;
        width: 40%;
    }
    .switch input {
        opacity: 0;
        position: absolute;
    }
    .switch legend:after {
        border-radius: 3px;
        content: '';
        height: 100%;
        left: 50%;
        padding: 2px;
        position: absolute;
        top: 0;
        width: 50%;
        z-index: 0;
    }
    .switch label {
        color: #DEDEDE;
        cursor: pointer;
        float: left;
        margin-top: 2px;
        padding: 5px 0 3px 0;
        position: relative;
        text-align: center;
        width: 25%;
        z-index: 2;
    }
    .switch input:checked + label {
        color: #6B6B6B;
        moz-transition: all 0.4s ease-in 0s;
        o-transition: all 0.4s ease-in 0s;
        transition: all 0.4s ease-in 0s;
        webkit-transition: all 0.4s ease-in 0s;
    }
    .switch input:focus + label {
        background-color: #EDEDED;
        moz-transition: all 0.4s ease-in 0s;
        o-transition: all 0.4s ease-in 0s;
        transition:...