JSFiddle - React, Tailwind, and code Playground

by mkirkland616

HTML

<div class="togglebox">
            <div class="tab">
              <span id="radio1"><
              <label for="radio1">Tab1</label>
              <div class="content">
                <p>Cupcake ipsum dolor sit. Amet candy chocolate bar croissant marzipan toffee danish. Chocolate cake jujubes liquorice topping marzipan.</p>
                <p>Macaroon bonbon sugar plum macaroon I love I love liquorice marzipan. Lemon drops I love caramels cheesecake croissant.</p>
              </div>
            </div>
            <div class="tab active">
              <input id="radio2" type="radio" name="toggle" checked="checked"/>
              <label for="radio2">Tab2</label>
              <div class="content">
                <p>Cupcake ipsum dolor sit. Amet candy chocolate bar croissant marzipan toffee danish. Chocolate cake jujubes liquorice topping marzipan.</p>
                <p>Macaroon bonbon sugar plum macaroon I love I love liquorice marzipan. Lemon drops I love caramels cheesecake croissant.</p>
              </div>
            </div>
            <div class="tab">
              <input id="radio3" type="radio" name="toggle"/>
              <label for="radio3">Tab3</label>
              <div class="content">
                <p>Cupcake ipsum dolor sit. Amet candy chocolate bar croissant marzipan toffee danish. Chocolate cake jujubes liquorice topping marzipan.</p>
                <p>Macaroon bonbon sugar plum macaroon I love I love liquorice marzipan. Lemon drops I love caramels cheesecake croissant.</p>
              </div>
            </div>
            <div class="tab">
              <input id="radio4" type="radio" name="toggle"/>
              <label for="radio4">Tab4</label>
              <div class="content">
                <p>Cupcake ipsum dolor sit. Amet candy chocolate bar croissant marzipan toffee danish. Chocolate cake jujubes liquorice topping marzipan.</p>
                <p>Macaroon bonbon sugar plum macaroon I love I love liquorice marzipan. Lemon...

CSS

* {
 margin: 0;
 padding: 0;
 box-sizing: border-box;
}

html,
body {
 height: 100%;
 font: 16px/1 'Open Sans', sans-serif;
 color: #555;
 background: #212121;
}

.togglebox {
 width: 240px;
 height: 100%;
 background: #252525;
}

input[type="radio"] {
 position: absolute;
 opacity: 0;
}

label {
 position: relative;
 display: block;
 height: 30px;
 line-height: 30px;
 padding: 0 20px;
 font-size: 14px;
 font-weight: bold;
 color: rgba(255, 255, 255, 0.5);
 background: #434343;
 cursor: pointer;
}

label:hover {
 background: #1f2d3a;
}

.content {
 height: 0;
 overflow: hidden;
}

input[type="radio"]:checked ~ .content {
 height: auto;
}

p {
 margin: 15px 0;
 padding: 0 20px;
 font-size: 11px;
 line-height: 1.5;
 color: rgba(255, 255, 255, 0.8);
}

.togglebox div {
    margin-bottom: 1px;
}
.togglebox div.active label {
    /* Active label that was selected */
    background: red;
}