JSFiddle - React, Tailwind, and code Playground

by hellosze

HTML

<nav id="header-profile-dropdown">
     <div class="header-profile-label oslo-light">
     <a href="http://www.theknot.com/profiles/">
     <img src="http://wwwmedia.theknot.com/profiles/avatar.aspx?username="/>Susan</a></div>


<ul class="user-data-dropdown oslo-black">
    <li><a href="http://global.theknot.com/join/memberprofile.aspx">My Account</a></li>
<li><a href="http://global.theknot.com/join/Sites/theknot/logout.aspx">Log Out</a></li>
</ul>
</nav>

CSS

#header-profile-dropdown
{
    cursor: pointer;
    display: inline-block;
    position: relative
}

#header-profile-dropdown:hover
{
    box-shadow: 005px #c2c2c2;
    -webkit-box-shadow: 005px #c2c2c2;
    margin: 0;
    border-radius: 4px4px00;
    -moz-border-radius: 4px4px00;
    -webkit-border-radius: 4px4px00;
    z-index: 999999
}

#header-profile-dropdown a:hover
{
    color: #4e8abe
}

.header-profile-label
{
    background: #fff;
    box-sizing: content-box!important;
    -moz-box-sizing: content-box!important;
    -webkit-box-sizing: content-box!important;
    color: #3a3a3a;
    display: block;
    font-size: 14px;
    height: 28px;
    line-height: 28px;
    margin: 1px1px01px;
    padding: 10px000;
    position: relative;
    text-align: left;
    z-index: 700;
    white-space: nowrap;
    word-break: normal;
    word-wrap: normal
}

.header-profile-label:after
{
    border-left: 4pxsolidtransparent;
    border-right: 4pxsolidtransparent;
    border-top: 5pxsolid #2f4447;
    content: "";
    display: inline-block;
    height: 0;
    margin: 010px06px;
    vertical-align: middle;
    width: 0
}

.header-profile-label a
{
    color: #3a3a3a;
    display: inline-block;
    margin-left: 10px;
    border: 0
}

.header-profile-label img:first-child
{
    float: left;
    height: 28px;
    margin: 06px00;
    vertical-align: bottom;
    width: 28px
}

#header-profile-dropdown:hover .header-profile-label
{
    border: 1pxsolid #d4d4d4;
    border-bottom: none;
    border-radius: 4px4px00;
    -moz-border-radius: 4px4px00;
    -webkit-border-radius: 4px4px00;
    margin: 0
}

.user-data-dropdown
{
    background: #fff;
    box-shadow: 005px #c2c2c2;
    -webkit-box-shadow: 005px #c2c2c2;
    border-top: none;
    box-sizing: content-box!important;
    -moz-box-sizing: content-box!important;
    -webkit-box-sizing: content-box!important;
    display: none;
    list-style: none;
    margin: 1px1px01px;
    padding: 0;
    position: absolute;
    text-align:...