JSFiddle - React, Tailwind, and code Playground

HTML

<div class="create-prepp" id="create-new">
     <h5 class="notifications-title">Создать препп</h5>

</div>
<div class="create-new">
    <hr size="1" width="120">
    <div class="create-prepp-block">
        <div class="item-photo" id="big-photo-class">
            <img id="big-photo" src="http://upload.fott.ru/upload/photo/PA_201_GR_HOK.KHA/02.jpg" alt="lorem">
            <div class="shadow-upside-down">
                <img src="img/shadow-upside-down.png" alt="lorem">
            </div>
            <div class="new-prepp-toolbar">
                <div class="left">
                    <img src="img/left.png" alt="lorem">
                </div>
                <div class="right">
                    <img src="img/right.png" alt="lorem">
                </div>
                <div class="oneoftwo">Выберете фото (1 из 5)</div>
                <input class="price" placeholder="Цена">
            </div>
        </div>
    </div>
    <textarea placeholder="Введите ссылку на товар" id="link"></textarea>
    <button class="send-prepp">Отправить</button>
</div>

CSS

*, body, button, input, textarea, select {
    text-rendering: optimizeLegibility;
    font-size:100%;
}
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td {
    margin:0;
    padding:0;
}
table {
    border-collapse:collapse;
    border-spacing:0;
}
fieldset, img {
    border:0;
}
address, caption, cite, code, dfn, em, strong, th, var {
    font-style:normal;
    font-weight:normal;
}
ol, ul {
    list-style:none;
}
caption, th {
    text-align:left;
}
h1, h2, h3, h4, h5, h6 {
    font-size:100%;
    font-weight:normal;
}
q:before, q:after {
    content:'';
}
abbr, acronym {
    border:0;
}
img {
    width: 100%;
    min-height: 100%;
    min-width: 100%;
}
.logo {
    width: 17px;
    height: 20px;
    float: left;
    display: inline
}
.image-header {
    width: 100%;
    position: relative;
    text-align: center;
    -moz-box-sizing: border-box;
    -opera-sizing: border-box;
    -webkit-box-sizing: border-box;
    -khtml-box-sizing: border-box;
    box-sizing: border-box;
    background-size: cover;
}
.toolbar {
    position: absolute;
    z-index: 999;
    width: 100%;
    padding: 18px;
    -moz-box-sizing: border-box;
    -opera-sizing: border-box;
    -webkit-box-sizing: border-box;
    -khtml-box-sizing: border-box;
    box-sizing: border-box;
}
body {
    margin: 10px;
    padding-bottom: 100px;
}
.notification {
    width: 18px;
    height: 23px;
    float: right;
    position: relative;
    -webkit-transition: ease-out 0.3s;
    -moz-transition: ease-out 0.3s;
    -o-transition: ease-out 0.3s;
    transition: ease-out 0.3s;
}
.ava-small {
    width: 21px;
    height: 21px;
    float: right;
    margin-right: 18px;
    border-radius: 50px;
    overflow: hidden;
    border: 1px solid;
    border-color: #fff;
}
h1 {
    font-family :'proxima_nova_bold';
    font-weight : bold;
    font-size : 50px;
    color : #000;
    color : rgb(0, 0, 0);
    margin-bottom:...

JavaScript

$(function () {
    $(".notifications-title").click(function () {

        $(".create-new").animate({
            height: 'toggle'
        }, 100);

        $(".notifications-title").css({
            "border-color": "#fff"
        });
    });
});

$(function () {
    $(".send-prepp").click(function () {

        $(".create-new").animate({
            height: 'toggle'
        }, 1000).delay(800).queue(function () {

            $(".prepp-container-hidden").animate({
                height: 'toggle'
            }, 500).delay(500).queue(function () {

                $(".prepp-container-hidden").addClass('animated fadeIn');

                $(".notifications-title").css({
                    "border-color": "#000"
                });


                $(this).dequeue();


            });
        });
    });
});

$(function () {
    $(".delete-prepp").click(function () {
        $(".prepp-container-hidden").addClass('animated fadeOutLeft').delay(1000).queue(function () {
            $(".prepp-container-hidden").animate({
                height: 'toggle'
            }, 500);
            $(this).dequeue();
        });
    });
});

$(function () {
    $("#link").keyup(function () {
        $("#link").addClass("animated fadeOut").delay(400).queue(function () {
            $(".create-prepp-block").animate({
                height: 'toggle'
            }, 800).delay(800).queue(function () {
                $(".send-prepp").animate({
                    height: 'toggle'
                })
                $("#big-photo-class").addClass('animated bounceInUp')
            });
        });
    });
});





$(document).ready(function () {
    $(".notifications-title").click(function () {
        //$(this).animate(function(){
        $('html, body').animate({
            scrollTop: $("#create-new").offset().top
        }, 1000);
        //});
    });
});