JSFiddle - React, Tailwind, and code Playground

by blineberry

HTML

<h2>Checkboxes</h2>
<div class="group">
    <input id="checkbox-1" type="checkbox" name="checkbox" /><label for="checkbox-1" >One</label>
    <input id="checkbox-2" type="checkbox" name="checkbox" /><label for="checkbox-2" >Two</label>
    <input id="checkbox-3" type="checkbox" name="checkbox" /><label for="checkbox-3" >Three</label>
    <input id="checkbox-4" type="checkbox" name="checkbox" /><label for="checkbox-4" >Four</label>
    <input id="checkbox-5" type="checkbox" name="checkbox" /><label for="checkbox-5" >Five</label>
    <input id="checkbox-6" type="checkbox" name="checkbox" /><label for="checkbox-6" >Six</label>
    <input id="checkbox-7" type="checkbox" name="checkbox" /><label for="checkbox-7" >Seven</label>
    <input id="checkbox-8" type="checkbox" name="checkbox" /><label for="checkbox-8" >Eight</label>
    <input id="checkbox-9" type="checkbox" name="checkbox" /><label for="checkbox-9" >Nine</label>
</div>

<h2>Radio</h2>
<div class="group">
    <input id="radio-1" type="radio" name="radio" /><label for="radio-1" >One</label>
    <input id="radio-2" type="radio" name="radio" /><label for="radio-2" >Two</label>
    <input id="radio-3" type="radio" name="radio" /><label for="radio-3" >Three</label>
    <input id="radio-4" type="radio" name="radio" /><label for="radio-4" >Four</label>
    <input id="radio-5" type="radio" name="radio" /><label for="radio-5" >Five</label>
    <input id="radio-6" type="radio" name="radio" /><label for="radio-6" >Six</label>
    <input id="radio-7" type="radio" name="radio" /><label for="radio-7" >Seven</label>
    <input id="radio-8" type="radio" name="radio" /><label for="radio-8" >Eight</label>
    <input id="radio-9" type="radio" name="radio" /><label for="radio-9" >Nine</label>
</div>

CSS

</style>
<meta name="viewport" content="width=device-width">
<style>

body {
    font-family: sans-serif;
    color: #333;
}

.group {
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: flex;
    -webkit-flex-flow: row wrap;
    -moz-flex-flow: row wrap;
    -ms-flex-flow: row wrap;
    flex-flow: row wrap;
    -webkit-justify-content: space-around;
    -moz-justify-content: space-around;
    -ms-justify-content: space-around;
    justify-content: space-around;
}
.group label {
    box-sizing: border-box;
    width: 33%;
    padding: 1em;
    
    border: 5px solid #FFF;
    
    background: rgba(0, 255, 0, 0.25);
    
    cursor: pointer;
}
.group input {
    display: none;
}
.group input:checked + label {
    background: rgba(0, 255, 0, 0.75);
}
}