JSFiddle - React, Tailwind, and code Playground

by Oleg Shmigelski

HTML

<div id="wrapper">
    <header>
        <h1><a href="#">K<span></span>tchenwall</a></h1>
        <nav>
            <a href="#">Home</a>
            <a href="#">Portfolio</a>
            <a href="#">Journal</a>
            <a href="#">Social</a>
            <a href="#">Contact</a>
        </nav>
    </header>
    <div id="content">
        <div class="main-news">
            <!-- <h2>Ullamcorper Mollis Pellentesque</h2>
            <span></span>
            <p></p>
            <span></span>
            <img src="">
            <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Cras mattis consectetur purus 
            sit amet fermentum. Nullam quis risus eget urna mollis ornare vel eu leo. Vivamus sagittis lacus vel augue laoreet rutrum 
            faucibus dolor auctor. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Lorem ipsum dolor sit amet, 
            consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras mattis consectetur purus sit 
            amet fermentum.</p>
            <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Aenean eu leo quam. Pellentesque ornare sem lacinia quam 
            venenatis vestibulum. Cras mattis consectetur purus sit amet fermentum. Nullam id dolor id nibh ultricies vehicula ut id 
            elit. Maecenas faucibus mollis interdum.</p>
            <nav>
                <a href=""></a>
                <a href=""></a>
                <a href=""></a>
                <a href=""></a>
                <a href=""></a>
            </nav> -->
        </div>
        <div class="supplement-news">
        </div>
        <div class="reviews">
        </div>
        <div class="comment-add">
        </div>
    </div>
    <aside>
    </aside>
</div>

CSS

*{
    padding: 0;
    margin: 0;
}
body{
    background: url("../images/bg.jpg");
}
#wrapper{
    width: 960px;
    margin: 0 auto;
    border: solid 1px #000;
}
header{
    height: 79px;
    background: #fff;
}
header h1 a{
    font: 22px Cabin;
    color: #939393;
    float: left;
    line-height: 79px;
    text-decoration: none;
}
header h1 span{
    background: url("../images/header-logo-elem.png");
    display: inline-block;
    width: 13px;
    height: 22px;
    position: relative;
    top: 4px;
    margin: 0 3px;
}
header nav{
    line-height: 79px;
}
header nav a{
    font: bold 14px Cabin;
    color: #707070;
    text-decoration: none;
    margin-left: 34px;
}
header nav a:first-child{
    margin-left: 470px;
}
header nav a:hover{
    color: #7dae59;
}
 
/* CONTENT */
 
#content{
    width: 660px;
    height: 300px; /*delete*/
    background: #fff;
    border: solid 1px rgba(203,203,203,0.7);
    margin-top: 25px;
    display: inline-block;
}
 
/* SIDEBAR */
 
aside{
    width: 275px;
    height: 300px; /*delete*/
    background: #fff;
    border: solid 1px rgba(203,203,203,0.7);
    margin-left: 17px;
    display: inline-block;