JSFiddle - React, Tailwind, and code Playground

HTML

<header class="main-header">
            <nav class="navigator">
                <a class="logo"></a>
                <ul class="navigator-center">
                    <li>
                        <a href="#">Студия</a>
                    </li>
                    <li>
                        <a href="#">Клиенты</a>
                    </li>
                    <li>
                        <a href="#">Магазин</a>
                    </li>
                    <li>
                        <a href="#">Контакты</a>
                    </li>
                </ul>
                <a class="basket" href="#">Корзина</a>
            </nav>
            <section class="slider">
                <div class="slider-controls">
                    <input type="radio" name="slider" id="slide-btn1" checked>
                    <label for="slide-btn1"></label>
                    <input type="radio" name="slider" id="slide-btn2">
                    <label for="slide-btn2"></label>
                    <input type="radio" name="slider" id="slide-btn3">
                    <label for="slide-btn3"></label>
                </div>
                <div class="slides">
                        <div class="slide">
                            <h2>Долго, дорого, 
                                скрупулезно.</h2>
                            <p>Математически выверенный дизайн<br> 
                                для вашего сайта или мобильного приложения.</p>
                                <a href="#" class="btn about">Узнать больше</a>
                        </div>
                        <div class="slide">
                            <h2>Любим математику 
                                как никто другой</h2>
                            <p>Никакого креатива, только математические формулы<br> 
                                для расчета идеальных пропорций.</p>
                                <a href="#" class="btn about">Узнать больше</a>
                        </div>
                    ...

CSS

html,
body {
    font-family: "Roboto", "Arial", sans-serif;
    font-size: 16px;
    line-height: 24px;
    margin: 0;
    padding: 0;
    width: auto;
    font-weight: 500;
}

/*header*/
.main-header {
    width: 100%;
    background: #eeeeee;
}

.navigator {
    display: flex;
    justify-content: space-between;
    margin: 0 auto;
    padding: 0 20px;
    padding-top: 50px;
    width: 80.5555%;
}

.logo {
    align-items: flex-end;
    display: block;
    width: 160px;
    height: 65px;
    padding: 0;
    margin: 0;
    background: transparent url("../img/nerds-logo.png") no-repeat center
}

.navigator a {
    text-decoration: none;
    color: black;
    font-size: 16px;
    line-height: 30px;
    text-transform: uppercase;
}

.navigator-center {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    width: 36.666%;
    margin: 0;
    padding: 0;
    margin-bottom: 15px;
}

.navigator-center li {
    list-style: none;
    padding: 0;
    margin: 0;
}


.navigator a:hover {
    color: #fb565a;
}

.navigaror a:active {
    color: rgba(0, 0, 0, 0.3);
}

.basket {
    margin-top: auto;
    margin-bottom: 15px;
    padding-left: 41px;
    position: relative;
}

.basket::after {
    content: "";
    display: block;
    position: absolute;
    width: 15px;
    height: 15px;
    background: transparent url("../img/sprites.png") no-repeat 0 0;
    top: 7px;
    left: 0;
}

/*----------------------------------*/

/*index-main*/
.index-main {
    display: flex;
    flex-wrap: wrap;
    margin: 0;
    padding: 0;
}

/*slider*/
.slider {
    margin-right: auto;
    margin-left: auto;
    width: 80.5555%;
    height: 431px;
    position: relative;
}

.slide {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}
.slide h2 {
    font-size: 55px;
    line-height: 55px;
    padding: 0;
    margin: 0;
    margin-top: 77px;
    margin-bottom: 23px;
}
.slide p {
    font-size: 16px;
    line-height: 24px;
    color:...