JSFiddle - React, Tailwind, and code Playground

by Vinit Divekar

HTML

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<div class='popup1 hidepopup' id="popup1">
      <div class="container">
		<div class="row rowpopup">
          <div class="iconpopup">
            <img class="imgpopup" src="https://cdn.shopify.com/s/files/1/0076/6931/7690/files/clock2.png?8339" />
          </div>
          <div class="textpopup">
            <div class="textpopup1">
              Order as soon as possible
            </div>
            <div class="textpopup2">
              there is little time remaining for this deal to end
            </div>
          </div>
          <button type="button" class="close" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
      </div>
  	</div>

CSS

.popup1 {
    height: 100px;
  width:300px;
  position: fixed;
  z-index: 99999;
  background: white;
  border-radius: 10px;
  box-shadow: 0 0 30px rgba(0,0,0,0.45);
}

.anim-effect{
  bottom: 50px;
  left:50px;
  -webkit-animation: slideIn 1s forwards;
  -moz-animation: slideIn 1s forwards;
  animation: slideIn 1s forwards;
}

@-webkit-keyframes slideIn {
  0% {
    transform: translateX(-900px);
  }
  100% {
    transform: translateX(0);
  }
}


  
.rowpopup {
  display: inline-flex;
}
  
.textpopup {
  padding: 10px;
  margin-top: -15px;
}
  
.textpopup1 {
  font-size:16px;
}
  
.textpopup2 {
  font-size:14px;
}
  
.iconpopup {
  padding:10px;
}
  
.imgpopup {
  width:30px;
}
  
.hidepopup {
  display: none !important;
}

JavaScript

$(document).ready(function(){
	setTimeout(displayBox, 10000);
});

function displayBox(){
	console.log('called');
	$('.popup1').removeClass('hidepopup');
	$('.popup1').addClass('anim-effect ');
}