JSFiddle - React, Tailwind, and code Playground

HTML

<section class="slider">
                <div class="slide slide1">
                    <h2>Долго, дорого, 
                        скрупулезно.</h2>
                    <p>Математически выверенный дизайн<br> 
                        для вашего сайта или мобильного приложения.</p>
                        <a href="#" class="btn about">Узнать больше</a>
                </div>
                <div class="slide slide2">
                    <h2>Любим математику 
                        как никто другой</h2>
                    <p>Никакого креатива, только математические формулы<br> 
                        для расчета идеальных пропорций.</p>
                        <a href="#" class="btn about">Узнать больше</a>
                </div>
                <div class="slide slide3">
                    <h2>Только ночь,
                        только хардкор</h2>
                    <p>Работать днем, как все? Мы против этого.<br> 
                        Ближе к полуночи работа только начинается.</p>
                    <a href="#" class="btn about">Узнать больше</a>
                </div>
                <div class="controls">
                    <input type="radio" name="slider" id="slide1" checked>
                    <label for="slide1"></label>
                    <input type="radio" name="slider" id="slide2">
                    <label for="slide2"></label>
                    <input type="radio" name="slider" id="slide3">
                    <label for="slide3"></label>
                </div>
            </section>

CSS

.slider {
    background: #eeeeee;
    width: 100%;
    padding: 0 140px;
    position: relative;
}

.slide {
    display: block;
    background: #eeeeee;
    height: 354px;
    width: auto;
    padding-top: 77px;
    position: relative;
	z-index: 0;
}
.slide h2 {
    font-size: 55px;
    line-height: 55px;
    padding: 0;
    margin: 0;
    margin-bottom: 23px;
}
.slide p {
    font-size: 16px;
    line-height: 24px;
    color: #283136;
    padding: 0;
    margin: 0;
    margin-bottom: 41px;
}
.about {
    font-size: 16px;
    line-height: 18px;
    text-transform: uppercase;
    padding: 17px 54px 15px;
    text-decoration: none;
    background: #fb565a;
    color: white;
    border-radius: 3px;
}

.slide1 {
    background: transparent url("../img/slide1.png") no-repeat bottom right 31px;
}
.slide1 h2,
.slide1 p {
    width: 380px;
}

.slide2 {
    background: transparent url("../img/slide2.png") no-repeat bottom right;
}
.slide2 h2,
.slide2 p {
    width: 517px;
}

.slide3 {
    background: transparent url("../img/slide3.png") no-repeat bottom right;    
}
.slide3 h2,
.slide3 p {
    width: 411px;
}

.controls {
    width: 88px;
    display: flex;
    justify-content: space-between;
    position: absolute;
    left: 50%;
    top: 318px;
    z-index: 1000;
}
.controls label {
    position: relative;
    cursor: pointer;
    width: 4px;
    height: 4px;
    background: white;
    border:7px solid white;
    border-radius: 50%;
}
.controls input {
    display: none;
}

.controls input[type="radio"]:checked + label::after {
    position: absolute;
    display: block;
    content: "";
    top: -2px;
    left: -2px;
    width: 4px;
    height: 4px;
    background: white;
    border: 2px solid #c2c2c2;
    cursor: pointer;
    border-radius: 50%;
}

.slide {
    display: none;
}

#slide1 ~ .slider .slide1,
#slide2 ~ .slider .slide2,
#slide3 ~ .slider .slide3 {
    display: block;
}