JSFiddle - React, Tailwind, and code Playground

HTML

<div id="css3Dropdown">
<div class="wrapper">
	<div class="content">
		<ul>
			<a href="#"><li>Lorem ipsum dolor</li></a>
			<a href="#"><li>Consectetur adipisicing</li></a>
			<a href="#"><li>Reprehenderit</li></a>
			<a href="#"><li>Commodo consequat</li></a>
		</ul>
	</div>
	<div class="parent">Drop Down Test</div>
</div>

CSS

#css3Dropdown {
		margin: 30px;
		font-family: sans-serif;
	}
	
	#css3Dropdown .wrapper {
		display: inline-block;
		width: 180px;
		margin: 0 10px 0 0;
		height: 20px;
		position: relative;
	}
	
	#css3Dropdown .parent {
		height: 100%;
		width: 100%;
		display: block;
		cursor: pointer;
		line-height: 30px;
		height: 30px;
		border-radius: 5px;
		background: #F9F9F9;
		border: 1px solid #AAA;
		border-bottom: 1px solid #777;
		color: #282D31;
		font-weight: bold;
		z-index: 2;
		position: relative;
		-webkit-transition: border-radius .1s linear, background .1s linear, z-index 0s linear;
		-webkit-transition-delay: .8s;
		text-align: center;
	}
	
	#css3Dropdown .parent:hover,
	#css3Dropdown .content:hover ~ .parent {
		background: #fff;
		-webkit-transition-delay: 0s, 0s, 0s;
	}
	
	#css3Dropdown .content:hover ~ .parent {
		border-bottom-left-radius: 0;
		border-bottom-right-radius: 0;
		z-index: 0;
	}
	
	#css3Dropdown .content {
		position: absolute;
		top: 0;
		display: block;
		z-index: 1;
		height: 0;
		width: 180px;
		padding-top: 30px;
		-webkit-transition: height .5s ease;
		-webkit-transition-delay: .4s;
		border: 1px solid #777;
		border-radius: 5px;
		box-shadow: 0 1px 2px rgba(0,0,0,.4);
	}
	
	#css3Dropdown .wrapper:active .content {
		height: 123px;
		z-index: 3;
		-webkit-transition-delay: 0s;
	}
	
	#css3Dropdown .content:hover {
		height: 123px;
		z-index: 3;
		-webkit-transition-delay: 0s;
	}
	
	
	#css3Dropdown .content ul {
		background: #fff;
		margin: 0;
		padding: 0;
		overflow: hidden;
		height: 100%;
		border-bottom-left-radius: 5px;
		border-bottom-right-radius: 5px;
	}
	
	#css3Dropdown .content ul a {
		text-decoration: none;
	}
	
	#css3Dropdown .content li:hover {
		background: #eee;
		color: #333;
	}
	
	#css3Dropdown .content li {
		list-style: none;
		text-align: left;
		color: #888;
		font-size: 14px;
		line-height: 30px;
		height: 30px;
		padding-left: 10px;
		border-top: 1px solid #ccc;
	}
	
	#css3Dropdown .content li:last-of-type...