JSFiddle - React, Tailwind, and code Playground

by naveen

HTML

<div id="wrapper">
    <div id = "header">
        My Sample Work
    </div>
    <div id="container">
        <div id="leftbar">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque placerat dignissim ornare. In eget neque nisl, in rutrum dui. Suspendisse potenti. In eget nunc leo. Integer cursus, ipsum at scelerisque vulputate, arcu quam euismod eros, in blandit
        </div>
        <div id="content">
            Cras quis odio nunc. Donec a nisl massa, quis pretium orci. Pellentesque vehicula dignissim ante, ac mattis tortor consequat id. Sed pharetra dictum laoreet. Curabitur ut risus ante, sit amet rhoncus augue. Maecenas congue luctus nisi. Mauris ipsum lectus, semper eget vehicula eu, rutrum sit amet nisi. Suspendisse id fringilla tellus. Fusce sodales commodo enim, vitae placerat mi volutpat eget.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque placerat dignissim ornare. In eget neque nisl, in rutrum dui. Suspendisse potenti. In eget nunc leo. Integer cursus, ipsum at scelerisque vulputate, arcu quam euismod eros, in blandit velit metus vel felis. Fusce a sodales libero. Integer placerat dignissim dapibus. Vestibulum blandit tempus ante, congue rutrum orci vulputate eget. Pellentesque quis tortor quis felis commodo sollicitudin. Cras adipiscing mi id purus sodales eu scelerisque mi venenatis
Cras quis odio nunc. Donec a nisl massa, quis pretium orci. Pellentesque vehicula dignissim ante, ac mattis tortor consequat id. Sed pharetra dictum laoreet. Curabitur ut risus ante, sit amet rhoncus augue. Maecenas congue luctus nisi. Mauris ipsum lectus, semper eget vehicula eu, rutrum sit amet nisi. Suspendisse id fringilla tellus. Fusce sodales commodo enim, vitae placerat mi volutpat eget.
        </div>
        <div id="rightbar">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque placerat dignissim ornare. In eget neque nisl, in rutrum dui. Suspendisse potenti. In eget nunc leo. Integer cursus,...

CSS

.clear{
    clear: both;
}
#wrapper{
    background-color: #00f;
    margin: 0px 20px;
    width: 100%;
}
#header, #footer{
    color: #fff;
    text-align: center;
}
#header{
    background-color: #f00;
}
#footer{
    background-color: #F000FF;
}
#container{
    background-color: #ff0;
}
#container div{
    float: left;
}
#leftbar, #rightbar{
    background-color: #0f0;
    vertical-align: top;
    width:20%;
}
#content{
    background-color:#eee;
    width: 60%;
}