JSFiddle - React, Tailwind, and code Playground

by Kocsten

HTML

<div class="situakop_ldtunsa">
  <div class="tsahil_pogdenub"><i></i></div>
  <div class="tsahil_pogdenub"><i></i></div>
  <div class="tsahil_pogdenub"><i></i></div>
  <div class="tsahil_pogdenub"><i></i></div>
  <div class="dulopanetam">ZORNET.RU</div>
</div>

CSS

body{
margin-top:25px;
background: #2a2a2f;
  background-size:cover;
}




.situakop_ldtunsa {
    position: relative;
    margin: 59px auto;
    width: 241px;
    height: 121px;
    overflow: hidden;
    color: #19ff0b;
}
.situakop_ldtunsa:hover {
    cursor: pointer;
    color: #77fff4;
    transition: all 0.5s;
}
.situakop_ldtunsa .tsahil_pogdenub {
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
}
.situakop_ldtunsa .tsahil_pogdenub:nth-of-type(1) {
  transform: rotate(0deg);
}
.situakop_ldtunsa .tsahil_pogdenub:nth-of-type(2) {
  transform: rotate(90deg);
  margin-left:60px;
}
.situakop_ldtunsa .tsahil_pogdenub:nth-of-type(3) {
  transform: rotate(180deg);
}
.situakop_ldtunsa .tsahil_pogdenub:nth-of-type(4) {
  transform: rotate(270deg);
  margin-left:-60px;
}
.situakop_ldtunsa .tsahil_pogdenub i {
  left: 0;
  top: 0;
  width: 200%;
  display: block;
  position: absolute;
  border-bottom: 5px dashed;
  animation: move 3.5s infinite linear;
}
.situakop_ldtunsa .dulopanetam {
    width: 241px;
    line-height: 123px;
    display: block;
    text-align: center;
    position: absolute;
    font-size: 35px;
}

@keyframes move {
  from {
    transform: translateX(0%);
  }
  to {
    transform: translateX(-50%);
  }
}