JSFiddle - React, Tailwind, and code Playground

by Vaibhav Jain

HTML

<body>

    <div id="container">
        <div id="menu">
        <ul>
            <li><a href="">Home</a></li>
            <li><a href="">News</a></li>
            <li><a href="">Contact</a></li>
            <li><a href="">About</a></li>
        </ul>
        </div>
        <div class="clear"></div>
        <div id="header">
        <h1 id="logo">Lorem Ipsum</h1>
        </div>

        <div class="left">
         <div class="content">
            <div class="contentHeader">
            What is Lorem Ipsum?
            </div>

            <div class="contentBody">
            Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
         </div>

         <div class="content">
            <div class="contentHeader">
            Where does it come from?
            </div>

            <div class="contentBody">
            Contrary to popular belief, Lorem Ipsum is not simply random text.
            </div>

        </div>
         </div>



        <div class="center">
                    <div class="content">
            <div class="contentHeader">
            Where do we use it?
            </div>

            <div class="contentBody">
            It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.
            </div>
         </div>
        </div>

        <div class="right">
        <div class="content">
            <div class="contentHeader">
            Where do we use it?
            </div>

            <div class="contentBody">
            It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.
            </div>
         </div>
        </div>
    </div>

</body>

CSS

ul
{
list-style-type:none;
margin:auto;
padding:0;
display:table;
}

a
{
text-decoration:none;
display:block;
width:80px;
height:30px;
padding:10px 10px 10px 10px;
color:white;
font-weight:bold;
text-align:center;
}

a:hover
{
background-color:#16a085;

}

li
{
font-family:arial;
font-size:20px;
    float:left;

  
}

#menu
{
background-color:#1abc9c;
height:50px;
width:100%;
position:fixed;
z-index:1;
left:0px;
top:0px;
}

#header
{
width:100%;
height:100px;
background-color:#2ecc71;
position:absolute;
border-radius:5px;
top:50px;

}

#container
{
position:relative;
}

#logo
{
font-family:arial;
color:#3498db;
padding-left:20px;
}

.right
{
width:25%;
height:1000px;
background-color:#2980b9;
border-radius:5px;
float:right;
margin-top:160px;
}

.left
{
width:34%;
height:1000px;
background-color:#f39c12;
border-radius:5px;
float:left;
margin-top:160px;
}

.clear
{
clear:both;
}

.content
{
margin:30px 30px 30px 30px;
}

.contentHeader
{
font-family:impact;
color:#bdc3c7;
font-size:25px;
margin-bottom:20px;     
}

.contentBody
{
font-family:arial;
color:#ecf0f1;
font-size:15px;
margin-bottom:20px;     
}

.center
{
width:38%;
height:1000px;
background-color:#f39c12;
border-radius:5px;
margin-top:160px;
position:absolute;
margin-left:560px;

}