JSFiddle - React, Tailwind, and code Playground

HTML

<div class="dropdown">
	<a class="dropdown-item" href="#">Ссылка</a>
	<div class="dropdown-menu">
		<a class="dropdown-menu-item" href="#">Ссылка 1</a>
		<a class="dropdown-menu-item" href="#">Ссылка 2</a>
		<a class="dropdown-menu-item" href="#">Ссылка 3</a>
		<a class="dropdown-menu-item" href="#">Ссылка 4</a>
	</div>
</div>

CSS

.dropdown 
{
	display: inline-block;
	position: relative;
}

.dropdown-item 
{
	display: inline-block;
	position: relative;color:#000;
	padding: 10px 5px 0 0;
	text-decoration: none;
	margin-bottom: 10px;
}


.dropdown-menu 
{
	opacity: 0;
	position: absolute;
	visibility: hidden;
	background-color: #212121;
	margin-top: 30px;
	width: 230px;
	border-right: 5px solid #81d742;
	text-align: right;
	transition: margin-top 0.25s, opacity 0.25s;
}

.dropdown:hover .dropdown-menu 
{
	opacity: 1;
	visibility: visible;
	margin-top: 0;
}

.dropdown-menu-item 
{
	display: block;
	position: relative;
	z-index: 1;
	color: #fff;
	padding: 10px;
	text-decoration: none;
}