JSFiddle - React, Tailwind, and code Playground

by dao13

HTML

<div class="stage">
    <div class="box bounce-1"></div>
</div>

CSS

body {
        font: 1em sans-serif;
        text-align: center;
    }
    .stage {
        display: flex;
        height: 330px;
        width: 100%;
    }
    .box {
        align-self: flex-end;
        animation-duration: 2s;
        animation-iteration-count: infinite;
        background-color: #F44336;
        height: 200px;
        margin: 0 auto 0 auto;
        transform-origin: bottom;
        width: 200px;
    }
    .bounce-1 {
        animation-name: bounce-1;
        animation-timing-function: linear;
    }
    @keyframes bounce-1 {
        0%   { transform: translateY(0); }
        50%  { transform: translateY(-100px); }
        100% { transform: translateY(0); }
    }