JSFiddle - React, Tailwind, and code Playground

by lottikarotti

HTML

<form>
    <p>Select <em>your</em> favored mustache!</p>
    
    <input id='fancy' type='radio' name='mustache' value='fancy' />
    <label for='fancy'>
        <img src='http://goo.gl/JmvvIc' alt='Fancy Mustache' />
    </label>
    
    <input id='rainbow' type='radio' name='mustache' value='rainbow' />
    <label for='rainbow'>
        <img src='http://goo.gl/OX31FQ' alt='Rainbow Mustache' />
    </label>
    
    <input id='pixel' type='radio' name='mustache' value='pixel' />
    <label for='pixel'>
        <img src='http://goo.gl/1Lzjhb' alt='Pixel Mustache' />
    </label>
</form>

CSS

[type='radio']{
    position: absolute;
    left: -9999px;
}

label{
    cursor: pointer;
}

img{
    border: 2px solid #ddd;
}

[type='radio']:checked + label img{
    border-color: #A8E488;
}

JavaScript

/**
 * @author lottikarotti
 */