JSFiddle - React, Tailwind, and code Playground

by phloe

HTML

<span class="live-label">Live</span>

CSS

.live-label {
	box-sizing: border-box;
	font: 12px/1 Arial;
	text-transform: uppercase;
	white-space: nowrap;
	background-color: cyan;
	color: #000;
	padding: 2px 19px 2px 7px;
	position: relative;
	border-radius: 1px;
	z-index: 2;
	display: inline-block;
}

.live-label:after {
	box-sizing: border-box;
	display: block;
	content: " ";
	width: 8px;
	height: 8px;
	border-radius: 50%;
	color: inherit;
	background-color: currentColor;
	background-clip: padding-box;
	border: 2px solid transparent;
	box-shadow: 0 0 0 1px currentColor;
	position: absolute;
	bottom: 4px;
	right: 4px;
	animation: live-label-pulsate 0.75s infinite ease both;
	-webkit-animation: live-label-pulsate 0.75s infinite ease both;
}

@keyframes live-label-pulsate {
	0% { background-color: currentColor; }
	50% { background-color: transparent; }
	100% { background-color: currentColor; }
}
@-webkit-keyframes live-label-pulsate {
	0% { background-color: currentColor; }
	50% { background-color: transparent; }
	100% { background-color: currentColor; }
}