JSFiddle - React, Tailwind, and code Playground

by Joe

HTML

<div class='menujohanes'>
  <ul class='dark_menu'>
    <li>
      <a class='selected' expr:href='data:blog.homepageUrl' title='Home'>
        Home
      </a>
    </li>

    <li data-role='dropdown'>
      <a href='#'>
        Categories
      </a>
      <ul>
        <li id='sub'>
          <a href='#'>
            sathya
          </a>
          <ul>
            <li>
              <a href='#'>
                Categories2
              </a>
            </li>
            <li>
              <a href='#'>
                Categories3
              </a>
            </li>
          </ul>

        </li>


      </ul>
    </li>
  </ul>
  <form action='/search' id='search' method='get'>
    <input name='q' placeholder='Search Somethings..' size='40' type='text' />
  </form>
</div>

CSS

ul.dark_menu {
  list-style: none;
  padding: 5px 1px;
  font-family: 'Segoe UI Light', 'Open Sans', Verdana, Arial, Helvetica, sans-serif;
  font-weight: 200;
  font-size: 16px;
  letter-spacing: 0.01em;
  font-smooth: always;
  color: #000000;
  line-height: 15px;
  margin: auto;
  width: 1018px;
  position: relative;
  background: #2B5797;
}

/* Blog johanes djogzs.blogspot.com */
ul.dark_menu:after {
  content: "";
  clear: both;
  display: block;
  overflow: hidden;
  visibility: hidden;
  width: 0;
  height: 0;
}

ul.dark_menu li {
  float: left;
  position: relative;
  margin: 1px;
}

/* Blog johanes djogzs.blogspot.com */
ul.dark_menu li a,
ul.dark_menu li a:link {
  color: #fafafa;
  text-decoration: none;
  display: block;
  padding: 8px 26px;
  -webkit-transition: all 0.2s ease;
  -moz-transition: all 0.2s ease;
  -o-transition: all 0.2s ease;
  -ms-transition: all 0.2s ease;
  transition: all 0.2s ease;
}

/* Blog johanes djogzs.blogspot.com */
ul.dark_menu li a:hover {
  color: #fafafa;
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
}

/* Blog johanes djogzs.blogspot.com */
ul.dark_menu li a.selected {
  border-right: 1px solid #ddd;
  text-transform: uppercase;
  margin-left: 10px;
}

ul.dark_menu li a.selected,
ul.dark_menu li a:active {
  color: #fafafa;
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
}

ul.dark_menu li ul {
  display: none;
}

/* Blog johanes djogzs.blogspot.com */
ul.dark_menu li ul:before {
  content: " ";
  position: absolute;
  display: block;
  z-index: 1500;
  left: 0;
  top: -10px;
  height: 10px;
  width: 100%;
}

ul.dark_menu li ul {
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
  top: 55px;
}

ul.dark_menu li:hover ul {
  position: absolute;
  display: block;
  z-index:...