JSFiddle - React, Tailwind, and code Playground
HTML
<style>
div,
a,
img,
nav {
margin: 0;
padding: 0;
border: 0;
vertical-align: baseline;
}
nav {
display: block;
}
h2 {
padding: 0;
margin: 0 0 10px 0;
font-size: 24px;
font-weight: bold;
color: #323232;
}
a,
a:visited {
color: #4f2683;
text-decoration: none;
}
a:active,
a:hover {
text-decoration: underline;
}
ul {
margin-bottom: 20px;
margin-top: -5px;
}
ul ul {
margin: 0;
}
a {
font-weight: 700;
}
@media handheld,
screen and (min-width: 620px) {
#menuContainer ul {
list-style: none;
}
#menuContainer {
float: left;
max-width: 821px;
width: 100%;
margin: 0;
padding-top: 20px;
margin-bottom: -20px;
}
#siteMenu .mobileTitle {
display: none;
}
#siteMenu {
height: 60px;
position: relative;
list-style: none;
font-size: 14px;
z-index: 6000;
box-shadow: none;
margin: 0;
padding: 0 0 0 10px;
}
.dropDownMenu {
position: relative;
z-index: 999;
list-style: none;
margin: 0;
padding: 0;
}
.dropDownMenu>li>a {
display: block;
overflow: hidden;
position: relative;
text-indent: 0;
color: #000;
text-align: center;
text-decoration: none;
background: 0;
border: 0 none;
height: auto;
padding: 15px 0;
font-weight: 400;
}
.dropDownMenu ul {
list-style-type: none;
float: left;
position: relative;
...