JSFiddle - React, Tailwind, and code Playground

by luka kupunia

HTML

<div class="box"></div>

CSS

body {
  margin: 0;
}
div.box {
  width: 100%;
  height: 400px;
  background: rgb(21,32,41);
  animation: load 1s cubic-bezier(0, 0, 0.11, 1) forwards;
}
@keyframes load {
  from {
      -webkit-clip-path: polygon(0 0, 100% 0, 100% 20%, 0 0);
clip-path: polygon(0 0, 100% 0, 100% 20%, 0 0);
  }
  to {
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 80%);
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 80%);
  }
}