JSFiddle - React, Tailwind, and code Playground

by Jeff

HTML

<div class="bar">
        hello<br/>sdfdsf<br/>sdfdsfsdf
    </div>
<div class="bottom">
    <a href="#" class="test">A</a>
    
</div>

CSS

body {
    margin:0px;
    padding:0px;
}
* {
    box-sizing:border-box;
}
.bottom {
    
    position:fixed;
    bottom:0px;
    left:0px;
    right:0px;
    height:32px;
    background:#EFEFEF;
    border-top:1px solid #AFAFAF;
}

.bar {
    position:fixed;
    left:8px;
    right:8px;
    background:#EFEFEF;
    border:1px solid #AFAFAF;
    border-radius:2px;
    padding:4px 8px;
    bottom:42px;
}

.carrot {
    position:absolute;
    bottom:-9px;
    left:512px;
    width: 0; 
	height: 0; 
	border-left: 10px solid transparent;
	border-right: 10px solid transparent;
	border-top: 8px solid #AFAFAF;
}
.carrot:before {
    position:absolute;
    content:"";
    top:-9px;
    left:-10px;
    width: 0; 
	height: 0; 
	border-left: 10px solid transparent;
	border-right: 10px solid transparent;
	border-top: 8px solid #EFEFEF;
}

.bar:after {
    position:absolute;
    top:100%;
    content:"";
    left:8px;
	border-left: 10px solid transparent;
	border-right: 10px solid transparent;
	border-top: 8px solid #EFEFEF;
}
.bar:before {
    position:absolute;
    content:"";
    top:100%;
    left:8px;
	border-left: 11px solid transparent;
	border-right: 11px solid transparent;
	border-top: 9px solid #AFAFAF;
    margin-left:-1px;
}

.test {
    display:block;
    height:24px;
    line-height:24px;
    padding:0px 6px;
    margin:3px;
    margin-left:16px;
    float:left;
    border:1px solid transparent;
    color:#000;
    text-decoration:none;
}
.test:hover{
    border:1px solid #AFAFAF;
    border-radius:2px;
    box-shadow:1px 1px 2px rgba(0,0,0,0.3);
}

JavaScript

$("body").on("click", ".test", function(e){
    e.preventDefault();
    var h = $(".bar").css("height");
    if($(".bar").css("bottom") == "-"+h){
        $(".bar").animate({bottom: "42px"});
    }else{
        $(".bar").animate({bottom: "-"+h});
    }
});