JSFiddle - React, Tailwind, and code Playground

by RXBeat

HTML

<div class="togglebox">

        <div>
            <input id="radio1" type="radio" name="toggle"/>
            <label style="background-color:green" for="radio1">111</label>
            <div class="content">
<p>Zeile 1</p>
<p>Zeile 2</p>
<p>Zeile 3</p>
            </div>
        </div>


        <div>
            <input id="radio2" type="radio" name="toggle"/>
            <label style="background-color:red" for="radio2">222</label>
            <div class="content">
<p>Zeile 1</p>
<p>Zeile 2</p>
<p>Zeile 3</p>
            </div>
        </div>


        <div>
            <input id="radio3" type="radio" name="toggle"/>
            <label style="background-color:chocolate" for="radio3">333</label>
            <div class="content">
<p>Zeile 1</p>
<p>Zeile 2</p>
<p>Zeile 3</p>
            </div>
        </div>

</div>

CSS

.togglebox {
            width: 92%;
            height: 150%;
            margin: 0 auto;
            background: #00000000;
            text-align: left;
            line-height: 0.7;
        }

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

        label {
            position: relative;
            display: block;
            height: 24px;
            line-height: 24px;
            padding: 0 20px;
            font-size: 14px;
            font-weight: bold;
            color: white;
            text-shadow: black 0.1em 0.1em 0.2em;
            background: #2e4155;
            cursor: pointer;

            border-style: solid;
            border-width: 1px;
            border-color: #000000;
        }

        label:hover {
            background: #1f2d3a;
        }

        label:after {
            content: '\f078';
            top: 0px;
            right: 20px;
            font-family: fontawesome;
            position: absolute;
        }

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

        input[type="radio"]:checked~label {
            color: white;
            text-shadow: black 0.1em 0.1em 0.2em;
            font-size: 20px;
        }

        input[type="radio"]:checked~label:after {
            transform: rotate(90deg);
            -moz-transform: rotate(90deg);
            -o-transform: rotate(90deg);
            -ms-transform: rotate(90deg);
            -webkit-transform: rotate(90deg);
        }

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