JSFiddle - React, Tailwind, and code Playground

by Keith Jeter

HTML

<h1>CSS Pulse Effect</h1>

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

CSS

@import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro');

* {
	box-sizing: border-box;
}

body {
	background-image: linear-gradient(to bottom, #cfd9df 0%, #e2ebf0 100%);
	font-family: 'Source Sans Pro', sans-serif;
	margin: 0;
	height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
}

.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(52, 172, 224, 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);
	}
}