JSFiddle - React, Tailwind, and code Playground

by Yerko Palma

HTML

<div class="sharing">
  <div class="sharing-inner">
  
    <a href="#respond" class="comment">
      <div class="sharecircle" data-disqus-identifier="3019 http://#/?p=3019">
        <span class="dsq-postid" data-dsqidentifier="3019 http://#/?p=3019">
        </span>
      </div>
    </a>
    <p>
      <a href="#respond" class="comment"></a>
    </p>
  </div>
</div>

CSS

.sharing {
  text-align: center;
  top: 0;
    display: inline-block
  padding-top: 15px;
  -webkit-transform: translateZ(0);
  padding-top: 4%;
  padding-left: 1%;
  -webkit-transition: opacity 0.5s ease;
  transition: opacity 0.5s ease;
  z-index: 99;
  width: 75px;
  position: relative;
    background: url('http://recordandreturn.insctest1.com/wp-content/uploads/2015/03/comment-icon.png') no-repeat;
}
.sharing a, .sharing aside {
  position: relative;
  display: inline-block;
  margin-bottom: 20px;
  width: 60px;
  height: auto;
  text-align: center;
  line-height: 15px;
  z-index: 99;
  -webkit-transform: translateZ(0);
}
.sharing a.comment .sharecircle {
  background: #4077A7;
  color: #fff;
}
.sharing a .sharecircle, .sharing aside .sharecircle {
  width: 24px;
  height: 24px;
  text-align: center;
  margin: auto;
  -webkit-transition: all 0.5s ease;
  transition: all 0.5s ease;
  background: #555;
  color: #fff;
  font-size: 10px;
  position: absolute;
  left: 0;
  top: -8px;
  -webkit-transition: all 0.5s ease;
  transition: all 0.5s ease;
  -webkit-border-radius: 99px;
  -moz-border-radius: 99px;
  -ms-border-radius: 99px;
  -o-border-radius: 99px;
  border-radius: 99px;
  font-weight: bold;
  line-height: 24px;
}