JSFiddle - React, Tailwind, and code Playground

by Manju06

HTML

<div class="menu__wrapper padding-left-large sticky">
    <div class="dropdown no-padding-left">
      <a class="menu__mainlink" href="#">Main</a>
      <i class="fa fa-caret-down"></i>
        <div class="dropdown-content">
          <a class="menu__sublink" href="#">Information</a>
          <a class="menu__sublink" href="#">Archiv</a>
          <a class="menu__sublink" href="#">Kontakt</a>
          <a class="menu__sublink" href="#">Impressum</a></div>
    </div>
    <div class="dropdown no-padding-left">
      <a class="menu__mainlink" href="#">Program</a>
      <i class="fa fa-caret-down"></i>
        <div class="dropdown-content show">
          <a class="menu__sublink" href="#">This</a>
          <a class="menu__sublink" href="#">That</a>
          <a class="menu__sublink" href="#">Really_long_menu_item</a>
          <a class="menu__sublink" href="#">Calendar</a></div>
    </div>
    <div class="dropdown no-padding-left">
      <a class="menu__mainlink" href="#">Found</a>
      <i class="fa fa-caret-down"></i>
        <div class="dropdown-content">
          <a class="menu__sublink" href="#">Videos</a>
          <a class="menu__sublink" href="#">Image</a>
          <a class="menu__sublink" href="#">Sound</a>
          <a class="menu__sublink" href="#">Text</a>
      </div>
    </div>
</div>

CSS

html, body {
  margin:0;
  padding: 0;
  font-family: arial;
}

/* Menu */
.menu__wrapper {
	background: #fff;
	z-index: 8000;
	min-height: 30px;
  box-shadow: 0px 1px 5px 0px rgba(0,0,0,0.75);
}

/* The dropdown container */
.dropdown {
  float: left;  
  position:relative;
}


/* Main links */
.menu__mainlink {
  cursor: pointer;
  border: none;
  color: $dark-color;
  padding: 5px 16px;
  display: inline-block;
  
}

/* Sublinks */
.menu__sublink {
  font-size: 16px;
  padding: 5px 16px;
  text-decoration: none;
  display: block;
 
}
.dropdown:hover > a {
  color:red;

  
}

.menu__mainlink, .menu__sublink:hover {
  color: red;
  text-decoration: none; 

}

/* Dropdown content (hidden by default) */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #fff;
  left: 0;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
  border:1px solid black;
}


/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
  display: block;
}


/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}



/* Sticky header */
.menu__wrapper.sticky {
    position: fixed;
    background-color: #fff;
    width: 100%;
    top: 0px;
}

/* Dropdown button */
.sticky .dropdown .dropbtn, .sticky a {
  color: #000;
}