JSFiddle - React, Tailwind, and code Playground

by Trimax

HTML

<div id="labels-menu">
    <ul>
        <li><a href="#1">Label 1</a>

        </li>
        <li><a href="#2">Label 2</a>

        </li>
        <li><a href="#3">Label 3</a>

        </li>
        <li><a href="#4">Label 4</a>

        </li>
    </ul>
</div>
<div id="container">
    <div id="label-1" class="content">
        <div class="left">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ac eleifend lorem. Ut vitae dictum lectus, id fringilla justo. Duis ullamcorper leo nec lorem rutrum, vulputate volutpat metus scelerisque. Morbi elementum nunc auctor, feugiat urna et, ornare dolor.</p>
        </div>
        <div class="right">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ac eleifend lorem. Ut vitae dictum lectus, id fringilla justo. Duis ullamcorper leo nec lorem rutrum, vulputate volutpat metus scelerisque. Morbi elementum nunc auctor, feugiat urna et, ornare dolor.</p>
        </div>
    </div>
    <div id="label-2" class="content">
        <div class="left">
            <p>Pellentesque rhoncus ornare arcu et vulputate. Morbi sit amet lorem mollis, placerat sapien sit amet, aliquet neque. Vestibulum pellentesque fringilla tortor, in accumsan sapien mattis sit amet. Aliquam tellus enim, tincidunt sit amet elit non, scelerisque venenatis justo.</p>
        </div>
        <div class="right">
            <p>Pellentesque rhoncus ornare arcu et vulputate. Morbi sit amet lorem mollis, placerat sapien sit amet, aliquet neque. Vestibulum pellentesque fringilla tortor, in accumsan sapien mattis sit amet. Aliquam tellus enim, tincidunt sit amet elit non, scelerisque venenatis justo.</p>
        </div>
    </div>
    <div id="label-3" class="content">
        <div class="left">
            <p>Donec hendrerit tellus metus, adipiscing placerat purus ultricies id. Maecenas magna sem, convallis eu aliquet vitae, pretium rhoncus leo.</p>
        </div>
        <div class="right">
            <p>Donec hendrerit...

CSS

body {
    font-family: sans-serif;
}
#labels-menu {
    border-bottom: 1px solid blue;
    margin: 0;
    width: 100%;
    height: 20px;
    padding: 2px;
}
ul {
    margin: 0;
    position: absolute;
}
li {
    list-style-type: none;
    float: left;
    margin: 0 0.5em;
    border: 1px  solid blue;
    border-radius: 5px 5px 0px 0px;
}
li:hover {
    background-color: #EEE;
    border-bottom: 1px solid white;
}
a {
    text-decoration: none;
    padding: 0px 5px;
}
div.left {
    width: 40%;
    float: left;
}
div.right {
    width: 60%;
    float: right;
}
p {
    padding: 0 5px;
}
div.content {
    position: absolute;
}
#label-1 {
    visibility: visible;
}
#label-2 {
    visibility: hidden;
}
#label-2:active {
    visibility: visible;
}
#label-3 {
    visibility: hidden;
}
#label-4 {
    visibility: hidden;
}