JSFiddle - React, Tailwind, and code Playground

by Ting-Yuan Chang

HTML

<div class='circle'>

</div>

CSS

body {
  background: black;
}
.circle {
  border-radius: 50%;
  border: 10px white solid;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  background: white;
  transform: translate(-50%, -50%);
  transition: all 0.5s;
}
.circle::before {
  content: "";
  border-radius: 50%;
  border: 10px white solid;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  background: white;
  transform: translate(-50%, -50%);
  transition: all 0.3s;
}

.circle.active{
  border: 3px white solid;
  width: 80px;
  background: transparent;
  height: 80px;
}

.circle.active::before {
  content: "";
  border: 30px white solid;
  opacity: 0;
  width: 160px;
  height: 160px;
}

JavaScript

document.querySelector('.circle').addEventListener('click', function() {
	if(this.classList.contains('active'))
  	this.classList.remove('active');
   else
   	this.classList.add('active');
})