JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
  <div class="header-slider clearfix">
    <input type="radio" id="btn-1" class="slider-toggle-1" name="slider-toggle" checked>
    <input type="radio" id="btn-2" class="slider-toggle-2" name="slider-toggle">
    <input type="radio" id="btn-3" class="slider-toggle-3" name="slider-toggle">
    <div class="slider-controls">
      <label for="btn-1"></label>
      <label for="btn-2"></label>
      <label for="btn-3"></label>
    </div>
    <div class="slide slide-1">
      <b class="slide-title">Долго, дорого, <br>
            скрупулёзно.</b>
      <p>
        Математически выверенный дизайн
        <br> для вашего сайта или мобильного приложения.
      </p>
      <a href="#" class="btn">Узнать больше</a>
    </div>
    <div class="slide slide-2">
      <b class="slide-title">Любите ли вы математику, <br>
          как любим её мы?</b>
      <p>
        Нашим дизайнерам мы удаляем нейроны, ответственные
        <br> за креатив, чтобы дать им возможность всё просчитать.
      </p>
      <a href="#" class="btn">Узнать больше</a>
    </div>
    <div class="slide slide-3">
      <b class="slide-title">Только наркотики, <br>
          только хардкор!</b>
      <p>
        Все дизайнерские решения в нашей компании принимаются
        <br> только под воздействием качественных галлюциногенов.
      </p>
      <a href="#" class="btn">Узнать больше</a>
    </div>
  </div>
</div>

CSS

.container {
  width: 880px;
  margin: 0 auto;
  padding: 0 10px;
  font-family: Roboto;
  color: #000;
  font-size: 16px;
  font-weight: 500;
  background: #ddd;
}

.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

.header-slider {
  margin-top: 30px;
  position: relative;
}

.header-slider .slide {
  float: left;
  width: 100%;
  padding-top: 40px;
}

.header-slider input {
  display: none;
}

.slider-controls {
  position: absolute;
  font-size: 0;
  margin-left: -25px;
  left: 50%;
  bottom: 25%;
}

.slider-controls label {
  display: inline-block;
  margin-right: 10px;
  width: 4px;
  height: 4px;
  background: #fff;
  border: 3px solid #fff;
  border-radius: 50%;
  cursor: pointer;
}

.slider-controls label:last-child {
  margin: 0;
}

.slider-toggle-1:checked ~ .slider-controls label[for="btn-1"],
.slider-toggle-2:checked ~ .slider-controls label[for="btn-2"],
.slider-toggle-3:checked ~ .slider-controls label[for="btn-3"] {
  background-color: #c1c1c1;
}

.slider-toggle-1:checked ~ .slide-1,
.slider-toggle-2:checked ~ .slide-2,
.slider-toggle-3:checked ~ .slide-3 {
  display: block;
}

.header-slider .slide {
  display: none;
}

.slide-1 {
  background: url(http://savepic.ru/14951840.png) no-repeat 100% 30%;
}

.slide-2 {
  background: url(http://savepic.ru/14997923.png) no-repeat 100% 30%;
}

.slide-3 {
  background: url(http://savepic.ru/14989731.png) no-repeat 100% 100%;
}

.slide-title {
  display: inline-block;
  line-height: 36px;
  font-size: 36px;
  font-weight: 500;
  margin-bottom: 18px;
}

.slide p {
  font-size: 16px;
  line-height: 22px;
  margin-bottom: 27px;
}

.btn {
  text-transform: uppercase;
  height: 38px;
  display: inline-block;
  font-size: 12px;
  text-align: center;
  text-decoration: none;
  color: white;
  font-weight: 500;
  line-height: 38px;
}

.slide .btn {
  width: 240px;
  background: #fb565a;
  margin-bottom: 80px;
  border-radius: 5px
}