JSFiddle - React, Tailwind, and code Playground

by Mukul kant

HTML

<div id="wrap"> 
    <div id="header"> 
        <div id="logo"></div> 
        <div id="navWrap"> 
            <div id="nav"> 
                <ul> 
                    <li><a href="x"; class="smothScroll">Home</a></li> 
                    <li><a href="xl"; class="smothScroll">About</a></li>
                    <li><a href="x"; class="smothScroll">My Tumblr</a></li> 
                </ul>
            </div> 
        </div> 
    </div> 
</div> 

<h1>x</h1> 
<h2>x</h2> <hr> 
<p>x</p> 
<p>x</br>xe</br>x</br>Lx</p> 
<p>Rxy</br>x</br>x</br>x</p> 
<p>Rx</br>x x</br>x</br>x</p> 
<p>x</br>xarex</br>Ix</br>M</p>

CSS

body     {
    background-color:#333;
    color:#999
    font: 12px/1.4em Arial,sans-serif;
    }
#wrap
    {
    margin-left: 10px auto;
    background: black;
    padding:10px;
    width: 100px;
    float:left;
    }
#header
    {
    background-color:black;
    color: #fff;
    }
#logo
    {
    float: center;
    font-size: 30px;
    line-height:0px;
    padding: 5px;
    }
#navWrap
    {
    height:50px;
    float:center;
    }
#nav ul
    {
    margin: 1px;
    padding:1px;
    float:left;
    }
#nav li
    {
    float:left;
    padding: 5px;
    background-color: black;
    margin: 0 5px;
    color: white;
    list-style-type: none
    }
#nav li a
    {
    color:white;
    text-decoration: none;
    font-size: 15px;
    float:left;
    text-indent:0px;
    }
#nav li a:hover
    {
    text-decoration: underline;
    float:left;
    }
br.clearLeft
    {
    clear: left;
    }
h1
    {
    color:cyan;
    text-align:center;
    border-bottom: double 5px;
    }
h2
    {
    color:red;
    }
h3
    {
    color:cyan;
    }
p
    {
    color:#DBDBDB;
    font-size:22px;
    }