JSFiddle - React, Tailwind, and code Playground

HTML

<div class="horoscope">
        <input type="radio" name="type" id="t1" checked>
        <div class="horoscope_day" id="d1">
            <div class="horoscope_day_select">
                <label for="t1d1" class="horoscope_day_select_label">Сегодня</label>
                <label for="t1d2" class="horoscope_day_select_label">Завтра</label>
            </div>
            <input type="radio" name="day1" id="t1d1" checked>
            <div class="horoscope_day_content" id="bt1d1">
                <h3>ОБЩИЙ гороскоп на СЕГОДНЯ для Рака</h3>
                <p>Поводов для волнений можно найти очень много, но лучше постараться провести этот день спокойно. Пока вы сохраняете самообладание, все идет неплохо. Как только начинаете нервничать, возникают трудности, проблемы, преграды и прочие неприятности. Не стоит специально искать союзников. Люди, которые хотят и готовы помочь, найдут вас сами. Подумайте о том, чем вы их отблагодарите.</p>
                <p>Подходящий день для семейных мероприятий, общения с родственниками. Можно восстановить старые связи, изменить к лучшему отношения, которые в последнее время не ладились.</p>
            </div>
            <input type="radio" name="day1" id="t1d2">
            <div class="horoscope_day_content" id="bt1d2">
                <h3>ОБЩИЙ гороскоп на ЗАВТРА для Рака</h3>
                <p>Поводов для волнений можно найти очень много, но лучше постараться провести этот день спокойно. Пока вы сохраняете самообладание, все идет неплохо. Как только начинаете нервничать, возникают трудности, проблемы, преграды и прочие неприятности. Не стоит специально искать союзников. Люди, которые хотят и готовы помочь, найдут вас сами. Подумайте о том, чем вы их отблагодарите.</p>
                <p>Подходящий день для семейных мероприятий, общения с родственниками. Можно восстановить старые связи, изменить к лучшему отношения, которые в последнее время не ладились.</p>
            </div>
        </div>
        <input type="radio" name="type"...

SCSS

* {
    box-sizing: border-box;
    font-family: sans-serif;
}

body {
    margin: 0;
    padding: 0;
    padding-top: 50px;
}

input[type="radio"] {
    display: none;
}

.horoscope {
    max-width: 1186px;
    padding: 0 26px;
    height: auto;
    margin: auto;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    label {
        color: cornflowerblue;
        text-decoration: underline;
        cursor: pointer;
        &:hover {
            opacity: 0.7;
        }
        &.active {
            background-color: #999;
            color: #fff;
            text-decoration: none;
        }
    }
    &_day {
        width: calc(50% - 15px);
        display: none;
        &_select {
            display: flex;
            &_label {
                width: 180px;
                height: 44px;
                background-color: #ccc;
                margin-bottom: 30px;
                display: flex;
                justify-content: center;
                align-items: center;
            }
        }
        &_content {
            display: none;
        }
    }
    &_type {
        width: calc(50% - 15px);
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        &_label {
            width: calc(50% - 15px);
            height: 70px;
            background-color: #ccc;
            margin-bottom: 30px;
            display: flex;
            justify-content: center;
            align-items: center;
        }
    }
}

#t1:checked + #d1 {display: block;}
#t1d1:checked + #bt1d1 {display: block;}
#t1d2:checked + #bt1d2 {display: block;}

#t2:checked + #d2 {display: block;}
#t2d1:checked + #bt2d1 {display: block;}
#t2d2:checked + #bt2d2 {display: block;}

#t3:checked + #d3 {display: block;}
#t3d1:checked + #bt3d1 {display: block;}
#t3d2:checked + #bt3d2 {display: block;}

#t4:checked + #d4 {display: block;}
#t4d1:checked + #bt4d1 {display: block;}
#t4d2:checked + #bt4d2 {display: block;}

#t5:checked +...