JSFiddle - React, Tailwind, and code Playground

by andrey90vs

HTML

<div class="wrapper">
    <p class="box">Content</p>
    <div class="aft-line">
        <button class="button">CLICK</button>
    </div>    
</div>

CSS

.wrapper{
    width:400px;
    height:auto;
    margin:0 auto;
    padding:0;
}
.box{
    width:100%;
    max-heigth:200px;
    height:100%;
    padding:0;
    margin: 0;
    display:block;
    background-color:rgba(0,255,0,0.5);
}
.aft-line{
    width:100%;
    height:100%;
    max-height:100px;
    display:block;
    border-top:2px solid red;
}
.button{
    display:block;
    outline:0 !important;
    margin:2px 50%;
    border:1px solid pink;
    background-color:rgba(0,255,0,0.5);
    cursor:pointer;
    color:#fff;
    font-size:12px;
    font-weight:bolder;
    transition:all .5s ease;
}
.button:hover,
.button:active,
.button.lunch{
    background-color:rgba(0,255,0,1);
    color:grey;
    border:1px solid #fff;
    outline:none !important;
}

JavaScript

$(document).ready(function(){
  
  $(".box").hide();
  $(".button").click(function(){
    $(".box").slideToggle("slow");
  });

});