JSFiddle - React, Tailwind, and code Playground

by luka kupunia

HTML

<div class="box"></div>
<div class="box"></div>
<img src="https://i7.pngguru.com/preview/535/281/124/jagermeister-jagerbomb-cocktail-tequila-sambuca-shot-drink.jpg" alt="">

CSS

body {
    margin: 0;
    display: flex;
    align-items: center;
    width: 100%;
    height: 100vh;
    justify-content: center;
}
.box {
    width: 100%;
    height: 50vh;
    background: black;
    position: absolute;
    left:0;
    top:0;
    transform-origin: top;
    animation: a 2s both 1s;
}
.box:nth-child(2){
    bottom: 0;
    top: unset;
    transform-origin: bottom;
}
@keyframes a {
    100%{
        transform: scaleY(0);
    }
}
img {
    max-width: 100%;
    /* height: auto; */
}