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 {
	overflow-y: hidden;
	max-height: 500px; /* approximate max height */

	transition-property: all;
	transition-duration: .5s;
	transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
}

#snackbar.hide {
  max-height: 0;
}

JavaScript

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