JSFiddle - React, Tailwind, and code Playground

by Vladimir

HTML

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto+Flex:opsz,wght,XTRA,[email protected],400,323,854;8..144,400,468,750;8..144,400,603,649;8..144,700,468,750&display=swap" rel="stylesheet">
<div class="d2">Almost before we knew it, we had left the ground.</div>
<div class="d1">Almost before we knew it, we had left the ground.</div>

CSS

div {
  font-family: 'Roboto Flex', sans-serif;
  font-size: 48px;
  background:#fdd;
  padding:50px;
  transition: all 200ms ease;
   font-variation-settings: "opsz" 48, "slnt" 0, "GRAD" 0, "XTRA" 323, "YOPQ" 79, "YTAS" 854, "YTDE" -203, "YTFI" 738, "YTLC" 514, "YTUC" 712;
   min-height: 50px;
   
}
.d1 {
  animation: .5s linear 2s infinite alternate d1;
}
.d2 {
  animation: .5s linear 2s infinite alternate d2;
}
@keyframes d1 {
   0% {
     font-variation-settings: "opsz" 48, "slnt" 0, "GRAD" 0, "XTRA" 323, "YOPQ" 79, "YTAS" 649, "YTDE" -203, "YTFI" 738, "YTLC" 514, "YTUC" 712;
   }
   100% {
     font-variation-settings: "opsz" 48, "slnt" 0, "GRAD" 0, "XTRA" 603, "YOPQ" 79, "YTAS" 649, "YTDE" -203, "YTFI" 738, "YTLC" 514, "YTUC" 712;
   }
}
@keyframes d2 {
   0% {
     font-variation-settings: "opsz" 48, "slnt" 0, "GRAD" 0, "XTRA" 323, "YOPQ" 79, "YTAS" 854, "YTDE" -203, "YTFI" 738, "YTLC" 514, "YTUC" 712;
   }
   100% {
     font-variation-settings: "opsz" 48, "slnt" 0, "GRAD" 0, "XTRA" 323, "YOPQ" 79, "YTAS" 649, "YTDE" -203, "YTFI" 738, "YTLC" 514, "YTUC" 712;
   }
}