JSFiddle - React, Tailwind, and code Playground

by EverybdyLies

HTML

<div id="parent">
    <div id="LoginButton" class="dontclick"> <a href="#"><img src="https://lh3.googleusercontent.com/-k7ox2oo86gY/AAAAAAAAAAI/AAAAAAAAAAA/bvtqwBX_MYs/s27-c/photo.jpg" /></a>
 <span class="username" style="display:none">John Doe The Second</span>

    </div>
    <ul id="profilesettings" class="dontclick">
        <li><a href="#">Settings</a>
        </li>
        <li><a href="?logout=1">Log Out</a>
        </li>
    </ul>
</div>

CSS

#parent {
    width:500px;
}
#profilesettings {
    display:none;
    float:right;
    background:#931713;
    clear: both;
    margin-top:-3px;
    padding-bottom:5px;
    z-index:11;
    -webkit-border-bottom-right-radius: 3px;
    -webkit-border-bottom-left-radius: 3px;
    -moz-border-radius-bottomright: 3px;
    -moz-border-radius-bottomleft: 3px;
    border-bottom-right-radius: 3px;
    border-bottom-left-radius: 3px;
}
#profilesettings li {
    list-style:none;
}
#profilesettings li a {
    line-height:28px;
    padding:5px 5px 10px 5px !important;
    color:#fff;
    text-shadow: 1px 1px 1px #360360;
    filter: dropshadow(color=#360360, offx=1, offy=1);
    text-decoration:none;
}
#profilesettings li:hover {
    background:#C4302A;
    cursor:pointer;
}
#LoginButton {
    float:right;
    display:inline-block;
    min-width:20px;
    height:20px;
    overflow:hidden;
    margin-top:3px;
    padding:5px;
    background:#931713;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    text-shadow: 1px 1px 1px #360360;
    filter: dropshadow(color=#360360, offx=1, offy=1);
}
#LoginButton:hover {
    cursor:pointer;
    background:#A5221D;
}
#LoginButton img {
    float:left;
    width:20px;
    height:20px;
}
#LoginButton:after {
    content:"";
    display: table;
    clear: both;
}
.expanded {
    -webkit-border-bottom-right-radius: 0 !important;
    -webkit-border-bottom-left-radius: 0 !important;
    -moz-border-radius-bottomright: 0 !important;
    -moz-border-radius-bottomleft: 0 !important;
    border-bottom-right-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
}
.username {
    float:left;
    margin:1px 5px 0 5px;
    height: 20px;
    display:none;
}

JavaScript

$('#LoginButton').click(function () {
    var $username = $('.username'),
        $profile = $('#profilesettings'),
        state = true;

    if ($username.is(':visible')) {
        $profile.hide(400);
		$('#LoginButton').toggleClass('expanded');
        state = false;
    }
    $username.animate({
        width: 'toggle'
    }, 300, 'swing', function () {
        if (state) {
            var newWidth = $(this).width();
            $('#LoginButton').toggleClass('expanded');
            $profile.width(newWidth).show(300);
        }
    });
});

$('html').click(function() {
    var $username = $('.username'),
        $profile = $('#profilesettings'),
        state = true;

    if ($username.is(':visible')) {
        $profile.hide(400);
        $username.animate({
        width: 'toggle'
    }, 300, 'swing');
		$('#LoginButton').toggleClass('expanded');
        state = false;
    }
  
 });

 $('.dontclick').click(function(event){
     event.stopPropagation();
 });