JSFiddle - React, Tailwind, and code Playground

by SEOKWOO LEE

HTML

<body>
  <nav class="nav-main">
  <div class="logo">WebSite</div>
    <ul>
      <li>
        <a href="#" class="nav-item">Amazing</a>
        <div class="nav-content">
          <div class="nav-sub">
            <ul>
              <li><a href="#">sub 1</a></li>
                <li><a href="#">sub 2</a></li>
                 <li><a href="#">sub 3</a></li>
            </ul>
          </div>
        </div>
      </li>
      <li>
        <a href="#" class="nav-item">CSS</a>
        <div class="nav-content">
          <div class="nav-sub">
              some text
          </div>
        </div>
      </li>
      <li>
        <a href="http://www.naver.com" class="nav-item">Codecourse</a>
      </li>
    </ul>  
  </nav>
  <div class ="centents">
  
  </div>
</body>

CSS

body,html{
  margin:0;
  font:1em "Open Sans", sans-serif;
}

.content{
  padding : 30px;
}

.nav-main{
  width:100%;
  background-color : #222;
  height : 70px;
  color : #fff;
}

.nav-main .logo{
  float:left;
  height:40px;
  padding:15px 30px;
  font-size:1.4em;
  line-height : 40px; 
}

.nav-main > ul{
  margin : 0;
  padding : 0;
  float:left;
  list-style-type:none;
}
.nav-main > ul > li {
  float : left;
}

.nav-item{ 
  display :inline-block;
  padding :15px 20px;
  height:40px;
  line-height:40px;
  color:#fff;
  text-decoration:none;
}

.nav-item:hover{
  background-color:#444;
}

.nav-content{
  position = absolute;
  top:70px;
  overflow:hidden;
  background-color:#222;
  max-height:0;
}

.nav-content a{
  color:#fff;
  text-decoration:none;
}


.nav-content a:hover{
  text-decoration:underline;
}

.nav-sub{
  padding:20px;
}

.nav-sub ul{
  padding:0;
  margin:0;
  list-style-type:none;
}

.nav-sub ul li a{
  display:inline-block;
  padding:5px 0;
}

.nav-item:focus{
  background-color:#444;
}

.nav-item:focus ~.nav-content{
  max-height:400px;
  -webkit-transition:max-height 0.4s ease-in;
  -moz-transition:max-height 0.4s ease-in;
  transition:max-height 0.4s ease-in;
}