JSFiddle - React, Tailwind, and code Playground
HTML
<div class="line_container">
<div class="glass-line line-1">💩</div>
<div class="line_bottom"></div>
</div>
CSS
.line-container {
display: flex;
position: fixed;
}
.line_bottom {
width: 100%;
height: 11px;
background-color: rgb(255, 0, 0);
}
.glass-line {
width: fit-content;
position: relative;
font-size: 60px;
animation: tyda_suda 5s infinite alternate;
background-color: rgb(55, 0, 0, 0.5);
}
@keyframes tyda_suda {
from {
left: 0;
}
to {
left: 90%;
}
}