JSFiddle - React, Tailwind, and code Playground

Flat responsive Radio Input form

by Jennifer Perrin

HTML

<form>
    <fieldset>
        <legend>Subscription type</legend>
        <input type="radio" name="radio-choice-1" id="radio-choice-1" value="choice-1" />
        <label for="radio-choice-1">Basic <span>You get basic stuff for this one</span>
 <strong>$5/mo</strong> 
        </label>
        <input type="radio" name="radio-choice-1" id="radio-choice-2" value="choice-2" />
        <label for="radio-choice-2">Extended <span>This is already a lot more</span>
 <strong>$10/mo</strong> 
        </label>
    </fieldset>
    <fieldset>
        <legend>Amount of awesome</legend>
        <input type="radio" name="radio-choice-2" id="radio-choice-3" value="choice-3" />
        <label for="radio-choice-3">Modest user <span>Affordable and functional</span>
 <strong>100</strong>

        </label>
        <input type="radio" name="radio-choice-2" id="radio-choice-4" value="choice-4" />
        <label for="radio-choice-4">Average user <span>Just a right amount of normal</span>
 <strong>200</strong>

        </label>
        <input type="radio" name="radio-choice-2" id="radio-choice-5" value="choice-5" checked />
        <label for="radio-choice-5" class="most-chosen">Active user <span>For active peeps</span>
 <strong>400</strong>

        </label>
        <input type="radio" name="radio-choice-2" id="radio-choice-6" value="choice-6" />
        <label for="radio-choice-6">Power user <span>Pretty rad this one</span>
 <strong>800</strong>

        </label>
        <input type="radio" name="radio-choice-2" id="radio-choice-7" value="choice-7" />
        <label for="radio-choice-7">Extreme user <span>You get ALL the awesome stuff</span>
 <strong>1.000</strong>

        </label>
    </fieldset>
    <button>Submit</button>
</form>

CSS

@import"//fonts.googleapis.com/css?family=Roboto+Condensed:400,700&subset=latin";
*, *:before, *:after { box-model: border-box; }
body {
    color: #333;
    font: 20px/1.5"Roboto Condensed", sans-serif;
    background: #eee;
    margin: 3% 6%;
}

form, fieldset, legend {
    padding: 0;
    margin: 0;
}
form {
    margin: 10px auto;
    overflow: hidden;
}
fieldset {
    margin: 60px 0;
    position: relative;
    border: 1px solid #ddd;
}
legend {
    font-weight: 600;
    position: absolute;
    top: -40px;
    border: 0;
}
input[type=radio] { display: none; }
label {
    font-size: 17px;
    font-weight: bold;
    line-height: 1;
    cursor: pointer;
    display: block;
    padding: 15px 10px 15px 50px;
    position: relative;
    border-top: 1px solid #ddd;
    background: white;
    whitespace: no-wrap;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-transition: all 0.15s ease;
    transition: all 0.15s ease;
}
label:first-of-type { border: 0; }
label:before {
    content:"";
    position: absolute;
    left: 14px;
    top: 14px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 1px solid #d0d0d0;
}
label span {
    color: #b7b7b7;
    font-weight: normal;
    position: absolute;
    left: 35%;
}
label strong {
    color: #00aeef;
    text-align: right;
    float: right;
}
label:focus, label:hover, label:active, input:checked + label {
    color: white;
    background: #00aeef;
    border-color: white;
}
label:focus span, label:hover span, label:active span, input:checked + label span, label:focus strong, label:hover strong, label:active strong, input:checked + label strong {
    color: white;
}
label:focus:before, label:hover:before, label:active:before, input:checked + label:before {
    left: 13px;
    top: 13px;
    width: 12px;
    height: 12px;
    border: 4px solid white;
    background: #00aeef;
}
.most-chosen:after {
    content:"MOST CHOSEN";
    color: white;
    font-size: 12px;
    font-weight: normal;
   ...