JSFiddle - React, Tailwind, and code Playground

by Brett

HTML

<div class="dropdown_closed">
	<a href="#">Admission & Financial Aid  Home
		<div class="arrow_down">
			<svg class="menu-icon" width="30" height="30">
				<path d="M0,2 30,2" class="line" />
				<path d="M0,10 30,10" class="line" />
				<path d="M0,18 30,18" class="line last" />
				<path d="M0,16 L15,24 L30,16  Z" class="arrow" />
			</svg>
		</div>
	</a>
</div>

SCSS

body {
	background: #fff;
}
.dropdown_closed {
	position: relative;
	height: 48px;
	width: 514px;
	margin: 8px auto;
	background: #ddd;
	border: 4px solid #ddd;
	border-radius: 3px;
	
	&:hover {
		background: #dedede;
			
		a {
			color: #444;
		}
	}
	a {
		display: block;
		width: 420px;
		padding: 0 0 0 20px;
		color: #000;
		font-family: Helvetica;
		//@include DIN-Next-Light;
		font-size: 1.3rem;
		line-height: 48px;
		text-transform: uppercase;
		text-decoration: none;
	}
	.arrow_down {
		position: absolute;
		top: 0;
		right: 0;
		width: 60px;
		height: 48px;
		background: #111;
		color: transparent;
		//border-left: 2px solid #fff;
		border-radius: 0 3px 3px 0;
		overflow: hidden;

		.menu-icon {
			position: absolute;
			top: 14px;
			left: calc(50% - 15px);
			-webkit-transition: top .2s ease;
			   -moz-transition: top .2s ease;
			    -ms-transition: top .2s ease;
				 -o-transition: top .2s ease;
					transition: top .2s ease;

			> path {
				-webkit-transition: opacity .4s ease;
				   -moz-transition: opacity .4s ease;
				    -ms-transition: opacity .4s ease;
					 -o-transition: opacity .4s ease;
						transition: opacity .4s ease;

				&.line {
					stroke: rgba(255, 255, 255, .7);
					stroke-width: 4px;
					
					&.last {
						opacity: 1;
					}
				}
				&.arrow {
					fill: rgba(255, 255, 255, .7);
					visibility: hidden;
					opacity: 0;
				}
			}
		}
		img {
			margin: 18px 0 0 20px;
		}
	}
	&:hover {
		
		.arrow_down {
			background: #222;
			
			.menu-icon {
				top: 11px;
				-webkit-transition: top .4s ease;
				   -moz-transition: top .4s ease;
				    -ms-transition: top .4s ease;
					 -o-transition: top .4s ease;
						transition: top .4s ease;
				
				> path {
					-webkit-transition: opacity .4s ease;
				       -moz-transition: opacity .4s ease;
				        -ms-transition: opacity .4s ease;
					     -o-transition: opacity .4s ease;
							transition: opacity .4s ease;
						
					&.line {
						stroke:...