JSFiddle - React, Tailwind, and code Playground

HTML

<div id="menu">
    <ul>
        <li>
            <a href="#" id="item-1">SGSFDGSFDGSF</a>
            <div id="panel-1" class="panel">
                 <h2>SGSFDGSFDGSDF</h2>
            
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sed nibh a eros varius pulvinar. Sed a sodales metus, sit amet accumsan magna. Sed sed lectus ultricies, feugiat mauris ut, accumsan nunc. Cras hendrerit semper magna, ac vestibulum libero ultrices vel. In hac habitasse platea dictumst. Fusce blandit gravida ligula, et congue risus commodo et. Praesent porta nulla nunc, sed dignissim dolor auctor id.</p>
                <a href="#">read more 1...</a>
            </div>
        </li>

        <li>
            <a href="#" id="item-2">FEWGFWE</a>
            <div id="panel-2" class="panel">
                <h2>FEWGFWEF</h2>
                
                <p>Fusce pellentesque malesuada mattis. Integer sodales scelerisque leo sit amet viverra. Vivamus cursus ornare enim ac dictum. Curabitur at mauris nisl. Aliquam aliquam quis nunc vitae suscipit. Nunc nec nisi quis massa pretium feugiat vitae eu arcu. Etiam ut enim a neque
            </div>
        </li>

                <li>
            <a href="#" id="item-3">BLDFUJE</a>
            <div id="panel-3" class="panel">
                <h2>BLDFUJEWBFJNEWJ</h2>
                
                <p>Fusce pellentesque malesuada mattis. Integer sodales scelerisque leo sit amet viverra. Vivamus cursus ornare enim ac dictum. Curabitur at mauris nisl. Aliquam aliquam quis nunc vitae suscipit. Nunc nec nisi quis massa pretium feugiat vitae eu arcu. Etiam ut enim a neque aliquet egestas. Integer quis ante sodales, lobortis nisi et, porttitor est. Suspendisse leo justo, faucibus in sagittis nec.</p>
            </div>
        </li>

    </ul>
</div>

CSS

*::-moz-selection {
    background: none repeat scroll 0 0 #FF5E99;
    color: #FFFFFF;
    text-shadow: none;
}
*::selection {
    background: none repeat scroll 0 0 #FF5E99;
    color: #FFFFFF;
    text-shadow: none;
}
#menu ul {
    margin: 0;
    padding: 0;
    float: left;
}

#menu ul li {
    display: inline-block;
    padding: 0 10px;
    float: left;
   
}
.panel {
    display: none;
    min-height: 200px;
    border: 1px solid;
    border-radius: 0 0 10px 10px;
    float: left;
    padding: 1em;
    position: absolute;
    top: 26px;
    width: 500px;
    border-top: 5px solid red;
}
#menu li a {
    display: block;
    float: left;
}


#item-1{
    text-align: center;
    width: 150px;
}
#item-2{
    text-align: center;
    width: 150px;
}
#item-3{
    text-align: center;
    width: 150px;
}
h2 {
    margin: 0;
    padding: 0;
}

JavaScript

$(document).ready(function(){
$('#item-1').parent().hover(function () {
    $("#panel-1").toggle('fast');
  });

$('#item-2').parent().hover(function () {
    $("#panel-2").toggle('fast');
  });

$('#item-3').parent().hover(function () {
    $("#panel-3").toggle('fast');
  });

});