JSFiddle - React, Tailwind, and code Playground

by joaopcos

HTML

<div id="alert-container">
  <div id="alert" class="info showAlert">
    <div id="content">
      <i class="fas fa-exclamation-circle"></i>
      <p>Warning: This is a warning alert!</p>
    </div>
    <button id="close">x</button>
  </div>
  <div id="alert" class="info showAlert">
    <div id="content">
      <i class="fas fa-exclamation-circle"></i>
      <p>Warning: This is a warning alert!</p>
    </div>
    <button id="close">x</button>
  </div>
  <div id="alert" class="info showAlert">
    <div id="content">
      <i class="fas fa-exclamation-circle"></i>
      <p>Warning: This is a warning alert!</p>
    </div>
    <button id="close">x</button>
  </div>
</div>

CSS

@import url('https://fonts.googleapis.com/css2?family=Exo:ital,wght@0,400;0,500;1,700&display=swap');        
#alert-container{
  position: fixed;
  top: 84px;
  right: 12px;
}	
#alert{
  display: flex;
  max-width: 540px;
  margin-left: 12px;
  margin-bottom: 10px;
  border-radius: 5px;
  padding: 0 12px 0 12px;
}
#alert.showAlert{
  animation: showAlert 500ms ease forwards;
}
@keyframes showAlert{
  0%{
    transform: translateX(110%);
  }
  100%{
    transform: translateX(0%);
  }
}
#alert.hideAlert{
  animation: hideAlert 500ms ease forwards;
}
@keyframes hideAlert{
  0%{
    transform: translateX(0%);
  }
  100%{
    transform: translateX(110%);
  }
}
#content{
  display: flex;
  align-items: center;
  font-size: 20px;
  font-weight: 500;
}
#content>svg{
  width: 32px;
  height: 32px;
  margin-right: 16px;
}
#close{
  position: relative;
  left: 12px;
  border-radius: 0 5px 5px 0;
  border: none;
  cursor: pointer;
}
#close>svg{
  width: 24px;
  height: 24px;
  margin: 0 12px 0 12px;
}
.error{
  background-color: #FFE1E3;
  border-left: 8px solid #FF465D;
  color: #FF4553;
}
.error>button{
  background-color: #FFB9BE;
  color: #FF4553;
}
.info{
  background-color: #D6F0FD;
  border-left: 8px solid #71C7F8;
  color: #3DB6FF;
}
.info>button{
  background-color: #A8DDFD;
  color: #3DB6FF;
}
.success{
  background-color: #C5F3D7;
  border-left: 8px solid #2AD56F;
  color: #20AF5D;
}
.success>button{
  background-color: #94EAB9;
  color: #20AF5D;
}
.warning{
  background-color: #FFEAC5;
  border-left: 8px solid #FFC04C;
  color: #F19B00;
}
.warning>button{
  background-color: #FFDCA1;
  color: #F19B00;
}
@media only screen and (max-width: 540px){
  #content{
    font-size: 16px;
  }
  #content>svg{
    width: 24px;
    height: 24px;
  }
  #close>svg{
    width: 18px;
    height: 18px;
  }
}

JavaScript

$('#close').click(function(){
	$("#alert").removeClass("showAlert");
  $("#alert").addClass("hideAlert");
  setTimeout(() => {
    $("#alert").remove()
  }, 500);
});