JSFiddle - React, Tailwind, and code Playground

by yahyaKACEM

HTML

<ol id="nav">
    <li>
        <a href="index.php">Home</a>
    </li>
    <li class="dropdown_alignedLeft">
        <a href="">Products</a>
        <ul>
            <li class="dropdown_alignedRight">
                <a href="">iPoP</a>
                <ul>
                    <li>
                        <a href="customers.php?category=ipop">iPoP - Network Solutions for Vessels</a>
                    </li>
                </ul>
            </li>
            <li class="dropdown_alignedRight">
                <a href="">Cameras</a>
                <ul>
                    <li>
                        <a href="customers.php?category=icam">iCam 501 Ultra - Intrinsically Safe Digital Camera with Flash</a>
                    </li>
                </ul>
            </li>
            <li class="dropdown_alignedRight">
                <a href="">BNWAS</a>
                <ul>
                    <li>
                        <a href="customers.php?category=bnwas">BNWAS - Bridge Navigation Watch Alarm System</a>
                    </li>
                </ul>
            </li>
            <li class="dropdown_alignedRight">
                <a href="">Lighting</a>
                <ul>
                    <li>
                        <a href="customers.php?category=peli">Peli 2690 - Intrinsically Safe LED Head Lamp</a>
                    </li>
                </ul>
            </li>
            <li class="dropdown_alignedRight">
                <a class="last" href="">Communication</a>
                <ul>
                    <li>
                        <a href="customers.php?category=handy">Ex-Handy 06 - Intrinsically Safe Cell Phone</a>
                    </li>
                </ul>
            </li>
        </ul>
    </li>
    <li class="dropdown_alignedLeft">
        <a href="">Customers</a>
        <ul>
            <li>
                <a href="customers.php?category=maritime">Maritime</a>
            </li>
            <li>
                <a...

CSS

#nav {
    float: right;
    margin: 15px 0 0 0;
}

#nav > li {
    float: left;
}

#nav li a {
    display: block;
    padding: 10px 20px;
    font-family: "PT Sans", "Helvetica Neue", Arial, sans-serif;
    font-size: 16px;
    text-decoration: none;
    color: #2B95C8;
    white-space: nowrap;
}

#nav li:hover a {
    color:#fff;
    -moz-border-radius: 5px 5px 0 0;
    -webkit-border-radius: 5px 5px 0 0;
    border-radius: 5px 5px 0 0;
}

#nav li ul li a {
    color:#fff;
}

.dropdown_alignedLeft, .dropdown_alignedRight {
    position: relative;
}

#nav > ul {
    -moz-border-radius: 0 5px 5px 5px;
    -webkit-border-radius: 0 5px 5px 5px;
    border-radius: 0 5px 5px 5px;
    color: #FFFFFF;
}

.dropdown_alignedLeft ul, .dropdown_alignedRight ul {
    display: none;
}

#nav .dropdown_alignedLeft:hover > ul, #nav .dropdown_alignedRight:hover > ul {
    display: block;
    z-index: 100;
    position: absolute;
    top: 100%;          
    -moz-border-radius: 0 5px 5px 5px;
    -webkit-border-radius: 0 5px 5px 5px;
    border-radius: 0 5px 5px 5px;
}

#nav .dropdown_alignedRight:hover > ul {
    top: 0;
    left: 100%;
}

#nav li ul li.dropdown_innerTitle {
    padding: 10px 0;
    border: none;
    margin: 10px 20px 0 20px;
}

#nav li ul li.dropdown_lastItem {
    border: none;
}

#nav > li:hover > a, #nav li .current_page {
    background: url("../images/current_page_arrow_blue.png") no-repeat center bottom;
}

#nav .dropdown_alignedLeft > a, #nav .dropdown_alignedRight > a {
    background: url("../images/dropdown_arrow_blue.png") no-repeat top right;
}

#nav .dropdown_alignedLeft:hover > a, #nav .dropdown_alignedRight:hover > a {
    background: #2378A1 url("../images/dropdown_arrow_blue.png") no-repeat bottom right;
}

#nav .dropdown_alignedLeft:hover > ul, #nav .dropdown_alignedRight:hover > ul {
    background: #2378A1;
}
    
#nav li ul li {
    border-bottom: 1px dashed #2B95C8;
}

#nav li ul li.dropdown_innerTitle {
    color: #C8DDE7;
}

#nav li ul...