JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://use.fontawesome.com/38d45f7c1d.js"></script>
<div title="Fale Diretamente Conosco" class="central-chats">
    <div class="inside">
        <i class="fa fa-comments icone-principal" aria-hidden="true"></i>

        <!-- WHATSAPP -->
        <a class="hide-mobile messenger-whatsapp" href="#" target="_blank">
            <img title="Whatsapp" src="https://cdn.awsli.com.br/427/427452/arquivos/whats-messenger2.png">
        </a>

        <a class="hide-web messenger-whatsapp" href="#" target="_blank">
            <img title="Whatsapp" src="https://cdn.awsli.com.br/427/427452/arquivos/whats-messenger2.png">
        </a>

        <!-- FACEBOOK MESSENGER -->
        <a class="messenger-facebook" href="#" target="_blank">
            <img title="Facebook Messenger" src="https://cdn.awsli.com.br/427/427452/arquivos/face-messenger.png">
        </a>

        <!-- E-MAIL FORM MODAL -->
        <a class="email-modal" href="#modalContato" data-toggle="modal" data-target="#modalContato">
            <i title="E-Mail" class="fa fa-envelope" aria-hidden="true"></i>
        </a>
    </div>
</div>

CSS

.central-chats {
        position: fixed;
        bottom: 10px;
        right: 10px;
        z-index: 999;
    }

    .central-chats > .inside {
        position: absolute;
        bottom: 0;
        right: 0;
        width: 50px;
        height: 50px;
        -webkit-transition: all .2s ease-in;
        -moz-transition: all .2s ease-in;
        -ms-transition: all .2s ease-in;
        -o-transition: all .2s ease-in;
        transition: all .2s ease-in;
        border-radius: 100%
    }

    .central-chats:hover > .inside {
        width: 110px;
        height: 110px;
        border-radius: 100px 100px 45px 100px
    }

    .central-chats > .inside .icone-principal {
        width: 50px;
        line-height: 50px;
        text-align: center;
        font-size: 25pt;
        background: #4267B2;
        color: white;
        border-radius: 100%;
        z-index: 9;
        position: absolute;
        bottom: 0;
        right: 0;
        -webkit-transition: all .2s ease-in;
        -moz-transition: all .2s ease-in;
        -ms-transition: all .2s ease-in;
        -o-transition: all .2s ease-in;
        transition: all .2s ease-in;
    }

    .central-chats:hover .icone-principal {
        background: rgba(0,0,0,.2);
        color: rgba(255,255,255,.6)
    }

    .central-chats > .inside > a > i {
        background: #DC493C;
        color: white;
        border-radius: 100%
    }

    .central-chats > .inside > a > i,
    .central-chats > .inside > a > img {
        width: 50px;
        line-height: 50px;
        text-align: center;
        font-size: 20pt;
        position: absolute;
        opacity: 0;
        -webkit-transition: all .1s ease-in;
        -moz-transition: all .1s ease-in;
        -ms-transition: all .1s ease-in;
        -o-transition: all .1s ease-in;
        transition: all .1s ease-in;
    }

    .central-chats:hover > .inside > a > i,
    .central-chats:hover > .inside > a > img {
        opacity: 1;
    }

    .central-chats > .inside > a >...