JSFiddle - React, Tailwind, and code Playground

by abuhamzah

HTML

<div id="trigger">Click to get message</div>


<div id="info_box" style="display:none">
<span class="custom info">
<img src="info.png" alt="info" height="48" width="48" />
<em>Information</em>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, 
when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</span>
</div>

CSS

div#info_box {
    height: 70px;
    width: 250px;
    border: 2px solid black;
    background-color: #151515;
    color: #fff;
    position: absolute;
    
    top: 100px;
    left: 45%;
}

JavaScript

$(document).ready(function () {

          $('div#trigger').click(function () {
              //Get info_box
              var info = $('div#info_box');
              //Fade the box in during 1 sec, show it for 5, and let it fade out again
              info.fadeIn(1000).delay(3000).fadeOut(1000);
          });
      });