JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">

<a href="#" class="learn_more_btn">Learn More</a>
<div class="more_info">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>

</div>

CSS

#container { margin: 30px 0 0 0; }
.more_info { background: #ccc; margin: 0 auto; padding: 10px 20px; position: relative; top: -88px; width: 355px; }
.more_info p { color: #fff; font-size: 12px; line-height: 1.3; margin: 0; }
.learn_more_btn { background: #333; color: #fff; display: block; margin: 0 auto; padding: 10px 0; position: relative; text-align: center; text-decoration: none; width: 100px;}

JavaScript

$('.more_info').hide();
$('.learn_more_btn').hover(function(){
    $('.more_info').fadeIn();
},function(){
    $('.more_info').fadeOut();

});