JSFiddle - React, Tailwind, and code Playground

by H17737

HTML

<div id="snackbar-container" class="hidden">
  <div id="snackbar">
    <span id="message"></span>
    <a href="javascript:void(0)" id="action">dismiss</a>
  </div>
</div>

CSS

#snackbar-container {
  z-index: 10000;
  position: fixed;
  bottom: 0;
  width: 100%;
  text-align: center;
  transition: bottom 0.6s ease-in-out;
}

@media (max-width: 600px) {
  #snackbar {
    width: 100%;
  }
}

@media (min-width: 600px) {
  #snackbar {
    width: 40%;
    min-width: 600px;
  }
}

#snackbar {
  box-sizing: border-box;
  margin: auto;
  text-align: left;
  background-color: #323232;
  color: white;
  font-family: Helvetica;
  padding: 14px 15px;
  font-size: 14px;
}

.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

setTimeout(function() {
  showSnack('We cannot find the indicator you are looking for');
}, 1000);

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

var showSnack = function(message) {
  document.querySelector('#message').textContent = message;
  document.querySelector('#snackbar-container').classList.remove('hidden');
  setTimeout(function() {
    document.querySelector('#snackbar-container').classList.add('hidden');
  }, 5000);
};