JSFiddle - React, Tailwind, and code Playground

HTML

<body>
        <main>
            <header>
                <h2 class="logo left">ООО АКТИВ-СЕРВИС</h2>
                <h2 class="phon right">8(834)<span class="blue">245-29-30</span></h2>
                <div class="clear"></div>
            </header>
            <section id="main">
                <h1 class="title"><span class="red">РОВНЫЙ ПОЛ БЕЗ ТРЕЩИН</span> <span class="condensed"> С ФИБРОВОЛОКНОМ*</span></h1>
                <div id="info-text">
                    <div class="left">
                        <h1><span class="red">Полусухая стяжка</span> пола по немецкой технологии.<br><span class="red">Цены</span> на <span class="red">14 % ниже</span> рынка!</h1>
                        <p class="info">В Казани 42 компании стяжки пола.<br><span class="red">33 из них - посредники</span>, со своими наценками</p>
                        <p class="info">Мы - компания по стяжке пола со <span class="red">штатными рабочими</span> и <span class="red">собственным</span> оборудованием!</p>
                    </div>
                    <div class="right">
                        <iframe width="100%" height="200" src="https://www.youtube.com/embed/RgVf2vnvtdc?rel=0&amp;controls=0&amp;showinfo=0" frameborder="0" allowfullscreen></iframe>
                    </div>
                    <div class="clear"></div>
                </div>
                <div class="call-to-action">
<!--                    <img class="arrow" src="images/arrow.png" alt="arrow">-->
                    <div></div>
                    <h1>
                        <span class="red">ОСТАВЬТЕ ЗАЯВКУ </span><span class="condensed content"></span>
                    </h1>
                        <form class="number">
                            <input type="tel" name="number" placeholder="Введите телефон">
                            <input type="button" name="button" value="ЖДУ ЗВОНКА">
                        </form>
                </div>
            </section>
            <table>
                ...

CSS

body{
    background: url("images/background.png");
    background-size: cover;
    font-family: 'PT Sans Narrow', sans-serif;
    z-index: 3;
    line-height: 0.9;
    font-size: 15pt;
}

@media (min-width: 900px) {
    .content::before {
        content: "НА РАСЧЕТ СТОИМОСТИ - ПЕРЕЗВОНИМ ЧЕРЕЗ 2 МИНУТЫ!";
    }
}

@media (max-width: 899px) {
    body {
        font-size: 10pt;
    }
    
    .logo, .phon {
        float: none;
        text-align: center;
        width: 100%;
    }
    
    .content::before {
        content: "НА РАСЧЕТ СТОИМОСТИ";
    }
}

.clear {
    clear: both;
}

h2, h1 {    
    font-weight: 500;
}

.blue {
    color: blue;
}

.logo, .phon {
    margin: 0 40px;
    font-size: 2em;
}

.phon {
    font-size: 40px;
}

.red {
    color: red;
}

#main>h1 {
    text-align: center;
    margin-bottom: 0.2em;
}

div#info-text {
    width: 70%;
    //height: 300px;
    margin: 0 auto;
    z-index: 2;
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#b3bead+0,dfe5d7+8,fcfff4+100 */
    background: #b3bead; /* Old browsers */
    background: -moz-linear-gradient(45deg,  #b3bead 0%, #dfe5d7 8%, #fcfff4 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(45deg,  #b3bead 0%,#dfe5d7 8%,#fcfff4 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(45deg,  #b3bead 0%,#dfe5d7 8%,#fcfff4 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b3bead', endColorstr='#fcfff4',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */

}

.left {
    float: left;
}

.right {
    float: right;
}

div.left, div.right {
    width: 42%;
    text-align: center;
    padding: 4%
}

.left>h1 {
    margin-top: 0;
}

.call-to-action>h1 {
    text-align: center;
    margin: 20px 100px 10px 100px;
}

.condensed {
    font-family: 'Open Sans Condensed', sans-serif;
}

.arrow {
    width: 150px;
    float: left;
   ...