JSFiddle - React, Tailwind, and code Playground

by velmurugansp

HTML

<div class="arrow">
    <div class="middle-line"></div>
    <div class="middle-square"></div>
    <div class="left-line"></div>
    <div class="right-line"></div>
</div>

CSS

body{
    background: #000;
}
.arrow{
    cursor: pointer;
    position: relative;
    height: 35px;    
    width: 36px;
    background: #000;
    -webkit-animation-name: scrollarrow;
    -webkit-animation-duration: 0.3s;
    -webkit-animation-delay: 0s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-direction: alternate;
    -webkit-animation-play-state: running;
    /* Standard syntax */
    animation-name: scrollarrow;
    animation-duration: 0.3s;
    animation-delay: 0s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-play-state: running;
}

.arrow .middle-line{
    background: #fff;
    position: absolute;
    left: 50%;
    top: 0;
    width: 1px;
    height: 100%;
}
.arrow .middle-square{
    background: #fff;
    position: absolute;
    left: 50%;
    bottom: 1px;
    height: 5px;
    width: 5px;
    margin-left: -2px;
    transform: rotate(45deg);
}
.arrow .left-line{
    background: #fff;
    position: absolute;
    left: 12px;
    bottom: -3px;
    height: 50%;
    width: 1px;
    transform: rotate(-45deg);
}
.arrow .right-line{
    background: #fff;
    position: absolute;
    width: 1px;
    transform: rotate(45deg);
    right: 11px;
    bottom: -3px;
    height: 50%;
}

/* Chrome, Safari, Opera */
@-webkit-keyframes scrollarrow {
    0% {
        margin-top: 0px;
    }
    50%{
        margin-top: 10px;
    }
    100%{
        margin-top: 20px;
    }
}

/* Standard syntax */
@keyframes scrollarrow {
    0% {
        margin-top: 0px;
    }
    50%{
        margin-top: 10px;
    }
    100%{
        margin-top: 20px;
    }
}