JSFiddle - React, Tailwind, and code Playground

by tripcollor

HTML

<a href="#" class="link">LOG IN</a>
<a href="#" class="link">PRICING</a>
<a href="#" class="link">RESEARCH</a>
<a href="#" class="link">
  PLATFORM
  <div class="modal">
    
  </div>
</a>

CSS

.link{
  text-decoration: none;
  color: #000;
  display: inline-block;
  position: relative;
  padding: 20px;
}
.link:hover > .modal{
  opacity: 1;
  pointer-events: painted;
}
.modal{
  position: absolute;
  opacity: 0;
  width: 350px;
  height: 250px;
  background: #fff;
  box-shadow: 5px 0 10px 0 rgba(62,62,62,.2);
  left: 50%;
  transform: translateX(-50%);
  margin-top: 10px;
  transition: all 200ms;
  pointer-events: none;
}
.modal:before{
  content: "";
  display: block;
  position: absolute;
  width: 0;
  height: 0;
  border: 8px solid transparent;
  border-bottom: 10px solid #fff;
  top: 0;
  left: 50%;
  transform: translateX(-50%) translateY(-100%);
}