JSFiddle - React, Tailwind, and code Playground

by Brenton Strine

HTML

<div class="container">
<img src="https://svgsilh.com/svg/44845.svg" class="dino predator left">

<img src="https://svgsilh.com/svg/45894.svg" class="dino">
<img src="https://svgsilh.com/svg/45894.svg" class="dino">
<img src="https://svgsilh.com/svg/45894.svg" class="dino">

</div>
<marquee direction="right">
<img src="https://media.giphy.com/media/AP9VpWsOjpkDm/giphy-downsized.gif" class="runningDinoGif">
</marquee>
<!-- https://giphy.com/gifs/raptors-ZPmdDAXANDhQc/undefined -->


</div>

CSS

img {
   width: 50px;
  height: 50px;
}
.container {
  display: grid;
  grid-template-columns: 10fr 1fr 1fr 1fr;
  align-items: end;
  background: red;
}
.left {
  transform: scaleX(-1);
}
.dino {
  position: relative;
    top: 7px;
}
.dino.small {
  top: 15px;
}
.dino.predator {
  position: static;
}

.predator {
  justify-self: left;
  width: 150px;
  height: 150px;
  
}
.small {
  width: 40px;
  height: 40px;
  justify-self: end;
}
marquee {
  background: #0000ff21;
}
.runningDinoGif {
  height: 75px;
  position: relative;
  bottom: -14px;
}