JSFiddle - React, Tailwind, and code Playground

by H17737

HTML

<div id="body">
  <div id="snackbar" class="hidden">
    <span id="message">We cannot find the indicator you are looking for</span>
    <a href="javascript:void(0)" id="action">close</a>
  </div>  
</div>

CSS

#body {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: white;
}

#snackbar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #323232;
  color: white;
  font-family: Helvetica;
  padding: 14px 15px;
  font-size: 14px;
  transition: bottom 0.6s ease-in-out;
}

.hidden {
  bottom: -70px !important;
}

#message {
  color: white;
  width: 80%;
  display: inline-block;
}

#action {
  display: block;
  color: #EEFF41;
  text-transform: uppercase;
  float: right;
  text-decoration: none;
  bottom: 0;
}

JavaScript

var snack = document.querySelector('#snackbar');
setTimeout(function(){
	snack.classList.remove('hidden');
}, 1000);

var action = document.querySelector('#action');
action.addEventListener('click', function(e){
	e.target.parentNode.classList.add('hidden');
});