JSFiddle - React, Tailwind, and code Playground

by Haze32

HTML

<nav class="dpSimpleNav">
<ul class="top">
<li class="dpsnLink "><a rel="noopener" href="/intranet/SS/infosys/knowledge-management" target="_self">KM Home</a></li>
<li class="dpsnLink"><a rel="noopener" href="/intranet/SS/infosys/knowledge-management/our-goal.html" target="_self">Our Goal</a></li>
<li class="dpsnLink"><a rel="noopener" href="/intranet/SS/infosys/knowledge-management/innovation.html" target="_self">Innovation</a></li>
<li class="dpsnLink"><a rel="noopener" href="/intranet/SS/infosys/knowledge-management/innovation.html" target="_self">KM Intranet</a></li>
<li class="dpsnLink"><a rel="noopener" href="/intranet/SS/infosys/knowledge-management/innovation.html" target="_self">Insight Search</a></li>
<li class="dpsnDropdown"><a href="#">Products</a>
<ul class="dpsnDropdown-menu">
<li class="dpsnLink"><a rel="noopener" href="/intranet/SS/infosys/knowledge-management/briefcatch-support/briefcatch-support.html" target="_self">BriefCatch</a></li>
<li class="dpsnLink"><a rel="noopener" href="/intranet/SS/infosys/knowledge-management/kira-support" target="_self">Kira</a></li>
<li class="dpsnLink"><a rel="noopener" href="/intranet/SS/infosys/knowledge-management/StructureFlow-Support/structureflow-support.html" target="_self">StructureFlow</a></li>
</ul>
</li>
</ul>
</nav>

CSS

nav.dpSimpleNav {
		box-sizing: border-box;
    margin: 0 20px 20px 20px;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
    border: 1px solid lightgray;
    border-radius: 6px;
	}

	nav.dpSimpleNav ul {
		list-style: none;
		margin: 0;
		padding: 0;
		display: flex;
	}

	nav.dpSimpleNav ul li {
		position: relative;
	}


	nav.dpSimpleNav li.dpsnDropdown a,
	nav.dpSimpleNav li.dpsnLink a {
	  display: inline-block;
		margin: 15px 10px;
		color: blue;
		text-decoration: none;
		border-radius: 6px;
    position: relative;
    background-color: #fff ;
    padding: 5px 10px;
	}
	nav.dpSimpleNav li.dpsnDropdown a:before,
	nav.dpSimpleNav li.dpsnLink a:before {
    position: absolute;
    content: "";
    width: 100%;
    height: 50%;
    background: blue;
    bottom: 2px;
    left: 0;
    z-index: -1;
    border-radius: 6px;
    transition: all 0.3s ease-in-out;
}
nav.dpSimpleNav li.dpsnDropdown:hover > a:before,
	nav.dpSimpleNav li.dpsnLink:hover a:before,
  nav.dpSimpleNav li.dpsnDropdown.active > a:before,
	nav.dpSimpleNav li.dpsnLink.active a:before {
    bottom: -3px;
}

	nav.dpSimpleNav .dpsnDropdown:after {
		position: absolute;
		right: 0px;
		top: 50%;
		transform: translateY(-50%);
		transition: transform 0.2s ease;
		transform-origin: center;
		content: "";
		width: 15px;
		height: 15px;
		background: #140be3;
		mask: url(/intranet/SS/infosys/knowledge-management/assets/imgs/arrow_down.svg);
	}

	nav.dpSimpleNav .dpsnDropdown:hover:after {
		transform: translateY(-50%) rotate(180deg);
	}

	nav.dpSimpleNav .dpsnDropdown-menu > .dpsnDropdown:after {
		right: 12px;
	}
	nav.dpSimpleNav .dpsnDropdown-menu > .dpsnDropdown:hover:after {
		transform: translateY(-50%) rotate(-90deg);
	}

	nav.dpSimpleNav .dpsnDropdown > .dpsnDropdown-menu {
		display: none;
		position: absolute;
		top: 100%;
		left: 0;
		min-width: 224px;
		z-index: 1;
		background: #fff;
		box-shadow: 0 0.25rem...