JSFiddle - React, Tailwind, and code Playground

HTML

<p id="project">Click</p>
<div id="abproject">
    <p id="abprojectt">Text</p>
     </div>

CSS

#project
{
width: 400px;
height: 80px;
background-color: #0a5eb0;
display: inline-block;
cursor: pointer;
margin-top: 50px;
border-radius: 5px;
opacity: 0.8;
line-height: 80px;
color:#fff;
font-size: 35px;
}
#abproject
{
border-radius: 10px;
margin-top: 100px;
margin-left:10px;
width: 100px;
height: 91px;
background-color: black;
opacity: 0.9;
}
#abprojectt
{

color:#fff;
font-size: 28px;
line-height: 100px;
}

JavaScript

$(document).ready(function(){
 $("#project").click(function () {
     $("#abproject").fadeToggle("slow");
    });
});