JSFiddle - React, Tailwind, and code Playground

by nabtron

HTML

<div   id="snackbar" ng-style="snack-animate">
            <div class="chip col-md-12 col-xs-12 col-lg-12">
              <div class="snack-img"><img src="https://uploads-ssl.webflow.com/59318798d83bff2781822428/5a73908228223600015b048b_Trust%20Icon.svg" alt="person"></div>
              <div class="snack-content"><div class="recent-service-person-name" style="text-transform: capitalize;">{{latestBookingToShow.customerName.split(' ')[0]}}, {{latestBookingToShow.cityName}} <span class="closebtn" ng-click="myFunction()">&times;</span></div>
              <div class="recent-service-person-activity">Just booked an {{latestBookingToShow.bikeModel.split(' ')[0]}} for {{latestBookingToShow.durationText}}</div>
            <div class="recent-service-person-time">  {{latestBookingToShow.bookedBefore.toFixed(0)}} minutes ago </div>
            
            </div>
            </div>
        </div>

CSS

#snackbar {
    visibility: hidden;
    min-width: 250px;
    margin-left: -125px;
    background-color: transparent;
    color: #fff;
    text-align: center;
    border-radius: 2px;
    padding: 16px;
    position: fixed;
    z-index: 1;
    left: 10%;
    bottom: 20px;
    font-size: 17px;
    z-index:9999;
}

#snackbar.show {
    visibility: visible;
    -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
    animation: fadein 0.5s, fadeout 0.5s 2.5s;
    
}

 #snackbar.hide {
    -webkit-animation: fadein 0.9s, fadeout 0.5s 2.5s;
    animation: fadein 0.9s, fadeout 0.5s 2.5s;
} 

@-webkit-keyframes fadein {
    from {bottom: 0; opacity: 0;} 
    to {bottom: 20px; opacity: 1;}
}

@keyframes fadein {
    from {bottom: 0; opacity: 0;}
    to {bottom: 20px; opacity: 1;}
}

@-webkit-keyframes fadeout {
    from {bottom: 20px; opacity: 1;} 
    to {bottom: 0; opacity: 0;}
    
}

@keyframes fadeout {
    from {bottom: 20px; opacity: 1;}
    to {bottom: 0; opacity: 0;}
}

JavaScript

var x = document.getElementById("snackbar");
    x.className = "show";
     setTimeout(function(){ 
       x.className = x.className.replace("show", "hide"); 
      }, 2000);