JSFiddle - React, Tailwind, and code Playground

by Darren Galway

HTML

<div class="toast">
  <span class="toast-message"></span>
</div>

<button class="button">Show Toast</button>

SCSS

$g-mobile: 0;
$g-tablet: 48rem; //768px
$g-desktop: 73.125rem; // 1170px

$primary: #2fc199;
$l-space: 1rem;

body {
  font-family: sans-serif;
}

.toast {
  position: fixed;
  opacity: 0;
  bottom: $l-space;
  right: $l-space;
  background: $primary;
  border-radius: 4px;
  padding: $l-space;
  color: #fff;
  
  &.show {
    opacity: 1;
  }
  
  &.leave {
    opacity: 0;    
  }

  &.show-animation {
    animation: toast 1000ms ease;
  }
  
  &.leave-animation {
    animation: toast 1000ms ease reverse;
  }
}

@keyframes toast {
  0% {
    opacity: 0;
    transform: translateX(100px);
  }

  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

JavaScript

const toastMessage = document.querySelector('.toast')
const button = document.querySelector('.button')

toastMessage.textContent = 'This is a toast message'

function showToast() {
	button.disabled = 'true'
  setTimeout(() => {
  	button.disabled = false
  },1000)
  
  console.dir(button)
  
	if (toastMessage.classList.contains('show')) {
  	toastMessage.classList.remove('show')
  	toastMessage.classList.add('leave')
    toastMessage.classList.add('leave-animation')
    setTimeout(() => {
    	toastMessage.classList.remove('leave-animation')
    }, 1000)
    return
  }

  toastMessage.classList.remove('leave')
  toastMessage.classList.add('show')
	toastMessage.classList.add('show-animation')
  setTimeout(() => {
  	toastMessage.classList.remove('show-animation')
  }, 1000)
}

button.addEventListener('click', showToast)