JSFiddle - React, Tailwind, and code Playground

HTML

<div id="rightAssets">Click on a module to download Language Assets:
<div class="prop"><a href="javascript:void(0);">.NET</a></div>
<div class="prop"><a href="javascript:void(0);">C</a></div>
<div class="prop"><a href="javascript:void(0);">C++</a></div>
<div class="prop"><a href="javascript:void(0);">JScript</a></div>
<div class="prop"><a href="javascript:void(0);">Java</a></div>
<div class="prop"><a href="javascript:void(0);">Perl</a></div>
</div>

CSS

.prop{background-color:#FFFFFF;padding:4px;width:75%;}
.prop a{color:#ffffff;background-color:#0497d6;display:block;width:54%;}
.lang{width:243px;height:182px;background:#333333;position:relative; top:-342px;left:540px;}
.lang .propHead{color:#0095d5;padding:3px;margin:5px;font-size:18px;font-variant:small-caps;}
.lang .cross{color:#818285;font-size:22px;float:right;padding-right:12px;text-decoration:none;}
.lang .propText{background:#cccccc;padding:5px;color:#252525;margin:5px 10px;font-size:15px;line-height:1.5;}
.lang .propBtmText a {color:#ff5412;padding-left:10px;text-decoration:none;}

JavaScript

$("document").ready(function() {
        $(".cross").click(function() { 
            $(".lang").hide();
        });
            $(".prop a").click(function() {
                $("body").append("<div class='lang'><span class='propHead'>Security</span><a href='javascript:void(0);' class='cross' >X</a><div class='propText'>This will be having he description of each of the Language on whch you click with a link to pdf  documentatiom</div><span class='propBtmText'><a href='javascript:void(0)';>Download Documentation</a></span></div>")
                $(this).unbind("click");
                $(this).css("border","2px solid red");
            });

    });