JSFiddle - React, Tailwind, and code Playground

by Sagi Avinash Varma

HTML

<div> <span>Dropdown</span>

    <ul class="droplist">
        <li>Link 01</li>
        <li>Link 02</li>
        <li>Link 03</li>
        <li>Link 04</li>
        <li>Link 05</li>
        <li>Link 06</li>
        <li>Link 07</li>
        <li>Link 08</li>
        <li>Link 09</li>
        <li>Link 10</li>
    </ul>
</div>

CSS

* {
     border: 0;
     margin: 0;
     padding: 0;
 }
 div {
     background-color: #09C;
     width: 200px;
     line-height: 40px;
     bottom: 40px;
     left: 300px;
     display: block;
     position: absolute;
     text-indent: 15px;
     cursor: pointer;
 }
 div span {
     font-weight: bold;
     font-family: sans-serif;
     font-size: 16px;
     color: #FFF;
 }
 div:hover ul {
     display: block;
 }
 div ul{
     width: 200px;
     position: absolute;
     display: none;
     list-style: none;
     margin-top:-10px;
 }
 div ul li {
     background-color: #000;
     width: 200px;
     line-height: 30px;
     font-weight: bold;
     font-family: sans-serif;
     font-size: 16px;
     color: #FFF;
     margin-top:-60px;
     
 }