JSFiddle - React, Tailwind, and code Playground

HTML

<div id="aside">
    <div id="column">
        <ul>
            <li><a href="">Dashboard</a></li>
            <li><a href="">Catalog</a>
                <div id="s">
                    <ul>
                        <li id="list"><a href="">Catogeries</a></li>
                        <li><a href="">Departure Location</a></li>
                        <li><a href="">Return Location </a></li>
                        <li><a href="">Cities </a></li>
                        <li><a href="">Vendor </a></li>
                        <li><a href="">Discount Coupons</a></li>
                        <li> <a href="">Remaining Seats </a></li>
                    </ul>
                </div>
            </li>
            <li><a href="">Customers</a>
                <div id="m">
                    <ul>
                        <li><a href="">Customers</a></li>
                        <li><a href="">Orders</a></li>
                        <li><a href="">Reward System</a></li>
                    </ul>
                </div>
            </li>
            <li id="report"><a href="">Reports</a>
                <ul>
                    <li><a href="">Monthly</a></li>
                    <li><a href="">Comission Report</a></li>
                    <li></li>
                </ul>
            </li>
        </ul>
    </div>
</div>

CSS

#aside {
    background-color: grey;
    border-style: solid;
    width: 46%;
    color: white;
}
#aside ul {
    padding-left: 0;
}
#aside ul li {
    list-style: none;
    padding-top: 10%;
    margin-left: 0;
    text-decoration: none;
}
#aside ul li a {
     text-decoration: none;
     color: white;
     font-family: Tahoma;
     display: block;
}

#aside ul li a:hover {
    background-color: blue;
}

#aside ul a {
    padding-left: 10px;
}
#aside ul ul a {
    padding-left: 40px;
}
#aside ul ul ul a {
    padding-left: 70px;
}