JSFiddle - React, Tailwind, and code Playground

HTML

<!doctype html>
<html lang="fr">
<meta charset="UTF-8">
<title>Pseudo radar</title>

<head>
<style> 
.message {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  color: red;
  float: left;
  margin-top: 20px;
}

.port {
  background-color: black;
  border-radius: 8px;
  height: 150px;
  width: 100%;
  overflow: hidden;
}

 .radar {
  background-color: green;
  background-image: linear-gradient (to right, rgba (0,0,0,0.9) 25%, rgba (0,0,0,0.1) 50%, rgba (0,0,0,0.9) 75%);
  color: white;
  height: 100%;
  width: 3%;
  -webkit-animation: 2.5s linear 0s infinite alternate move-eye;
          /* animation: 2.5s linear 0s infinite alternate move-eye; */
} 

  -webkit-@keyframes move-eye {from {margin-left: -20%;} to {margin-left: 120%;}}
          @keyframes move-eye {from {margin-left: -20%;} to {margin-left: 120%;}} 


 .spot, .spot1   {
  display: inline-block; 
  height: 3px;
  width: 3px;
  border-radius: 50%;
  position: relative;
  top: -40px; 
  left: 10px; 
  background-color: black;
} 

 .spot1 {
  position: relative;
  top: -30px;
  left: 10px;
} 



</style>
</head>

<body>
  <div class="port">
    <div class="message">HARMO</div>
    <div class="radar"> </div>
  </div>
         
  <div style="text-align: center"> 
    <span class="spot"></span> 
    <span class="spot1"></span>
  </div>
        
 
</body>
</html>