<div class="mudesamod">
  <header>Вкладки с индикатором</header>
  <input type="radio" name="pesnulad" checked id="home">
  <input type="radio" name="pesnulad" id="blog">
  <input type="radio" name="pesnulad" id="code">
  <input type="radio" name="pesnulad" id="help">
  <input type="radio" name="pesnulad" id="about">
  <nav>
  <label for="home" class="home"><i class="fas fa-home"></i>Home</label>
  <label for="blog" class="blog"><i class="fas fa-blog"></i>Blog</label>
  <label for="code" class="code"><i class="fas fa-code"></i>Code</label>
  <label for="help" class="help"><i class="far fa-envelope"></i>Help</label>
  <label for="about" class="about"><i class="far fa-user"></i>About</label>
  <div class="pesnulad"></div>
  </nav>
  <section>
  <div class="conseculad conseculad-1">
  <div class="title">Топ-5 кошельков</div>
  <p>Если вы обращали внимание на новости в сфере технологий и финансов, вы знаете, что за последние месяцы криптовалюта снова пережила стремительный рост.</p>
  </div>
  <div class="conseculad conseculad-2">
  <div class="title">Они хотят иметь</div>
  <p>Из-за этого роста и того факта, что криптовалюта никуда не денется, многие малые предприятия хотят участвовать в этой сфере. Они хотят иметь возможность принимать криптовалютные платежи, чтобы открыть свои физические или интернет-магазины для совершенно новой аудитории.</p>
  </div>
  <div class="conseculad conseculad-3">
  <div class="title">Кошелек WLX</div>
  <p>Для этого им часто потребуется заручиться помощью кошелька с криптовалютой. Это поможет им безопасно и надежно отправлять, хранить и получать криптовалюту. Но из-за того, что рекламируется так много вариантов кошельков, какие из них лучше всего использовать? В этом сообщении блога мы рассмотрим некоторые из них.</p>
  </div>
  <div class="conseculad conseculad-4">
  <div class="title">Этот кошелек</div>
  <p>Этот кошелек также отлично подходит для совершения платежей. Вы можете совершать глобальные переводы, обеспечивать мгновенные платежи и даже автоматизировать повторяющиеся платежи с течением времени. Безопасность, предлагаемая этим кошельком, без сомнения, является одной из их сильных сторон. </p>
  </div>
  <div class="conseculad conseculad-5">
  <div class="title">От шифрования</div>
  <p>От шифрования данных до регулярных аудитов и тестов команда сосредоточена на обеспечении безопасности ваших монет и токенов.</p>
  </div>
  </section>
  </div>

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}
body{
  overflow: hidden;
  padding: 0 20px;
  background: #17a2b8;
}
::selection{
  background: rgba(23,162,184,0.3);
}
.mudesamod{
  max-width: 700px;
  width: 100%;
  margin: 200px auto;
  padding: 25px 30px 30px 30px;
  border-radius: 5px;
  background: #fff;
  box-shadow: 0px 10px 15px rgba(0,0,0,0.1);
}
.mudesamod header{
  font-size: 30px;
  font-weight: 600;
  padding-bottom: 20px;
}
.mudesamod nav{
  position: relative;
  width: 80%;
  height: 50px;
  display: flex;
  align-items: center;
}
.mudesamod nav label{
  display: block;
  height: 100%;
  width: 100%;
  text-align: center;
  line-height: 50px;
  cursor: pointer;
  position: relative;
  z-index: 1;
  color: #17a2b8;
  font-size: 17px;
  border-radius: 5px;
  margin: 0 5px;
  transition: all 0.3s ease;
}
.mudesamod nav label:hover{
  background: rgba(23,162,184,0.3);
}
#home:checked ~ nav label.home,
#blog:checked ~ nav label.blog,
#code:checked ~ nav label.code,
#help:checked ~ nav label.help,
  #about:checked ~ nav label.about{
  color: #fff;
}
nav label i{
  padding-right: 7px;
}
nav .pesnulad{
  position: absolute;
  height: 100%;
  width: 20%;
  left: 0;
  bottom: 0;
  z-index: 0;
  border-radius: 5px;
  background: #17a2b8;
  transition: all 0.3s ease;
}
input[type="radio"]{
  display: none;
}
#blog:checked ~ nav .pesnulad{
  left: 20%;
}
#code:checked ~ nav .pesnulad{
  left: 40%;
}
#help:checked ~ nav .pesnulad{
  left: 60%;
}
#about:checked ~ nav .pesnulad{
  left: 80%;
}
section .conseculad{
  display: none;
  background: #fff;
}
#home:checked ~ section .conseculad-1,
#blog:checked ~ section .conseculad-2,
#code:checked ~ section .conseculad-3,
#help:checked ~ section .conseculad-4,
#about:checked ~ section .conseculad-5{
  display: block;
}
section .conseculad .title{
  font-size: 21px;
  font-weight: 500;
  margin: 30px 0 10px 0;
}
section .conseculad p{
text-align: justify;
}