JSFiddle - React, Tailwind, and code Playground

by Haze32

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.min.css">


  <nav style="margin-left: -15px;">
<ul class="top">
<li class="dropdown"><a href="#">Bankruptcy News</a>
<ul class="dropdown-menu">
<li class="link"><a href="#">ABI’s Digital Bankruptcy Library</a></li>
<li class="link"><a href="#">Bankruptcy Law 360</a></li>
<li class="link"><a href="#">Global Restructuring Review</a></li>
<li class="link"><a href="#">Lexology</a></li>
<li class="link"><a href="#">Wall Street Journal</a></li>
</ul>
</li>
<li class="dropdown"><a href="#">Learning Resources</a>
<ul class="dropdown-menu">
<li class="link"><a href="#">Hotshot Legal</a></li>
</ul>
</li>
<li class="dropdown"><a href="#">Practice Resources</a>
<ul class="dropdown-menu">
<li class="dropdown"><a href="#">Bloomberg</a>
<ul class="dropdown-menu">
<li class="link"><a href="#">Bloomberg Terminal</a></li>
<li class="link"><a href="#">Bloomberg Law</a></li>
</ul>
</li>
<li class="link"><a href="#">CapIQ</a></li>
<li class="link"><a href="#">Chapter 11 Dockets</a></li>
<li class="link"><a href="#">CreditSights (Covenant Review)</a></li>
<li class="link"><a href="#">Davis Polk Library</a></li>
<li class="link"><a href="#">Debtwire</a></li>
<li class="link"><a href="#">LexisNexis</a></li>
<li class="link"><a href="#">Octus</a></li>
<li class="link"><a href="#">PACER (Public Access to Court Electronic Records)</a></li>
<li class="link"><a href="#">StructureFlow</a></li>
<li class="dropdown"><a href="#">Westlaw</a>
<ul class="dropdown-menu">
<li class="link"><a href="#">Practical Law</a></li>
<li class="link"><a href="#">Westlaw Precision</a></li>
</ul>
</li>
</ul>
</li>
<li class="link"><a href="#">Vacation Calendar</a></li>
</ul>
</nav>

CSS

nav {
  box-sizing: border-box;
}

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

nav ul li {
  position: relative;
}

nav ul li a {
  display: inline-block;
  margin: 15px;
  color: #140be3;
  text-decoration: none;
  position: relative;
}
li.dropdown a,
li.link a {
  background-image: linear-gradient(transparent, transparent),
    linear-gradient(#222b45, #222b45);
  background-size:
    100% 0.0625rem,
    0 0.0625rem;
  background-position:
    100% 100%,
    0 100%;
  background-repeat: no-repeat;
  transition: background-size 0.5s ease;
}
li.dropdown:hover > a,
li.link:hover > a {
  background-image: linear-gradient(transparent, transparent),
    linear-gradient(#140be3, #140be3);
  background-size:
    0 0.0625rem,
    100% 0.0625rem;
}

nav ul li.dropdown {
  padding-right: 0px;
}

nav .dropdown:after {
    content: "";
    display: inline-block;
    width: 15px;
    height: 15px;
    background-image: url("");
    background-size: contain;  /* Ensures it fits inside the container */
    background-repeat: no-repeat; /* Prevent repeat */
  position: absolute;
  background:red;
  mask:url("https://www.svgrepo.com/show/3583/test-tube.svg");
  right: 0px;
  top: 50%;
  transform: translateY(-50%);
  transition: transform 0.2s ease;
  transform-origin: center;
  color: #140be3;
  font-weight: bold;
}

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

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

nav .dropdown > .dropdown-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 200px;
  z-index: 1;
  background: #fff;
  box-shadow: 0 0.25rem 1.5rem 0 hsla(250, 8%, 85%, 0.8);
  border: 1px solid #eff0f5;
  border-radius: 6px;
}

nav .top > .dropdown > .dropdown-menu:before,
nav .top > .dropdown > .dropdown-menu:after {
  top: -20px;
  border-color: transparent transparent #fff...