JSFiddle - React, Tailwind, and code Playground

by gergana

HTML

<section id="connect-us">

        <div class="content-wrapper">
            <h1>Подключиться очень просто!</h1>
            <p>Укажите вашу почту и наш менеджер свяжется с вами в течении дня,а на следующий день ваше заведение будет подключено!</p>

            <form action="#">
                <input type="text" name="email" placeholder="Ваша почта">
                <button class="button button--dark-red" type="submit">Отправить</button>
            </form>

            <div class="social-belt">
                <a href="#" class="icon-facebook-with-circle"></a>
                <a href="#" class="icon-twitter-with-circle"></a>
                <a href="#" class="icon-linkedin-with-circle"></a>
            </div>

            <footer>
                <div class="copyright">
                    <span><span class="firm-name">Mimicra 2015&trade;</span> Сделано в <a href="http://cpdbbk.com">cpdbbk.com</a></span>
                </div>
            </footer>
        </div>
    </section>
</div>

CSS

#connect-us {
    padding: 80px 0;
    background-color: blue;
    text-align: center;
    position: relative;
    width: 100%;
    overflow: hidden;
    z-index: 1;
}

#connect-us:after {
    width: 100%;
    content: "";
    display: block;
    height: 100%;
    position: absolute;
    top: 10%;
    -webkit-transform: skewY(-4deg);
    -moz-transform: skewY(-4deg);
    -ms-transform: skewY(-4deg);
    -o-transform: skewY(-4deg);
    transform: skewY(-2deg);
    background-color: red;
    z-index: 2;
}

.content-wrapper {
    position: relative;
    z-index: 3;
}