JSFiddle - React, Tailwind, and code Playground

by vickythegme

HTML

<div class="rotatec"><a href="#contactus" id="cont">&nbsp;&nbsp;Contact Us</a>
</div>
<div class="contact-popup">bla bla</div>

CSS

.rotatec {
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    transform: rotate(-90deg);
    position:fixed;
    top:403px;
    left:16px;
    width:110px;
    height:35px;
    font-size:18px;
    color:black;
    background:#FD9904;
    margin-left:-55px;
    border-radius:05px;
    -webkit-border-radius:05px;
    -moz-border-radius:05px;
    box-shadow: 5px 5px 5px #444444;
    text-decoration:none;
}
.rotatec:hover {
    background:#444444;
    box-shadow: 5px 5px 5px #D0A90D;
    font-size:18px;
    color:#FFFFFF;
}
.contact-popup {
    display:none;
    background:#F1F1F1;
    padding: 10px;
    border: 2px solid #ddd;
    float: left;
    font-size: 1.2em;
    width:350px;
    height:165px;
    position: fixed;
    top: 369px;
    left: 35px;
    z-index: 99999;
    box-shadow: 05px 20px 20px #999;
    /* CSS3 */
    -moz-box-shadow: 05px 20px 20px #999;
    /* Firefox */
    -webkit-box-shadow: 05px 20px 20px #999;
    /* Safari, Chrome */
    border-radius:3px 3px 3px 3px;
    -moz-border-radius: 3px;
    /* Firefox */
    -webkit-border-radius: 3px

JavaScript

$(document).ready(function () {
    ('#cont').click(function () {
        $('div.contact-popup').slideDown(300);
    });
});