JSFiddle - React, Tailwind, and code Playground

by Keith Jeter

HTML

<h1>CSS Pulse Effect</h1>

<!--<div class="blobs-container">-->
<!-- 	<div class="blob white"></div>
	<div class="blob red"></div>
	<div class="blob orange"></div>
	<div class="blob yellow"></div> -->
	<div class="bc_rad blue"></div>
<!-- 	<div class="blob green"></div>
	<div class="blob purple"></div>
	<div class="blob"></div> -->
<!--</div>-->

<footer>
	<p>
		Created with <i class="fa fa-heart"></i> by
		<a target="_blank" href="https://florin-pop.com">Florin Pop</a>
		- Read how I created this
		<a target="_blank" href="https://www.florin-pop.com/blog/2019/03/css-pulse-effect/">here</a> - 
		Other projects on
		<a target="_blank" href="https://github.com/florinpop17/work-journal/">Github</a>
	</p>
</footer>

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;
}

/* .blobs-container {
  display: flex;
} */

.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;
}

/* @keyframes pulse-black {
  0% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.7);
  }
  
  70% {
    transform: scale(1);
    box-shadow: 0 0 0 10px rgba(0, 0, 0, 0);
  }
  
  100% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
  }
}

.blob.white {
  background: white;
  box-shadow: 0 0 0 0 rgba(255, 255, 255, 1);
  animation: pulse-white 2s infinite;
}

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

.blob.red {
  background: rgba(255, 82, 82, 1);
  box-shadow: 0 0 0 0 rgba(255, 82, 82, 1);
  animation: pulse-red 2s infinite;
}

@keyframes pulse-red {
  0% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(255, 82, 82, 0.7);
  }
  
  70% {
    transform: scale(1);
    box-shadow: 0 0 0 10px rgba(255, 82, 82, 0);
  }
  
  100% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(255, 82, 82, 0);
  }
}

.blob.orange {
  background: rgba(255, 121, 63, 1);
  box-shadow: 0 0 0 0 rgba(255, 121, 63, 1);
  animation: pulse-orange 2s infinite;
}

@keyframes pulse-orange {
  0% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(255, 121, 63, 0.7);
  }
  
  70% {
   ...