JSFiddle - React, Tailwind, and code Playground

by Abdul Ahmad

HTML

<div class='input'>
  <div class='cursor'>
  
  </div>
</div>
<input />

CSS

.input {
  padding: 10px; 
  background: white;  
  box-sizing: border-box;
  border: 1px solid #ccc;
}

.cursor {
  opacity: 1;
  margin: 3px;
  width: 0px; 
  height: 20px; 
  border: 1px solid black;
  background: #444;
  display: inline-block;
  animation: blink 1s infinite linear;
}

@keyframes blink {
    0% { opacity: 1; }
    33% { opacity: 0; }
    66% { opacity: 0; }
    100% { opacity: 1; }
}