JSFiddle - React, Tailwind, and code Playground

HTML

<html>
<div id="ds">
<p>
1
</p>
</div>
</html>

CSS

#ds {
  position: relative;
  margin: none;
  text-align: center;
 width: 150px;
 height: 150px;
 border-radius: 50%;
 background: red;
transition-duration: 0.2s;
}
p{
  vertical-align: middle;
  font-weight: bold;
  font-size: 20px;
    position: relative;
    top: 40%;
}

JavaScript

var circle = document.querySelector('#ds');

circle.onclick = function(){circle.style.background = 'black';
setTimeout(anas, 300);};
var anas = function(){circle.style.background = 'red'};