JSFiddle - React, Tailwind, and code Playground

by stichoza

HTML

<div>
    <div class="hint-arrow"></div>
</div>

CSS

body {
    background: #000;
    color: #fff;
}

@keyframes scroll-hint {
    0% {
        bottom: 50px;
    }
    50% {
        bottom: 80px;   
    }
    100% {
        bottom: 50px;   
    }
}

.hint-arrow {
    position: fixed;
    bottom: 50px;
    left: 50%;
    margin-left: -32px;
    width: 64px;
    height: 64px;
    border: solid #fff;
    border-width: 0 0 4px 4px;
    transform: rotate(-45deg) skew(12deg, 12deg);
    animation: scroll-hint 1s infinite ease-in-out;
}