JSFiddle - React, Tailwind, and code Playground

by envira

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="http://i.imgur.com/kLz97bG.png?1"></script>
   <div class="container">
		
		

			
				<div class="wrapper-demo">
                    
					<div id="dd" class="wrapper-dropdown-5" tabindex="1">
                        <div id="image">    </div>
						<ul class="dropdown">
							<li><a href="#"><i class="icon-user"></i>Profile</a></li>
							<li><a href="#"><i class="iconcog"></i>Settings</a></li>
							<li><a href="#"><i class="icon-remove"></i>Logout</a></li>
						</ul>
					</div>
				</div>
			
			
		</div>

CSS

@import url('font-awesome.css');

/* GLOBALS */

*,
*:after,
*:before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}



.wrapper-demo {
    margin: 60px 0 0 0;
    *zoom: 1;
    font-weight: 400;
}



/* DEMO 5 */

.wrapper-dropdown-5 {
    /* Size & position */
    position: relative;
    width: 100px;
    margin: 0 auto;
    padding: 12px 15px;
    height: 50px;
    /* Styles */
    background: #2F3B31;
    border-radius: 0px;
    box-shadow: 0 1px 0 rgba(0,0,0,0.2);
    cursor: pointer;
    outline: none;
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -ms-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}
#image
{ 
    width:45px;
    height:46px;
    border:solid #666;
    border-radius:5px;
    -moz-border-radius: 5px;
    background-image: url("http://i.imgur.com/kLz97bG.png?1");
    -webkit-border-radius:5px;
    margin-top:-10px;
    margin-left:-8px;
}

.wrapper-dropdown-5:after { /* Little arrow */
    content: "";
    width: 0;
    height: 0;
    position: absolute;
    top: 50%;
    right: 15px;
    margin-top: -3px;
    border-width: 6px 6px 0 6px;
    border-style: solid;
    border-color: #9F9F9F transparent;
  
    
}

.wrapper-dropdown-5 .dropdown {
    /* Size & position */
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;

    /* Styles */
    background: #9F9F9F;
    border-radius: 0px;
    border: 1px solid rgba(0,0,0,0.2);
    border-top: none;
    border-bottom: none;
    list-style: none;
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -ms-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;

    /* Hiding */
    max-height: 0;
    overflow: hidden;
}
.dropdown
{ 
    width:200px;
}

.wrapper-dropdown-5 .dropdown li {
    padding: 0 10px ;
   ...

JavaScript

function DropDown(el) {
				this.dd = el;
				this.initEvents();
			}
			DropDown.prototype = {
				initEvents : function() {
					var obj = this;

					obj.dd.on('click', function(event){
						$(this).toggleClass('active');
						event.stopPropagation();
					});	
				}
			}

			$(function() {

				var dd = new DropDown( $('#dd') );

				$(document).click(function() {
					// all dropdowns
					$('.wrapper-dropdown-5').removeClass('active');
				});

			});