JSFiddle - React, Tailwind, and code Playground

by Evan Siegel

HTML

<div>
    <input type="checkbox" id="plus" />
    <label for="plus"></label>
    <div class="hide-show">Hello world.</div>
</div>

CSS

/*
 * These are our default styles for the page.
 * When you first get here, it shows a nice +
 * in the button and no text.
 */
input[type="checkbox"] {
    position: absolute;
    display: block;
    top: -99999px;
    left: -99999px;
}
label {
    position: relative;
    display: block;
    width: 38px;
    height: 38px;
    cursor: pointer;
    background: blue;
    border-radius: 100%;
    color: white;
}
label:after {
    content: '+';
    position: absolute;
    top: 2px;
    left: 11px;
    font-size: 30px;
    line-height: 1em;
    font-family: sans-serif;
}
.hide-show {
    display: none;
    margin: 10px;
    padding: 10px;
    width: 100px;
    height: 100px;
    font-family: sans-serif;
    border: 1px solid black;
}

input[type="checkbox"]:checked ~ label {
    background: green;
}
input[type="checkbox"]:checked ~ label:after {
    content: '-';
    left: 15px;
}
input[type="checkbox"]:checked ~ .hide-show {
    display: block;
}