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>
    <span class="username">John Doe</span>
    </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{
	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;
}
#LoginButton span{
	margin-right:10px;
	line-height:24px;
}

JavaScript

$('#LoginButton').click(function(){
		$(this).css('width', 'auto'),
		$("#profile").delay(100).toggle(300);
});