JSFiddle - React, Tailwind, and code Playground

by Lena R

HTML

<div class="page-header__scroll"></div>

CSS

.page-header__scroll {
    width: 1.16667em;
    height: 1.75em;
    border: 2px solid currentcolor;
    border-radius: 0.58333em;
    display: inline-block;
    vertical-align: middle;
    margin: 1.5rem 0 0;
}

.page-header__scroll::before {
    content: '';
    display: block;
    margin: 0.375em auto 0;
    width: 0.25em;
    height: 0.25em;
    border-radius: 0.125em;
    background: currentcolor;
    animation: scrollIndicator 1.333s linear infinite;
    animation-duration: 1.333s;
    animation-timing-function: linear;
    animation-delay: 0s;
    animation-iteration-count: infinite;
    animation-direction: normal;
    animation-fill-mode: none;
    animation-play-state: running;
    animation-name: scrollIndicator;
}
*:before, *:after {
    box-sizing: inherit;
}

@media (pointer:coarse){.page-header__scroll::before{margin-top:0.66667em;animation:scrollIndicatorReverse 1.333s linear infinite;}