JSFiddle - React, Tailwind, and code Playground

by dasmikko

HTML

<nav class="clearfix">
    <ul>
        <li>
            <a href="/deli-take-away">Deli & Take Away</a>
            <ul>
                <li><a href="/deli-take-away/smoerrebroed">Smørrebrød</a></li>
        		<li><a href="/deli-take-away/drikkevarer">Drikkevarer</a></li><li><a href="/deli-take-away/aftenmenu">Aftenmenu</a></li>
                <li><a href="/deli-take-away/generel-info">Generel Info</a></li></ul></li><li><a href="/etablissement.html">Etablissement</a><ul>
                <li><a href="/etablissement/bordreservationer.html">Bordreservationer</a></li><li><a href="/etablissement/frokostmenu.html">Frokostmenu</a></li>
        		<li><a href="/etablissement/frokostmenu-soendag.html">Frokostmenu Søndag</a></li><li><a href="/etablissement/aftenmenu.html">Aftenmenu</a></li>
   			</ul>
        </li>
        <li><a href="/catering">Catering</a>
            <ul>
                <li><a href="/catering/smoerrebroedscanaper">Smørrebrødscanapéer</a></li>
                <li><a href="/catering/buffet">Buffet</a></li>
                <li><a href="/catering/generel-info2">Generel Info</a></li>
            </ul>
        </li>
        <li>
            <a href="/erhverv.html">Erhverv</a>
            <ul>
                <li><a href="/erhverv/firmakonto.html">Firmakonto</a></li>
                <li><a href="/erhverv/frokostordning.html">Frokostordning</a></li>
                <li><a href="/erhverv/smoerrebroedsvaerksted2.html">Smørrebrødsværksted</a></li>
                <li><a href="/erhverv/konsulentbistand.html">Konsulentbistand</a></li>
            </ul>
        </li>
        <li>
            <a href="/shop">Shop</a>
            <ul>
                <li><a href="/shop/kogeboeger">Kogebøger</a></li>
                <li><a href="/shop/gavekort">Gavekort</a></li>
                <li><a href="/shop/generel-info4">Generel Info</a></li>
            </ul>
        </li>
        <li>
            <a href="/om-aamanns.html">Om Aamanns</a>
            <ul>
               ...

CSS

nav {
	display: table;
	width: 940px;
    
}
.nav-bg {
	background: url('/media/website/images/dot.gif') repeat-x center center;
	padding-bottom: 25px;
}
nav ul {
	display: table-row;
	width: 100%;
}
nav ul li {
	display: table-cell;
 	width: auto;
 	/*text-align: center;*/
 	padding-bottom: 10px;
}
nav ul li:first-child {
 	text-align: left;
 	width: 10%;
 	white-space:nowrap;
 	padding-right: 50px;
}
nav ul li:last-child {
 	text-align: right;
 	width: 10%;
 	white-space:nowrap;
}
nav ul li a, a:visited {
	text-decoration: none;
}
nav ul li a:hover {
	color: white;
}
nav ul li ul {
	display: none;
	position: absolute;
	width: auto;
	background: white;
	padding: 10px;
	margin: 5px 0 0 0;
	/*border: 1px solid #bcbdc0;*/
    background: -moz-linear-gradient(top,  rgba(255,255,255,0.8) 0%, rgba(255,255,255,1) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0.8)), color-stop(100%,rgba(255,255,255,1)));
    background: -webkit-linear-gradient(top,  rgba(255,255,255,0.8) 0%,rgba(255,255,255,1) 100%);
    background: -o-linear-gradient(top,  rgba(255,255,255,0.8) 0%,rgba(255,255,255,1) 100%);
    background: -ms-linear-gradient(top,  rgba(255,255,255,0.8) 0%,rgba(255,255,255,1) 100%);
    background: linear-gradient(to bottom,  rgba(255,255,255,0.8) 0%,rgba(255,255,255,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ccffffff', endColorstr='#ffffff',GradientType=0 );
}
.opacity {
    background: -moz-linear-gradient(top,  rgba(255,255,255,0.8) 0%, rgba(255,255,255,1) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0.8)), color-stop(100%,rgba(255,255,255,1)));
    background: -webkit-linear-gradient(top,  rgba(255,255,255,0.8) 0%,rgba(255,255,255,1) 100%);
    background: -o-linear-gradient(top,  rgba(255,255,255,0.8) 0%,rgba(255,255,255,1) 100%);
    background: -ms-linear-gradient(top,  rgba(255,255,255,0.8)...