JSFiddle - React, Tailwind, and code Playground

by apoorvasahay01

HTML

<body>
    <div class="container">
        <div class="header">
            <nav>
                <ul>
                    <li>
                        <a href="#">Home</a>
                        <ul>
                            <li><a href="#">Home</a></li>
                            <li><a href="#">HomeHomeHome</a></li>
                            <li><a href="#">Home</a></li>
                            <li><a href="#">Home</a></li>
                        </ul>
                    </li>
                    <li>
                        <a href="#">Home</a>
                        <ul>
                            <li><a href="#">Home</a></li>
                            <li><a href="#">Home</a></li>
                            <li><a href="#">Home</a></li>
                            <li><a href="#">Home</a></li>
                        </ul>                    
                    </li>
                    <li>
                        <a href="#">Home</a>
                        <ul>
                            <li><a href="#">Home</a></li>
                            <li><a href="#">Home</a></li>
                            <li><a href="#">Home</a></li>
                            <li><a href="#">Home</a></li>
                        </ul>                    
                    </li>
                    <li>
                        <a href="#">Home</a>
                        <ul>
                            <li><a href="#">Home</a></li>
                            <li><a href="#">Home</a></li>
                            <li><a href="#">Home</a></li>
                            <li><a href="#">Home</a></li>
                        </ul>                    
                    </li>
                    <li>
                        <a href="#">Home</a>
                        <ul>
                            <li><a href="#">Home</a></li>
                            <li><a href="#">Home</a></li>
                            <li><a href="#">Home</a></li>
     ...

CSS

html,body
{
    margin: 0px;
    border: 0px;
    padding: 0px;    
    color: #555;
    font-size: 20px;
    font-family:  "Open Sans","lucida grande","Segoe UI",arial,verdana,"lucida sans unicode",tahoma,sans-serif;
    height: 100%;   /*Required for maing the container class occupy the remaining area if nothing is there in the content div*/
    background-color: #FFFFFF;
}

.container
{
    height: 100%;   /*Required for maing the container class occupy the remaining area if nothing is there in the content div*/
}

.header 
{
    height: 200px;
    background-color: #CFCFCF;
    position: relative;
}

.content
{
    height: 100%;   /*Required for maing the container class occupy the remaining area if nothing is there in the content div*/
    margin-left: 200px;
    margin-right:200px;
    margin-bottom: -500px;
    padding-top: 50px;
    padding-bottom: 50px;
    padding-left: 100px;
    padding-right: 100px;
}

.footer
{   
    height: 500px;
    background-color: #CFCFCF;
    border-top: 5px solid #A0A0A0;
}

nav
{
    height: 40px;
    width: 100%;
    position: absolute;
    bottom: 0px;
    background-color: #C0C0C0;
}

nav ul
{
    margin: 0px;
    border: 0px;
    padding: 0px;
}

/*Rules that will be applied to all anchors which are child any level below nav class*/
nav a 
{
    margin: 0px;
    border: 0px;
    padding: 0px;
    text-decoration: none;
    padding-left: 25px;
    padding-right: 25px;
}

/*Rules that will be applied to all li which are child any level below nav class*/
nav li
{
    margin: 0px;
    border: 0px;
    padding: 0px;
    list-style-type: none;
    line-height: 38px;
}

nav > ul /* > means rules will act on intermediate child*/
{
    position: relative;
    padding-left: 300px;
    padding-right: 300px;
}

nav > ul > li
{
    display: inline;
    position: relative;
}

nav > ul > li > ul
{
    padding: 0px;
    border: 0px;
    margin: 0px;
    position: absolute;
    display: none;
}

nav > ul > li > ul > li
{
    position:...