JSFiddle - React, Tailwind, and code Playground

HTML

<div id="link">
<ul>
<li class="link"><a href="#">Link</a></li>
</ul>
</div>

<div id="text">
<p>text1 text1 text1 text1 text1 text1 text1 text1 text1</p>
<p class="link"><a href="#">Close Text</a></p>
</div>

CSS

#link { background-color:black; display:inline; position:absolute; bottom:0; right:0; width:120px; }

#link li.link a:hover { text-decoration:none; border-bottom:1px solid white; color:white; }
#link li.link a { text-decoration:none; color:white; }

#text { display:none; position:fixed; top:20%; bottom:20%; right:0px; width:600px; background-color: green; margin: 0px; padding: 10px; color:black; }

#text p { text-align:center; }

#text .link a { color: white; }

JavaScript

$(function() { $('.link').click(function(e) { $('#text').slideToggle(); });});