JSFiddle - React, Tailwind, and code Playground

HTML

<div class="row">
  <img class="zoom" src="https://cdn.shopify.com/s/files/1/0496/1029/files/Freesample.svg?5153" />
  <img class="slide-bottom" src="https://cdn.shopify.com/s/files/1/0496/1029/files/Freesample.svg?5153" />
</div>

CSS

.slide-bottom {
	-webkit-animation: slide-bottom 1s;
	        animation: slide-bottom 1s;
}

.zoom {
  -webkit-animation: zoom-in 1s;
	        animation: zoom-in 1s;
}


/* ----------------------------------------------
 * Generated by Animista on 2020-11-7 16:22:35
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation slide-bottom
 * ----------------------------------------
 */
 @-webkit-keyframes slide-bottom {
  0% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  100% {
    -webkit-transform: translateY(150px);
            transform: translateY(150px);
  }
}
@keyframes slide-bottom {
  0% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  100% {
    -webkit-transform: translateY(150px);
            transform: translateY(150px);
  }
}

/**
 * ----------------------------------------
 * animation zoom-in
 * ----------------------------------------
 */
 @-webkit-keyframes zoom-in {
  0% {
    -webkit-transform: scale(0.5);
            transform: scale(0.5);
  }
  100% {
    -webkit-transform: scale(1.0);
            transform: scale(1.0);
  }
}
@keyframes zoom-in {
  0% {
    -webkit-transform: scale(0.5);
            transform: scale(0.5);
  }
  100% {
    -webkit-transform: scale(1.0);
            transform: scale(1.0);
  }
}

.row {
  float: left;
}

img {
  display: inline-block;
}