JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrap">
        <a tabindex="1">один</a>
        <a tabindex="1">два</a>
        <a tabindex="1">три</a>
        <div class="raz">первая</div>
        <div class="dva">вторая</div>
        <div class="tri">третья</div>
        
    </div>

CSS

.wrap{
margin:0 auto;
width:900px;
height:50px;
position:relative;
padding:200px 0px 0px 10px;
}

a{
display:inline-block;
border:3px solid red;
width:100px;
}

.raz, .dva, .tri{
display:none;
width:400px;
height:100px;
border:3px solid red;
position:absolute;
top:50px;
left:10px;
background:#fff;
}

.raz{
display:block;
}

a:focus:nth-child(2)~.dva{
display:block;
background:#ccc;
}

a:focus:nth-child(3)~.tri{
display:block;
background:#999;
}