JSFiddle - React, Tailwind, and code Playground

HTML

<section class="tabs">
    
    <!-- Невидимый служебный блок, использующийся для возможности связи кнопок навигационного блока и блоков контента.-->
    <a id="tab-1" class="tab-hidden">tab-1</a>
    <a id="tab-2" class="tab-hidden">tab-2</a>
    <a id="tab-3" class="tab-hidden">tab-3</a>        
    
    <!-- Обертка, которая является "братом" для служебного блока, выполняет роль связующего звена между служебным невидимым блоком и всей остальной визуальной частью  -->
    <div class="tabs__wrap">   
        
        <!-- Навигационный блок, с помощью которого происходит переключение табов -->
        <nav class="tabs__nav">
            <a class="tab tab-1" href="#tab-1">tab-1</a>
            <a class="tab tab-2" href="#tab-2">tab-2</a>
            <a class="tab tab-3" href="#tab-3">tab-3</a>
        </nav> 
        
        <!-- Контентный блок 1  -->
        <article class="content content-1">
            <h3>Заголовок 1</h3>
            <p>
                Текст <br /> Текст <br />  Текст <br /> Текст <br />   
                Текст <br /> Текст <br /> Текст                
            </p>
        </article> 
        
        <!-- Контентный блок 2  -->
        <article class="content content-2">
            <h3>Заголовок 2</h3>
            <p>
                Тут меньше текста <br /> Текст <br />  Текст   
            </p>
        </article>
        
        <!-- Контентный блок 3  -->
        <article class="content content-3">
            <h3>Заголовок 3</h3>
            <p>
                А тут больше <br /> Текст <br />  Текст  <br /> 
                Текст <br />  Текст  <br /> Текст <br />  Текст  <br /> 
                Текст <br />  Текст  <br /> 
            </p>
        </article> 
    </div>     
</section>

CSS

/* Скрываем служебный невидимый блок */
.tab-hidden{
    display: none;
    }

/* Скрываем контент */
.content{
    display: none;
    }

/* По умолчанию отображается первый контентный блок */
.content-1{
    display: block;
    }

/* По умолчанию первая кнопка в навигационном блоке выделяется цветом */
.tab-1{
    background: #08d4e6;
    }

/* Теперь самое важное! Вся магия заключена именно здесь :) */

/* Если "активирован" второй таб делаем второй навигационной кнопке подсветку, 
если третий таб - третьей кнопке */
#tab-2:target ~ .tabs__wrap .tab-2,
#tab-3:target ~ .tabs__wrap .tab-3{
    background: #08d4e6;
    }

/* Если "активирован" второй или третий таб убираем подсветку у первой кнопки */
#tab-2:target ~ .tabs__wrap .tab-1,
#tab-3:target ~ .tabs__wrap .tab-1{
    background-color: transparent;
    }

/* Если "активирован" второй таб показываем второй контентный блок, 
если третий таб - третий контентный блок  */
#tab-2:target ~ .tabs__wrap .content-2,
#tab-3:target ~ .tabs__wrap .content-3{
    display:block;
    }

/* Если "активирован" второй или третий таб скрываем первый контентный блок */
#tab-2:target ~ .tabs__wrap .content-1,
#tab-3:target ~ .tabs__wrap .content-1{
    display:none;
    }

/* Оформительская мишура, не имеющая особого значения */
.tabs{
    margin: 2em;
    border: 2px solid #e70026;
    }
    .tabs__nav{
        clear: both;
        overflow: auto;
        }
        .tab{
        float: left;
        margin: 1em;
        padding:0.5em;
        border: 1px solid #e70026;
        }
    .content{
    margin: 0.2em;
    padding: 0 1.5em;
    border: 1px solid #e70026;
    }