JSFiddle - React, Tailwind, and code Playground

by alessia_fachin

HTML

<a href="#tab1">tab1</a>    
<a href="#tab2">tab2</a>    
<a href="#tab3">tab3</a><br/>    

<div>
<a id="tab2"></a>
    <p>testo del tab2</p>
<a id="tab3"></a>
    <p>testo del tab3</p>
<a id="tab1"></a>
    <p>testo del tab1</p>
</div>

CSS

p{
    opacity:0;
    position:absolute;
    transition: opacity 0.5s;
}

p:last-of-type{
    opacity:1;
}

a:target + p{
    opacity:1;
}

a:target + p ~ p{
    opacity:0;
}

div{
    position:relative;
}