JSFiddle - React, Tailwind, and code Playground

by Nevear

HTML

<div class="med-tabs">
    <input type="radio" id="tab1" name="tab" checked>
    <label for="tab1" tabindex="0">Вкладка 1</label>
    
    <input type="radio" id="tab2" name="tab">
    <label for="tab2" tabindex="0">Вкладка 2</label>
    
    <input type="radio" id="tab3" name="tab">
    <label for="tab3" tabindex="0">Вкладка 3</label>
    
    <div class="tab-content">
        <div class="content" id="content1">
            <h2>Содержимое Вкладки 1</h2>
            <p>Это содержимое первой вкладки.</p>
        </div>
        <div class="content" id="content2">
            <h2>Содержимое Вкладки 2</h2>
            <p>Это содержимое второй вкладки.</p>
        </div>
        <div class="content" id="content3">
            <h2>Содержимое Вкладки 3</h2>
            <p>Это содержимое третьей вкладки.</p>
        </div>
    </div>
</div>

CSS

.med-tabs {
    display: flex;
    flex-direction: column;
}

.med-tabs input[type="radio"] {
    display: none; /* Скрываем радиокнопки */
}

.med-tabs label {
    padding: 10px 20px;
    background: #f1f1f1;
    border: 1px solid #ccc;
    cursor: pointer;
    margin-right: 5px;
    display: inline-block; /* Горизонтальное расположение */
}

.med-tabs input[type="radio"]:checked + label {
    background: #ccc; /* Подсветка активной вкладки */
}

.tab-content {
    border: 1px solid #ccc;
    padding: 20px;
}

.content {
    display: none; /* Скрываем все содержимое по умолчанию */
}

#tab1:checked ~ .tab-content #content1,
#tab2:checked ~ .tab-content #content2,
#tab3:checked ~ .tab-content #content3 {
    display: block; /* Показываем содержимое активной вкладки */
}