JSFiddle - React, Tailwind, and code Playground

HTML

<div class="horoscope">
  <input type="radio" name="type" id="t1" checked>
  <div class="horoscope_day" id="d1">
    <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 class="horoscope_day_select">
      <label for="t1d1" class="horoscope_day_select_label">Сегодня</label>
      <label for="t1d2" class="horoscope_day_select_label">Завтра</label>
    </div>
  </div>
  <input type="radio" name="type" id="t2">
  <div class="horoscope_day" id="d2">
    <input type="radio" name="day2" id="t2d1" checked>
    <div class="horoscope_day_content" id="bt2d1">
      <h3>АНТИ...

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;
        flex-direction: column;
        &_select {
            display: flex;
            order: -1;
            &_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;
        }
    }
}

.horoscope > input:checked + .horoscope_day {
  display: flex;
}

.horoscope_day > input:checked + .horoscope_day_content {
  display: block;
}

@for $i from 1 through 2 {
  .horoscope_day > input:nth-of-type(#{$i}):checked ~ .horoscope_day_select > label:nth-of-type(#{$i}) {
    background: red;
    color: white;
  }
}

@for $i from 1 through 8 {
  .horoscope > input:nth-of-type(#{$i}):checked ~ .horoscope_type >...