JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="mainpackages">
<li class="first1"><p>Pick a package that suits you!</p></li>
<li class="last1"><p>Special deals &amp; offers!</p></li>
</ul>
<div id="suitsyou">
Lorem Ipsum.....
</div>

<div id="dealsandoffers">
Lorem...
</div>

CSS

#packagescontent {position:absolute; top: 2800px; left: 50%; height:720px; width: 900px; margin-top: -360px; margin-left: -450px; /*background-color: #fff;*/}
ul.mainpackages {margin: 0 auto; height: 40px; }
ul.mainpackages li {
    border-top-width: 4px;
    border-bottom-width: 4px;
    border-top-style: double;
    border-bottom-style: double;
    border-top-color: #FDFECD;
    border-bottom-color: #FDFECD;
    height: 40px;
    width: 300px;
    background-color: #DDEFEF;
    display: inline-block;
    margin: 0px 60px;
}
ul.mainpackages li p{
    margin-top: 10px;
    font-size: 16px;
    text-align: center;
}
#suitsyou {
    border-top-width: 4px;
    border-bottom-width: 4px;
    border-top-style: double;
    border-bottom-style: double;
    border-top-color: #FDFECD;
    border-bottom-color: #FDFECD;
    height: 600px;
    width: 800px;
    background-color: #DDEFEF;
    margin: 20px;
    display: none;
}
#dealsandoffers {
    border-top-width: 4px;
    border-bottom-width: 4px;
    border-top-style: double;
    border-bottom-style: double;
    border-top-color: #FDFECD;
    border-bottom-color: #FDFECD;
    height: 600px;
    width: 800px;
    background-color: #DDEFEF;
    margin: 20px;
    display: none;
}

JavaScript

$('.first1').click( function ({
      $('#suitsyou').slideToggle();                        
})