JSFiddle - React, Tailwind, and code Playground

by EverybdyLies

HTML

<div id="parent">
<div id="LoginButton">
    <a href="#"><img src="https://lh3.googleusercontent.com/-k7ox2oo86gY/AAAAAAAAAAI/AAAAAAAAAAA/bvtqwBX_MYs/s27-c/photo.jpg" /></a>
    <div class="username" style="display:none">John Doe</div>
    </div>
    <ul id="profile">
        <li><a href="#">Settings</a></li>
    	<li><a href="?logout=1">Log Out</a></li>
    </ul>
</div>

CSS

#parent{
    width:500px;
}
ul#profile{
	display:none;
}
#LoginButton{
    display:inline-block;
	min-width:20px;
	height:20px;
	overflow:hidden;
	font-family: 'Source Sans Pro',sans-serif;
	margin-top:3px;
	padding:5px;
	background:#a02722;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
}
#LoginButton img{
	float:left;
	width:20px; 
	height:20px;
}
.username{
    float:left;
	margin:1px 5px 0 5px;
	/*line-height:24px;*/
    height: 20px;
}

JavaScript

$('#LoginButton').click(function(){
    $('.username').stop(true,false).animate({width:'toggle'});
		$("#profile").delay(100).toggle(300);
});