JSFiddle - React, Tailwind, and code Playground

by srinivaspotluri

HTML

<script src="&lt;link rel=&quot;stylesheet&quot; href=&quot;//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css&quot;&gt;"></script>
<script src="&lt;link href=&#39;https://fonts.googleapis.com/css?family=Open+Sans&#39; rel=&#39;stylesheet&#39; type=&#39;text/css&#39;&gt;"></script>
<nav>
  <ul class="top-nav">    
    <li class="dropdown">
      <a class="dropdown-toggle"><i class="fa fa-2x fa-cogs"></i>profile</a>
        <ul class="dropdown-menu" role="menu">
          <li class='menu-option'>
          <span>span</span>
          <p><a>Profile</a></p>
           
          </li>
          <li><a><i class="fa fa-cog"></i> Settings</a></li>
          <li><a><i class="fa fa-sign-out"></i> Logout</a></li>
        </ul>
    </li>
  </ul>
</nav>
<div class="content">content here</div>

CSS

body{
  margin:0;
  padding:0;
}
*{
  box-sizing:border-box;
}
nav{
  float:right;
  padding:10px;
}

nav a{
  padding: 10px 20px;
  display:block;
}

.dropdown-menu a{
  font-family:'open sans', arial;
  font-weight:600;
  font-size:14px;
}
ul{
  list-style-type:none;
  padding:0;
  margin:0;
  display:block;
  -webkit-margin-before: 0;
  -webkit-margin-after: 0;
  -webkit-margin-start: 0;
  -webkit-margin-end: 0;
  -webkit-padding-start: 0;
  position:relative;
}
.top-nav{
  float:right;
}
.top-nav .dropdown{
  background-color:#fff;
  display:block;
  cursor:pointer;
  float:left;
  color:#0366af;
}
.top-nav > .dropdown:hover{
  border-color:#ccc;
  color:#333;
}
.dropdown-menu{
  position:absolute;
  right:0;
  top:100%;
  -webkit-transform:translateX(-30px);
  //display:none;
  opacity:0;
  visibility:hidden;
  float:left;
  min-width:150px;
  //z-index:-1;
  transition:0.2s all;
  background-color:#fff;
  width:400px;
  color:#333;
  border-bottom-left-radius:5px;
  border-bottom-right-radius:5px;
  border-top-left-radius:5px;
  transition:0.5s all;
  border:1px solid #ccc;
  text-align:right;
}
.dropdown:hover > .dropdown-menu{
  transition:0.5s all;
  //display:block;
  top:100%;
  -webkit-transform:translateX(0);
  opacity:1;
  visibility:visible;
}

.dropdown{
  border-top:1px solid;
  border-left:1px solid;
  border-right:1px solid;
  border-top-left-radius:5px;
  border-top-right-radius:5px;
  border-color:transparent;
}
.dropdown:hover{
  border-color: #ccc;
}

.dropdown:hover > .dropdown-toggle{
  color:#333;
}
.content{
  background:#f3f3f3;
  height:500px;
  clear:both;
  padding:50px;
}

.menu-option {
  background: #000;
  width: 400px;
  height: 60px;
  box-shadow: 1em 0px #2c3e50, inset 0 1px 0 rgba(0, 0, 0, 0.05);
  cursor: pointer;
  display: block;
  transition: box-shadow 0.4s ease, padding 0.25974s ease;
  color: #fff;
}

.menu-option span {
  display: block;
  width: 80px;
  height: 60px;
  background: #000;
  
  font-size: 2.5em;
 ...