JSFiddle - React, Tailwind, and code Playground

by Ариан Шапиро

HTML

<div class="site">
    <div class="zero">
        <div class="sitebackground"></div>
        <div class="zigzag"></div>
        <div class="contentbox">
            <div class="structure">
                <nav id="header">
                    <div id="logo"> <i><b>&#8220;</b></i>

                         <h1>Prechu</h1>

                    </div>
                    <div id="nav">
                        <ul>
                            <li>Home</li>
                            <li class="active">Products</li>
                            <li>Services</li>
                            <li>Contact</li>
                        </ul>
                    </div>
                </nav>
                <div class="karusel"></div>
                <div class="news">
                    <div class="block" id="one"></div>
                    <div class="block" id="two"></div>
                    <div class="block" id="three"></div>
                </div>
                <div class="cart">
                    <div class="cubeone">
                        <div class="one"></div>
                    </div>
                    <div class="cubetwo">
                        <div class="two"></div>
                    </div>
                </div>
                <div class="footer">
                    <p>qwerqr</p>
                </div>
            </div>
        </div>
    </div>
</div>

CSS

div {
    display:block;
}
li, p, h1, h2, h3, h4, h5, h6 {
    font-family:Open sans, sans-serif ;
    font-weight: 300;
}
@font-face {
    font-family:'Open Sans';
    font-style: normal;
    font-weight: 300;
    src: local('Open Sans Light'), local('OpenSans-Light'), url(http://fonts.gstatic.com/s/opensans/v13/DXI1ORHCpsQm3Vp6mXoaTegdm0LZdjqr5-oayXSOefg.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}
div.site {
    background-color:blue;
    margin:0px;
}
div.zero, body {
    margin:0px;
    padding:0px;
    border:0px;
    outline:0px;
    background-color:red;
    width:100%;
    height:100%;
}
div.zero {
    position:relative;
}
div.sitebackground {
    background-image: url(http://static.wixstatic.com/media/e3c702_b7cdc848607e4a66892a1d8a0fd9b72a.jpg);
    background-attachment: scroll;
    background-size: 120%;
    background-position: center top;
    background-repeat: no-repeat;
    width: 100%;
    position: absolute;
    top: 0;
    height: 100%;
    z-index:-999;
}
div.contentbox {
    position:relative;
    width:980px;
    margin-left:auto;
    margin-right:auto;
    background-color:green;
}
div.structure {
    width:980px;
    position:static;
    background-color:yellow;
}
#header {
    height:70px;
}
div#logo {
    width:35%;
    background-color:white;
    float:left;
    height:50%;
    margin-top:10px;
}
div#logo>i {
    float:left;
    font-size:40px;
    width:40px;
    height:40px;
    border-radius:50%;
    background-color:#104090;
    position:absolute;
    top:7px;
}
div#logo>i>b {
    color:white;
    position:absolute;
    left:7px;
    top:6px;
}
div#logo>h1 {
    margin:0px;
    margin-left:45px;
    font-size:32px;
}
div#nav {
    width:65%;
    background-color:purple;
    float:right;
    height:50%;
    margin-top:27px;
}
div#nav>ul {
        margin-left:200px;
}
div#nav li {
    display:inline;
   ...