JSFiddle - React, Tailwind, and code Playground

by Alex Alex

HTML

<div class = 'tags'>
  <div class='details'>
    <a href='a.html'> jQuery </a>
    <a href='b.html'> PHP </a>
    <a href='c.html'> MySQL </a>
    <a href='d.html'> Ruby on Rails </a>
  </div>
</div>

CSS

.tags {
    background: blue;
    height: 20px;
}

.details {
    background-color: rgb(235,243,243);
    border-radius: 7px;
    padding: 3px;
    width: 240px;
    float: left;
    position: relative;
    margin-top: 5px;
    font-weight: 400;
}

JavaScript

$('.details').hide();
$(document).on('mouseover', ".tags", function () {
    var $this = $(this);
    $this.find('.details').slideDown(100);
});
$(document).on('mouseleave', ".tags", function () {
    var $this = $(this);
    $this.find('.details').hide();
});