JSFiddle - React, Tailwind, and code Playground

by iBertel

HTML

<div id="wrapper">
    
    <div class="navigation-area">
        
        <div class="first active">
            <a class="hit-area" href="#"></a>
            <p class="info">First</p>
        </div>
        
        <div class="secound">
            <a class="hit-area" href="#"></a>
            <p class="info">Secound</p>
        </div>
        
        <div class="third">
            <a class="hit-area" href="#"></a>
            <p class="info">Third</p>
        </div>
    
    
    </div>
    
</div>

CSS

.first, .secound, .third {margin-bottom:5px;}
.navigation-area {width:300px; height:auto; background-color:#F60;}
.info {width:100%; height:20px; margin-left:5px; display:inline;}
.hit-area {width:20px; height:20px; background-color:#000; display:block; float:left;}
.active {background-color:#CCC; color:#FFF;}