JSFiddle - React, Tailwind, and code Playground

HTML

<div class="share">
  <div class="share__btn">
    <img class="share__img" src="https://image.flaticon.com/icons/svg/149/149179.svg" alt="">
    <span class="share__text">Share</span>
  </div>
  <div class="share__case">
    <ul class="share__list">
      <li class="share__item">
        <a href="#" class="share__link">
          <img src="https://image.flaticon.com/icons/svg/124/124029.svg" alt="" class="share__icon">
        </a>
      </li>
      <li class="share__item">
        <a href="#" class="share__link">
          <img src="https://image.flaticon.com/icons/svg/124/124032.svg" alt="" class="share__icon">
        </a>
      </li>
      <li class="share__item">
        <a href="#" class="share__link">
          <img src="https://image.flaticon.com/icons/svg/174/174848.svg" alt="" class="share__icon">
        </a>
      </li>
      <li class="share__item">
        <a href="#" class="share__link">
          <img src="https://image.flaticon.com/icons/svg/124/124015.svg" alt="" class="share__icon">
        </a>
      </li>
    </ul>
  </div>
</div>

CSS

body {
  background: #d2d2d2;
}
* {
  margin: 0;
  padding: 0;
}
.share {
  margin-top: 180px;
  margin-left: 150px;
  position: relative;
  float: left;
}
.share__btn {
  background: #ffffff;
  display: flex;
  padding: 10px 15px;
  border-radius: 5px;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.share__img {
  width: 20px;
  height: 20px;
  margin-right: 10px;
}
.share__text {
  font-family: Arial;
  font-size: 14px;
  line-height: 20px;
  color: #434343;
}
.share__case {
  background: #212121;
  position: absolute;
  top: -60px;
  padding: 10px 6px;
  border-radius: 5px;
  left: 50%;
  transform: translateX(-50%);
  display: none;
}
.share__case:after {
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 10px 10px 0 10px;
  border-color: #212121 transparent transparent transparent;
  left: 50%;
  transform: translateX(-50%);
  bottom: -10px;
}
.share__list {
  list-style: none;
  display: flex;
}
.share__item {
  list-style: none;
}
.share__link {
  display: block;
  margin: 0 4px;
  position: relative;
  transition: all .5s ease;
}
.share__link:after {
  content: '';
  position: absolute;
  background: #ffffff;
  width: 22px;
  height: 30px;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  z-index: 4;
}
.share__link:hover {
  opacity: .5;
}
.share__icon {
  width: 30px;
  height: 30px;
  display: block;
  border-radius: 5px;
  z-index: 5;
  position: relative;
}

JavaScript

$('.share').click(function(e){
	$('.share__case').fadeToggle(100);
});