JSFiddle - React, Tailwind, and code Playground

by PesecZ42

HTML

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width>, initial-scale=1.0">
    <title>Go</title>
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <main>
        <section class="banner">
            <div class="banner-container">
                <h1 class="banner-title"> GAME OVER </h1>
                <p class="banner-text">Новый формат игр и отдыха </p>
            </div>
        </section>
        <section class="halls">
            <h2 class="halls-title">наши залы</h2>
            <div class="halls-container">
                <div class="halls-80s-vibes">
                    <p class="halls-text">80’s vibes</p>
                </div>
                <div class="halls-wild-west">
                    <p class="halls-text">wild west</p>
                </div>
                <div class="halls-star-wars">
                    <p class="halls-text">Star wars</p> 
                </div>
                <div class="halls-neon-style">
                    <p class="halls-text">neon style</p>
                </div>
            </div>
        </section>
        <section class="about">
            <h2 class="about-title">о нас</h2>
            <div class="text-container">
                <p>
                    Для наших гостей мы создали концептуально
                    новое игровое пространство виртуальной реальности в
                    центральной части города.
                </p>
                <p>
                    Каждый день мы стараемся создавать
                    для вас самую лучшую игровую атмосферу и радовать
                    Вас топовыми игровыми
                    разработками со всего мира.
                </p>
            </div>
            <div class="about-blockquote">
                <p class="blockquote-text"> <span>“</span>
                   ...

CSS

body {
    background-color: #1b1a1b;
    font-family: 'Arial', sans-serif;
    color: #fff;
    padding: 146px 130px 198px;
}

ul {
    list-style: none;
}

a {
    text-decoration: none;
    color: #fff;
    font-weight: 700;
    font-size: 24px;
}

h2 {
    font-weight: 700;
    font-size: 40px;
    text-align: center;
    text-transform: uppercase;
    padding-top: 75px;
}

span {
    font-weight: 900;
    font-size: 44px;
    text-transform: uppercase;
    color: #6C0287;
}

.banner {
    height: 950px;
    background-image: url(/img/men\ VR.png);
    background-repeat: no-repeat;
    background-position:520px 80px;
}
.banner-container {
    width: 1180px;
}
.banner-title {
    font-weight: 900;
    font-size: 150px;
    letter-spacing: -0.1em;
    margin-bottom: 10px;
}

.banner-text {
    width: 369px;
    height: 50px;
    font-weight: 400;
    font-size: 28px;
    padding-left: 131px;
} 


.halls {
    height: 3136px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center
}


.halls-title {
    margin-bottom: 60px;
}


.halls-text {
    width: 203px;
    height: 160px;
    font-weight: 700;
    font-size: 70px;
    text-align: center;
    text-transform: uppercase;
    padding: 277px 489px;
}

.halls-80s-vibes {
    width: 1180px;
    height: 710px;
    background-image: url(/img/80vibes.jpg);
    background-repeat: no-repeat;
}

.halls-wild-west {
    width: 1180px;
    height: 710px;
    background-image: url(/img/wild\ west.jpg);
    background-repeat: no-repeat;
    margin-top: 60px;
}

.halls-star-wars {
    width: 1180px;
    height: 710px;
    background-image: url(/img/star\ wars.jpg);
    background-repeat: no-repeat;
    margin-top: 60px;
}
.halls-neon-style {
    width: 1180px;
    height: 710px;
    background-image: url(/img/neon\ style.jpg);
    background-repeat: no-repeat;
    margin-top: 60px;
}

.about {
    height: 546px;
}

.text-container {
    width: 1180px;
    font-size: 20px;
   ...