JSFiddle - React, Tailwind, and code Playground

by gabrieleromanato

HTML

<a id="rss" href="#">
    <span class="dot"></span>
    <span class="line1"></span>
    <span class="line2"></span>
</a>

CSS

#rss{
    width:60px;
    height:60px;
    background:#F60;
    box-shadow:0 0 2px #000000;
    position:relative;
    padding:10px 10px 10px 10px;
    border-radius:10px;
    display:block;
    margin: 2em auto;
}
    #rss .dot{
        width:20px;
        height:20px;
        border-radius:50%;
        background:#FFF;
        bottom:10px;
        position:absolute;
        -webkit-transition:all 0.5s ease-in-out;
        -moz-transition:all 0.5s ease-in-out;
        -ms-transition:all 0.5s ease-in-out;
        -o-transition:all 0.5s ease-in-out;
        transition:all 0.5s ease-in-out;
    }
    #rss:hover .dot{
        background:#000;
    }
    #rss .line1{
        width:25px;
        height:25px;
        border-radius:50%;
        border:#FFF 10px solid;
        position:absolute;
        left:-5px;
        bottom:-5px;
        border-color:white transparent transparent transparent;
        -webkit-transform:rotate(40deg) scale(1.5);
        -moz-transform:rotate(40deg) scale(1.5);
        -ms-transform:rotate(40deg) scale(1.5);
        -o-transform:rotate(40deg) scale(1.5);
        transform:rotate(40deg) scale(1.5);
        -webkit-transition:all 1s ease-in-out;
        -moz-transition:all 1s ease-in-out;
        -ms-transition:all 1s ease-in-out;
        -o-transition:all 1s ease-in-out;
        transition:all 1s ease-in-out;
    }
    #rss .line2{
        width:40px;
        height:40px;
        border-radius:50%;
        border:#FFF 10px solid;
        position:absolute;
        left:-8px;
        bottom:-8px;
        border-color:white transparent transparent transparent;
        -webkit-transform:rotate(40deg) scale(1.8);
        -moz-transform:rotate(40deg) scale(1.8);
        -ms-transform:rotate(40deg) scale(1.8);
        -o-transform:rotate(40deg) scale(1.8);
        transform:rotate(40deg) scale(1.8);
        -webkit-transition:all 1.5s ease-in-out;
        -moz-transition:all 1.5s ease-in-out;
        -ms-transition:all 1.5s ease-in-out;
      ...