JSFiddle - React, Tailwind, and code Playground

by Korah Babu Varghese

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="arrow_block_top">
  <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="50" height="80" viewBox="0 0 32 32" class="scroller1 pull-left">
    <path d="M16 31l15-15h-9v-16h-12v16h-9z" fill="transparent" stroke="#ccc" stroke-width="3"></path>
  </svg>
  <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="50" height="80" viewBox="0 0 32 32" class="scroller1 pull-right">
<path d="M16 31l15-15h-9v-16h-12v16h-9z" fill="transparent" stroke="#ccc" stroke-width="3"></path>
</svg>
</div>
<div class="arrow_block_top">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="50" height="80" viewBox="0 0 32 32" class="scroller1 pull-left">
<path d="M16 1l-15 15h9v16h12v-16h9z" fill="transparent" stroke="#ccc" stroke-width="3"></path>
</svg>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="50" height="80" viewBox="0 0 32 32" class="scroller1 pull-right">
<path d="M16 1l-15 15h9v16h12v-16h9z" fill="transparent" stroke="#ccc" stroke-width="3"></path>
</svg>
</div>

<div class="arrow_block_bottom">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="50" height="80" viewBox="0 0 32 32" class="scroller2">
<path d="M1 16l15 15v-9h14v-12h-18v-9z" fill="transparent" stroke="#ccc" stroke-width="3"></path>
</svg>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="50" height="80" viewBox="0 0 32 32" class="scroller2">
<path d="M1 16l15 15v-9h14v-12h-18v-9z" fill="transparent" stroke="#ccc" stroke-width="3"></path>
</svg>
</div>

<div class="arrow_block_bottom">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="50"...

CSS

.arrow_block_top{
  width:130px;
}
.arrow_block_bottom{
  width:100px;
}
.scroller1{
  -webkit-animation: updown 1s infinite;
  -moz-animation: updown 1s infinite;
  -o-animation: updown 1s infinite;
  animation: updown 1s infinite;
}
.scroller2{
  -webkit-animation: leftright 1s infinite;
  -moz-animation: leftright 1s infinite;
  -o-animation: leftright 1s infinite;
  animation: leftright 1s infinite;
}
@-webkit-keyframes updown {
    0% {
        -webkit-transform: translate(0, 0);
        transform: translate(0, 0)
    }
    50% {
        -webkit-transform: translate(0, 5px);
        transform: translate(0, 5px);
        opacity:0;
    }
    100% {
        -webkit-transform: translate(0, 0);
        transform: translate(0, 0)
    }
}


@keyframes updown {
    0% {
        -webkit-transform: translate(0, 0);
        transform: translate(0, 0)
    }
    50% {
        -webkit-transform: translate(0, 5px);
        transform: translate(0, 5px);
        opacity:0;
    }
    100% {
        -webkit-transform: translate(0, 0);
        transform: translate(0, 0)
    }
}
@-webkit-keyframes leftright {
    0% {
        -webkit-transform: translate(0, 0);
        transform: translate(0, 0)
    }
    50% {
        -webkit-transform: translate(5px, 0);
        transform: translate(5px, 0);
        opacity:0;
    }
    100% {
        -webkit-transform: translate(0, 0);
        transform: translate(0, 0)
    }
}


@keyframes leftright {
    0% {
        -webkit-transform: translate(0, 0);
        transform: translate(0, 0)
    }
    50% {
        -webkit-transform: translate(5px, 0);
        transform: translate(5px, 0);
        opacity:0;
    }
    100% {
        -webkit-transform: translate(0, 0);
        transform: translate(0, 0)
    }
}