JSFiddle - React, Tailwind, and code Playground

by shtrih

HTML

<div class="top_wrap">
        <div class="top">
            Some content;
        </div>
    </div> 
    <div class="top_line"></div>

    <div class="middle_wrap">
        <div class="middle">
            <div id="line_holder">
                <svg height="2000px" width="9001px">SVG content;</svg>
            </div>
            <div class="menus"></div>
            <div class="menus2"></div>
        </div>
    </div>

    <div class="bottom_line"></div>

CSS

@import url(http://fonts.googleapis.com/css?family=Maven+Pro:400,700);
@import url(http://fonts.googleapis.com/css?family=Ubuntu:400,700&subset=latin,cyrillic-ext,cyrillic);

body {
    font-family: 'Maven Pro';
    height: 100%;
    border: #999 2px dashed;
}

div.top_wrap {
    width: 100%;
    height: 87px;
    text-align: center;
}

div.top {
    padding: 0 0 16px 0;
}

div.top_line {
    width: 100%;
    height: 24px;
    border-bottom: 3px solid #EBEBEB;
    border-radius: 0px 0px 50% 50% / 0px 0px 15px 15px;
#    background: url(/templates/images/top_line.png) center bottom no-repeat;
}

div.bottom_line {
    width: 100%;
    height: 24px;
    border-top: 3px solid #DDDDDD;
    border-radius: 50% 50% 0px 0px / 15px 15px 0px 0px;
#    background: url(/templates/images/bottom_line.png) center top no-repeat;
}

div.middle_wrap {
    width: 100%;
    height: 300px;
}

div.middle {
    text-align: left;
    margin: 30px;
    background: #FFFFFF center center no-repeat;
    position: relative;
}

#line_holder {
    clear: both;
    overflow: hidden;
    height: 200px;
    position: relative;
    border: #999 2px dotted;
}

.menus, menus2 {
    height: 50px;
}

JavaScript

// vertical resioze //

$(window).resize(function(){
    var height = $(window).height();
    var h1 = height - 195;
    var h2 = height - 295;
    if (h1 > 0 && h2 > 0) {
        $('.middle_wrap').css("height", h1);
        $('#line_holder').css("height", h2);
    }
}).resize();