JSFiddle - React, Tailwind, and code Playground

by dievardump

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.6/prefixfree.min.js"></script>
<h1>Hover it</h1>

        <div class="container">
            <div class="cell">
                <div class="share-wrapper below">
                  <div class="rc50 share-action icon-share"></div>
                  <div class="share-container rc50">
                    <a class="share-btn tl icon-google-plus" href='#'></a>    
                    <a class="share-btn tr icon-twitter" href='#'></a>    
                    <a class="share-btn bl icon-pinterest" href='#'></a>    
                    <a class="share-btn br icon-facebook" href='#'></a>    
                  </div>
                </div>
            </div>

            <div class="cell">
                <div class="share-wrapper below">
                  <div class="rc10 share-action icon-share"></div>
                  <div class="share-container rc10 ">
                    <a class="share-btn tl icon-google-plus" href='#'></a>    
                    <a class="share-btn tr icon-twitter" href='#'></a>    
                    <a class="share-btn bl icon-pinterest" href='#'></a>    
                    <a class="share-btn br icon-facebook" href='#'></a>    
                  </div>
                </div>
            </div>
            <div class="cell ">
                <div class="share-wrapper under">
                  <div class="rc10 share-action icon-share"></div>
                  <div class="share-container rc10">
                    <a class="share-btn tl icon-google-plus" href='#'></a>    
                    <a class="share-btn tr icon-twitter" href='#'></a>    
                    <a class="share-btn bl icon-pinterest" href='#'></a>    
                    <a class="share-btn br icon-facebook" href='#'></a>    
                  </div>
                </div>
            </div>
            <div class="cell ">
                <div class="share-wrapper under">
                  <div class="share-action...

CSS

a {
  text-decoration: none;
}

.share-wrapper, 
.share-action {
  width: 32px;
  height: 32px;
}

.share-wrapper {
  font: 14px, 'FontAwesome';
  position: relative;
  text-align: center; 
}

.below.share-wrapper {
  margin: 50% auto;
}
.under.share-wrapper {
  margin: 0% auto;
}

.share-container {
  margin-left: 0px;
  margin-top:  0px;
  overflow: hidden;
  transition: all 0.3s cubic-bezier(.05,.93,.61,1.6);
  box-shadow: 0px 0px 20px -5px rgba(0, 0, 0, 0.5);
  width: 0px;
  height: 0px;
  background: #fff;
}

.below .share-container {
  position: absolute;
  top: 50%;
  left: 50%;
}

.under .share-container {
  position: absolute;
  top: 50px;
  left: 0%;
}

.under .share-action:hover ~ .share-container .share-btn:nth-child(1):after,
.under .share-container:hover .share-btn:nth-child(1):after {
  content: '';
  border-width: 11px;
  border-color: transparent;
  border-style: solid;
  border-bottom-color: #fff;
  border-top: none;
  width: 0;
  height: 0;
  position: absolute;
  left: 100%;
  margin-left: -11px;
  margin-top: -11px;
  text-align: left;
  box-shadow: 0px 0px 7px -5px rgba(0, 0, 0, 0.5);
     
  z-index: 10;
}
.share-action:hover ~ .share-container,
.share-container:hover {
  width: 100px;
  height: 100px;

  overflow: visible;
}

.below .share-action:hover ~ .share-container,
.below .share-container:hover {
  margin-top: -50px;
  margin-left: -50px;
}

.under .share-action:hover:after {
  content: '';
  width: 200%;
  height: 20px;
  position: absolute;
  top: 100%;
  left: -50%;    
  z-index: 1;  
}

.under .share-action:hover ~ .share-container,
.under .share-container:hover {
  margin-left: 0px;
  left: -100%;
}

.share-container:after,
.share-container:before {
  position: absolute;
  background:  linear-gradient(rgba(136, 221, 255, 0.5) 0%, rgba(34, 153, 221, 0.5) 50%, rgba(136, 221, 255, 0.5) 100%);
  z-index:4;
  margin: 0;
  transition: all 0.5s ease-in-out;
  content: '';
}

.share-container:before {
  background: ...