JSFiddle - React, Tailwind, and code Playground

by MichaelWan

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css">
<div class="checkRadioContainer">
    <label>
        <input type="radio" name="radioGroup" />
        <i class="fa fa-check fa-2x"></i>
        <span>Item 1</span>
    </label>
    <label>
        <input type="radio" name="radioGroup" />
        <i class="fa fa-check fa-2x"></i>
        <span>Item 2</span>
    </label>
    <label>
        <input type="radio" name="radioGroup" />
        <i class="fa fa-check fa-2x"></i>
        <span>Item 3</span>
    </label>
</div>

CSS

div.checkRadioContainer > label > input {
    visibility: hidden;
}

div.checkRadioContainer {
    max-width: 10em;
}
div.checkRadioContainer > label {
    display: block;
    border: 2px solid grey;
    margin-bottom: -2px;
    cursor: pointer;
}

div.checkRadioContainer > label > span {
    display: inline-block;
    vertical-align: top;
    line-height: 2em;
}

div.checkRadioContainer > label > input + i {
    visibility: hidden;
    color: green;
    margin-left: -0.5em;
    margin-right: 0.2em;
}

div.checkRadioContainer > label > input:checked + i {
    visibility: visible;
}