JSFiddle - React, Tailwind, and code Playground

by Keith Jeter

HTML

<div class="bc_rad blue">
	  
	</div>

CSS

.bc_rad {
	background: black;
	border-radius: 50%;
	box-shadow: 0 0 0 0 rgba(0, 0, 0, 1);
	margin: 10px;
	height: 40px;
	width: 40px;
	transform: scale(1);
	animation: pulse-black 2s infinite;
}

.bc_rad.blue {
	background: rgba(6, 76, 123, 1);
	box-shadow: 0 0 0 0 rgba(52, 172, 224, 1);
	animation: pulse-blue 2s infinite;
}

@keyframes pulse-blue {
	0% {
		transform: scale(0.95);
		box-shadow: 0 0 0 0 rgba(52, 172, 224, 0.7);
	}
	
	70% {
		transform: scale(1);
		box-shadow: 0 0 0 10px rgba(52, 172, 224, 0);
	}
	
	100% {
		transform: scale(0.95);
		box-shadow: 0 0 0 0 rgba(52, 172, 224, 0);
	}
}