JSFiddle - React, Tailwind, and code Playground

by mikhailivanko

HTML

<section class="servis">
        <div class="container">
            <h1 class="servis-header">
                Услуги
            </h1>
            <div class="content servis-container-content">
                <div class="champane">
                    <div class="champane-descr">
                        <p class ="champane-descr-header">Эксклюзивное обслуживание ⧽</p>
                        <p class ="champane-descr-low">Равным образом постоянный количественный рост и сфера нашей активности</p>
                    </div>
                </div>
                <div class="bassein">
                    <div class="bassein-descr">
                        <p class ="bassein-descr-header">Сауны, бассейны, бани, фитнес-залы ⧽</p>
                        <p class ="bassein-descr-low">Не следует, однако забывать, что начало повседневной работы по формированию позиции</p>
                    </div>
                </div>
                <div class="cars">
                    <div class="cars-descr">
                        <p class ="cars-descr-header">Охраняемые автомобильные стоянки ⧽</p>
                        <p class ="cars-descr-low">Вы можете не беспокоиться за сохранность вашего автомобиля</p>
                    </div>
                </div>
                <div class="hotel">
                    <div class="hotel-descr">
                        <p class ="hotel-descr-header">Аренда банкетных залов ⧽</p>
                        <p class ="hotel-descr-low">Значимость этих проблем настолько очевидна, что дальнейшее развитие различных форм.</p>
                    </div>
                </div>
            </div>
        </div>
    </section>

CSS

body{
  background: #000;
}
.servis-header {
    font-style: normal;
    font-weight: normal;
    font-size: 40px;
    line-height: 40px;
    color: #333333;
    text-indent: 40px;
}
.servis-container-content {
    display: grid;
    gap: 20px;
    padding-top: 20px;
    padding-bottom: 100px;
    grid-template-areas: 
    "champane hotel"
    "bassein cars";
}


.champane {
    position: relative;
    grid-area: champane;
    width: 570px;
    height: 330px;
    border-radius: 15px;
    cursor: pointer;
    background-color:#FFFFFF;
    background-image: url(https://ak.picdn.net/shutterstock/videos/6854599/thumb/1.jpg);
    background-repeat: no-repeat;
    background-position: top;
}

.bassein {
    grid-area: bassein;
    width: 570px;
    height: 330px;
    border-radius: 15px;
    cursor: pointer;
    background-color:#FFFFFF;
    background-image: url(https://ak.picdn.net/shutterstock/videos/6854599/thumb/1.jpg);
    background-repeat: no-repeat;
    background-position: top;
}
.cars {
    grid-area: cars;
    width: 570px;
    height: 330px;
    border-radius: 15px;
    cursor: pointer;
    background-color:#FFFFFF;
    background-image: url(https://ak.picdn.net/shutterstock/videos/6854599/thumb/1.jpg);
    background-repeat: no-repeat;
    background-position: top;
}
.hotel {
    grid-area: hotel;
    width: 570px;
    height: 330px;
    border-radius: 15px;
    cursor: pointer;
    background-color:#FFFFFF;
    background-image: url(https://ak.picdn.net/shutterstock/videos/6854599/thumb/1.jpg);
    background-repeat: no-repeat;
    background-position: top;
}
.champane-descr {
    width: 400px;
    height: 90px;
    margin: 200px 126px 50px 26px;
    line-height: 0;
}
.bassein-descr {
    width: 420px;
    height: 90px;
    margin: 200px 126px 50px 26px;
}
.cars-descr {
    width: 400px;
    height: 90px;
    margin: 200px 126px 50px 26px;
}
.hotel-descr {
    width: 400px;
    height: 90px;
    margin: 200px 126px 50px 26px;
}
.champane-descr-header {
 ...