JSFiddle - React, Tailwind, and code Playground

by abhishek bhandari

HTML

<div class="popup-frame">
    <div class="entry-header">
      <a href="#" class="close-thik"></a>
    </div>
    <p>
        lorem ipsum is a simply a dummy text, it's just for making text more feasible there....
    </p>
    
 </div>

CSS

/* Close Button */

[class*='close-'] {
    color: #131212;
    font: 14px/100% arial, sans-serif;
    position: absolute;
    right: -5px;
    text-decoration: none;
    font-size: 18px;
    text-shadow: 0 1px 0 #fff;
    top: -5px;
}
.close-thik:after {
  content: '✖'; /* UTF-8 symbol */
}

.popup-frame{
    width:300px;
   min-height:250px;
    padding:10px;
    border:1px solid #ccc;
    box-shadow:0px 0px 4px #ccc;
}
.popup-frame .entry-header{
   position:relative;
}

JavaScript

$(".close-thik").click(function(){
    $(".popup-frame").hide();
});