JSFiddle - React, Tailwind, and code Playground

HTML

<div class='myname'></div>

CSS

.myname
{
color: white;
border: 1px solid gainsboro;
border: 1px solid rgba(0, 0, 0, 0.1);
text-transform:uppercase;
padding:3px;
width:700px;
text-align:center;
text-shadow:1px 1px white;
font-size:18px;
cursor:pointer;
-webkit-transition:all 4.4s;
-ms-transition:all 4.4s;
-moz-transition:all 4.4s;
-o-transition:all 4.4s;
transition:all 4.4s;
height: 100%;
background-color: #6188F5;
background-repeat: repeat-x;
background-position: 8px 0px;
background-size: 40px 20px;
background-image: -webkit-linear-gradient(315deg,transparent,transparent 33%,rgba(0, 0, 0, 0.12) 33%,rgba(0, 0, 0, 0.12) 66%,transparent 66%,transparent);
background-image: -moz-linear-gradient(315deg,transparent,transparent 33%,rgba(0, 0, 0, 0.12) 33%,rgba(0, 0, 0, 0.12) 66%,transparent 66%,transparent);
background-image: -o-linear-gradient(315deg,transparent,transparent 33%,rgba(0, 0, 0, 0.12) 33%,rgba(0, 0, 0, 0.12) 66%,transparent 66%,transparent);
background-image: linear-gradient(315deg,transparent,transparent 33%,rgba(0, 0, 0, 0.12) 33%,rgba(0, 0, 0, 0.12) 66%,transparent 66%,transparent);
-webkit-animation: pb 4.4s linear 0 infinite;
-ms-animation: pb 4.4s linear 0 infinite;
-o-animation: pb 4.4s linear 0 infinite;
-moz-animation: pb 4.4s linear 0 infinite;
}

@-webkit-keyframes pb { 0% { background-position:8px 0px; } 100% { background-position:120px 0; } }
@-ms-keyframes pb { 0% { background-position:10px 0px; } 100% { background-position:-100px 0; } }
@-moz-keyframes pb { 0% { background-position:10px 0px; } 100% { background-position:-100px 0; } }
@-o-keyframes pb { 0% { background-position:10px 0px; } 100% { background-position:-100px 0; } }