JSFiddle - React, Tailwind, and code Playground

by thezillion

HTML

<html>
<head>
    <style>
        .tabs{
            list-style: none;
            font-family: "Segoe UI";
            padding: 1em;
        }
        .tabs li{
            cursor: default;
            background-color: indianred;
            color: white;
            display: inline-block;
            height: 21px;
            overflow: hidden;
            padding: 4px 0;
        }
        .tabs li span{
            margin: 0 10px;
        }
        .tabs li:hover{
            background-color: #AD1313;
        }
        .tabs li:hover .subm{
            height: auto;
            padding: 4px 10px;
        }
        .subm{
            height: 0;
            background-color: #AD1313;
            width: inherit;
            display: inline-block;
            overflow: hidden;
            position: absolute;
         }
        .subm a{
            display: block;
            text-decoration: none;
            color: white;
            font-size: 12px;
            padding: 7px;
            text-align: center;
        }
        .subm a:hover{
            background-color: #440303;
        }
    </style>
</head>
<body>
    <ul class='tabs'>
        <li><span>Home</span></li>
        <li><span>Work</span>
            <div class='subm'>
                <a href=''>Experiments</a>
                <a href=''>Freelancing</a>
            </div>
        </li>
        <li><span>Languages</span>
            <div class='subm'>
                <a href=''>HTML</a>
                <a href=''>CSS</a>
                <a href=''>PHP</a>
                <a href=''>MySQL</a>
                <a href=''>JS</a>
            </div>
        </li>
    </ul>
</body>
</html>