JSFiddle - React, Tailwind, and code Playground

by Nevear

HTML

<div id='box'>

</div>

CSS

body {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  background: #00ac69;
}

@keyframes animated-border {
  0% {
    box-shadow: 0 0 0 0 rgba(255,255,255,0.4);
  }
  100% {
     box-shadow: 0 0 0 20px rgba(255,255,255,0);
  }
}

#box {
  animation: animated-border 1.5s infinite;
  font-family: Arial;
  font-size: 18px;
  line-height: 30px;
  font-weight: bold;
  color: #00ac69;
  border: 2px solid;
  border-radius: 10px;
  padding: 15px;
}