JSFiddle - React, Tailwind, and code Playground

HTML

<div id="chat-slide" class="mobilechaticonON">
    <button onclick="javascript:slideChat();" class="mobilechat"><span></span>
    </button>
    <br>
    <button class="smschat"><a href="bing.com"><span></span></a>
    </button>
    <br>
    <button class="webchat"><a href="google.com"><span></span></a>
    </button>
</div>

CSS

.mobilechaticonON {

    display: block;

    height: 35px;

    position: fixed;

    bottom: 0;

    left: 21%;

    width: auto;

    padding: 5px 15px;

    background: #16a085;

    border-radius: 4px 4px 0px 0px;

    box-shadow: 0 0 4px rgba(0, 0, 0, 0.6);

    z-index: 999;

    transition: height .4s ease;

}

.smschat span:before {

    content:"Chat through text message";

}

.webchat span:before {

    content:"Chat using web chat";

}

.mobilechat span:before {

    content:"Live Sales Chat - Online!";

}

.mobilechaticonON button {

    border: 0;

    background: transparent;

    height: 35px;

}

.mobilechaticonON button span:before {

    font-family: Arial;

    font-size: 1.2em;

    color: #fff;

}

JavaScript

function slideChat() {
        div = document.getElementById('chat-slide');
        div.style.height = "100px";
        div.style.transition = "height .4s ease";
    }