JSFiddle - React, Tailwind, and code Playground

by Danja Wittmann

HTML

<div id="content">
    <input type="radio" name="a" id="a" checked="check" />
    <input type="radio" name="a" id="b" />
    <input type="radio" name="a" id="c" />
    <input type="radio" name="a" id="d" />
    <div id="block">
        <label class="l1" for="a">a</label>
        <label class="l2" for="b">b</label>
        <label class="l3" for="c">c</label>
        <label class="l4" for="d">d</label>
    </div>
    <div id="a_content">A-a</div>
    <div id="b_content">B-b</div>
    <div id="c_content">C-c</div>
    <div id="d_content">D-d</div>
</div>

CSS

input {
        display: none;
    }
    body {
        background-color: #3F3F3F;
        font-family:'Calibri';
    }
    #a:checked ~ #a_content, #b:checked ~ #b_content, #c:checked ~ #c_content, #d:checked ~ #d_content {
        display: block;
    }

    .l1, .l2, .l3, .l4 {
        display: block;
        border-style: solid;
        border-width: 2px 0px 2px 2px;
        padding: 2px;
        width: 20px;
        color: #fff;
        font-weight: bold;
        background: none;
    }
    #block {

        float: left;
    }
    #a_content, #b_content, #c_content, #d_content {
        display: none;
        width: 300px;
        height: 300px;
        background-color: #fff;
        float: right;
    }
    #content {
        width: 326px;
    }