JSFiddle - React, Tailwind, and code Playground

by luka kupunia

HTML

<div class="header-social_">
    <div class="dot"></div>
    <div class="dot"></div>
    <div class="dot"></div>
    <a href="" class="facebook">
        <svg xmlns="https://www.w3.org/2000/svg" width="16.123" height="16.123" viewBox="0 0 16.123 16.123">
          <path id="facebook-square-brands" d="M16.123,33.727V46.4A1.728,1.728,0,0,1,14.4,48.123h-3.07V41.746h2.181l.313-2.433H11.326V37.758c0-.705.194-1.184,1.206-1.184H13.82V34.4a17.323,17.323,0,0,0-1.879-.1A2.933,2.933,0,0,0,8.81,37.521v1.8H6.622V41.75H8.814v6.374H1.727A1.728,1.728,0,0,1,0,46.4V33.727A1.728,1.728,0,0,1,1.727,32H14.4A1.728,1.728,0,0,1,16.123,33.727Z" transform="translate(0 -32)" fill="#001f4b" opacity="0.3"/>
        </svg>
    </a>
    <a href="" class="twitter">
        <svg xmlns="https://www.w3.org/2000/svg" width="19.606" height="15.924" viewBox="0 0 19.606 15.924">
          <path id="twitter-brands"                     d="M17.591,52.051c.012.174.012.348.012.523A11.354,11.354,0,0,1,6.17,64.006,11.355,11.355,0,0,1,0,62.2a8.313,8.313,0,0,0,.97.05,8.047,8.047,0,0,0,4.989-1.717A4.025,4.025,0,0,1,2.2,57.748a5.068,5.068,0,0,0,.759.062,4.25,4.25,0,0,0,1.057-.137A4.019,4.019,0,0,1,.8,53.73v-.05a4.047,4.047,0,0,0,1.816.51,4.024,4.024,0,0,1-1.244-5.374,11.422,11.422,0,0,0,8.285,4.2,4.536,4.536,0,0,1-.1-.921,4.022,4.022,0,0,1,6.954-2.749,7.911,7.911,0,0,0,2.55-.97,4.007,4.007,0,0,1-1.767,2.214,8.055,8.055,0,0,0,2.314-.622A8.638,8.638,0,0,1,17.591,52.051Z" transform="translate(0 -48.082)" fill="#001f4b" opacity="0.3"/>
        </svg>
    </a>
    <a href="" class="youtube">
        <svg xmlns="https://www.w3.org/2000/svg" width="20.052" height="13.882" viewBox="0 0 20.052 13.882">
          <path id="you" d="M34.158,27.5H20.893A3.393,3.393,0,0,0,17.5,30.893v7.1a3.393,3.393,0,0,0,3.393,3.393H34.158a3.393,3.393,0,0,0,3.393-3.393v-7.1A3.393,3.393,0,0,0,34.158,27.5Zm-5.784,8.483-3.008,1.542v-6.17L28.374,32.9l3.008,1.542Z" transform="translate(-17.5 -27.5)" fill="#001f4b" opacity="0.3"/>
        </svg>
  ...

CSS

div.header-social_ {
    width: 27px;
    height: 31px;
    /* border: 1px solid black; */
    position: absolute;
    top: 50px;
    left: 78px;
    cursor: pointer;
    transition: 1s;
}
div.header-social_.active {
    /* transform: rotate(360deg); */
}
div.header-social_ div.dot {
    width: 8.36px;
    height: 8.36px;
    background: #001F4B;
    position: absolute;
    border-radius: 50%;
    transition: cubic-bezier(0.76, 0.03, 0.25, 1) 1s;
    /* backface-visibility: hidden; */
}
div.header-social_.active div.dot {
    transform: translate(0,0) scale(0.6);
}
div.header-social_ div.dot:nth-child(1){
    top: 0;
    left: 0;
}
div.header-social_.active div.dot:nth-child(1) {
    transform: translate(58px,23px) scale(0.6);
}
div.header-social_ div.dot:nth-child(2){
    top: 23px;
    left: 0px;
}
div.header-social_.active div.dot:nth-child(2) {
    transform: translateX(6px) scale(0.6);
}
div.header-social_ div.dot:nth-child(3){
    top: 12px;
    left: 19px;
}
div.header-social_.active div.dot:nth-child(3) {
    top: 12px;
    left: 19px;
    transform: translate(96px, 11.5px) scale(0.6);
}
div.header-social_ a {
    position: absolute;
    display: inline-block;
    overflow: hidden;
    pointer-events: none;
}
div.header-social_ a svg {
    display: inline-block;
    transform: translateX(-140%);
    transition: cubic-bezier(0.76, 0.03, 0.25, 1) .8s;
    pointer-events: none;
}
div.header-social_ a svg path {
    transition: .6s;
}
div.header-social_.active a svg {
    transform: translateX(0);
    pointer-events: all;
}
div.header-social_.active a {
    pointer-events: all;
}
div.header-social_ a.facebook {
    left: -23px;
    top: 18px;
}
div.header-social_ a.twitter {
    left: 28px;
    top: 18px;
}
div.header-social_ a.youtube {
    left: 81px;
    top: 19.5px;
}
div.header-social_ a.instagram {
    left: 136px;
    top: 19px;
}
div.header-social_.active a.facebook svg{
    transition-delay: 0.2s;
}
div.header-social_.active a.facebook:hover svg path...

JavaScript

var socialTime = null;
$('.header-social_').hover(function(){
    $(this).addClass('active');
    clearInterval(socialTime)
},function(){
    socialTime = setTimeout(function(){
        $('.header-social_').removeClass('active')
    },1000)
})