JSFiddle - React, Tailwind, and code Playground

by kamranali

HTML

<div id="content">CONTENT</div>
<div id="bottom"></div>

CSS

#content {
    width: 400px;
    border-left: 10px solid #FA802F;
    border-right: 10px solid #FA802F;
    text-align: center;
    padding: 100px 0px 100px 0px;
    display: none;
}

#bottom{
    width: 420px;
    height: 100px;
    
    background-color: #FA802F;
    -webkit-border-bottom-left-radius: 50px;
    -moz-border-bottom-left-radius: 50px;
    border-bottom-left-radius: 100px;

    -webkit-border-bottom-right-radius: 50px;
    -moz-border-bottom-right-radius: 50px;
    border-bottom-right-radius: 100px;   
    }

JavaScript

$('html').click(function() {
      $('#content').slideUp();
 });

 $('#bottom').click(function(event){
      $('#content').slideDown();
     event.stopPropagation();
 });