• HTML
• CSS
• JS

HTML

<div class="tabs flex text-sm border-b border-pink-300">
    <a class="px-3 py-2 mx-0.5 -mb-px border border-pink-300 rounded-t-lg cursor-pointer hover:bg-pink-50 activar" mostrar="#uno">Tailwind</a>
    <a class="px-3 py-2 mx-0.5 -mb-px border border-pink-300 rounded-t-lg cursor-pointer hover:bg-pink-50" mostrar="#dos">Utilidad</a>
    <a class="px-3 py-2 mx-0.5 -mb-px border border-pink-300 rounded-t-lg cursor-pointer hover:bg-pink-50" mostrar="#tres">Optimiza</a>
</div>

<div class="views">
    <div id="uno" class="hidden p-3 border-b-2 border-pink-300  text-lg font-mono bg-white activar">
        Tailwind CSS es un framework CSS que permite un desarrollo ágil, basado en clases 
        de utilidad que se pueden aplicar con facilidad en el código HTML 
        y unos flujos de desarrollo que permiten optimizar mucho el peso del código CSS.
    </div>
    <div id="dos" class="hidden p-3 border-b-2 border-pink-300 text-lg tracking-widest bg-white">
       ...se pueden aplicar con facilidad en el código HTML.
    </div>
    <div id="tres" class="hidden p-3 border-b-2 border-pink-300 bg-white">
         <span class="font-medium">...Optimiza mucho el peso del código CSS.</span> Y esto lo pueden observar en el apartado del CSS,casi no hay nada...
    </div>
</div>

CSS

.tabs a.activar{
    background:white;
    border-bottom:1px solid white;
}
.views .activar{
    display:block!important;
}

JS

$(document).ready(function(){
    
   $(".tabs>a").on("click",function(){
       
        var id = $(this).attr("mostrar");
        
        $(this).addClass("activar").siblings().removeClass("activar");
        $(".views>div").removeClass("activar").siblings(id).addClass("activar");
        
   });
   
});