JSFiddle - React, Tailwind, and code Playground

HTML

<h1>This is Heading Section</h1>

<div class="nav_bar">
    <ul class="main_menu">
        <li> <a href="#">Home</a>

        </li>
        <li> <a href="#">Blogging</a>

            <ul class="sub_menu">
                <li> <a href="#">Html And CSS</a>

                </li>
                <li> <a href="#">Blogger Tutorials</a>

                </li>
                <li> <a href="#">Wordpress Tutorials</a>

                </li>
            </ul>
        </li>
        <li> <a href="#">Contact Us</a>

        </li>
    </ul>
</div>
<br/>
<br/>

<h2>Here Will Content will be going</h2>

CSS

.nav_bar ul {
    list-style:none;
    margin:0;
    padding:0;
}
.main_menu li {
    float:left;
    width:100px;
    background:#444444;
    border-right:1px solid white;
    text-align:center;
    position:relative;
    height:30px;
    font-size:15px;
    line-height:30px;
    transition:0.5s;
}
.main_menu li ul li {
    float:none;
    width:150px;
    text-align:left;
    padding-left:5px;
    border-top:1px solid white;
    visibility:hidden;
}
.main_menu li:hover ul li {
    visibility:visible;
    transform:translate(5px, 0px);
}
.main_menu li ul li:hover {
    transform:translate(10px, 0px);
}
.main_menu li ul {
    position:absolute;
    top:30px;
    left:0px;
}
.main_menu li:hover {
    background-color:maroon;
}
.main_menu a {
    text-decoration:none;
    color:white;
}
h2 {
    clear:both;
}