JSFiddle - React, Tailwind, and code Playground

by Murat Kezli

HTML

<div id="e-modal">

<div class="e-modal-header">

</div>
<div class="e-modal-body">

</div>
<div class="e-modal-footer">

</div>
</div>

CSS

body{ margin:0px auto; padding:50px; background-color:#cdcdcd;}

#back{ width:100%; height:100%; z-index:99999999; background-color:black;}

#e-modal{ width:500px; height:auto; z-index:10000}

.e-modal-header{ background:url("https://yapifuariistanbul.com/www_yapi-istanbul/media/Campaign-Assets/Banners/popup/color-bant.png");
width:500px; height:23px;
}
.e-modal-header::before{content:url('https://yapifuariistanbul.com/www_yapi-istanbul/media/Campaign-Assets/Banners/popup/home.png'); /* with class ModalCarrot ??*/
  position:relative; /*or absolute*/
  z-index:100000; /*a number that's more than the modal box*/
  left:-10px;
  top:-30px;}
  
  .e-modal-body{ width:500px; height:230px; background-color:#ffffff; }
  .e-modal-footer{ width:500px; height:10px; background-color:#b2b2b2; }

JavaScript

$(".bant").click(function() {
  $( "#modal-contanier").fadeOut( "fast", function() {
    // Animation complete.
  });
});