JSFiddle - React, Tailwind, and code Playground

by Fansublogger

HTML

<div class="textwrapper1">
<div class="textanimasi7">Hilman</div>
<div class="textanimasi8">|</div>
<div class="textanimasi9">Scaning...</div>
</div>

CSS

.textanimasi7, .textanimasi8{
text-align:center;
letter-spacing:-.08em;
color: rgba(0, 0, 255, 0.3 );
font:700 9.4em helvetica, sans-serif;
height: 100px;top:0px;position:absolute;
text-shadow: 0 1px 1px transparent;
}
.textanimasi8 {
-webkit-animation:text8 3s linear infinite;
-moz-animation:text8 3s linear infinite;}

.textwrapper1{position:relative;height: 100px;}

@-webkit-keyframes text8 {
0% {margin-left:0px;}
50% {margin-left:530px;}
100% {margin-left:0px;}
}
@-moz-keyframes text8 {
0% {margin-left:0px;}
50% {margin-left:530px;}
100% {margin-left:0px;}
}

.textanimasi9 {
text-align: center;
letter-spacing: 15px;
color: rgba(0, 255, 0, 0.5 );
font: 700 20px helvetica, sans-serif;
bottom: -20px;
position: absolute;
text-shadow: 0 1px 1px transparent;
width: 100%;
-webkit-animation:text9 2s linear infinite;
-moz-animation:text9 2s linear infinite;
}
@-webkit-keyframes text9 {
0% {color: rgba(0, 255, 0, 0 );}
50% {color: rgba(0, 255, 0, 1 );}
100% {color: rgba(0, 255, 0, 0 );}
}