JSFiddle - React, Tailwind, and code Playground

HTML

<i class="location">
	<i></i>
</i>

CSS

@-moz-keyframes location {
    0%   {
        width: 9px;
    	height: 9px;
    }
    50%  {
    	width: 17px;
    	height: 17px;
    }
    100%  {
        width: 26px;
        height: 26px;	
    }
}

.location {
	border: 1px solid rgba(0,168,255,.4);
	border-radius: 50%;
    position: absolute;
    display: block;
    width: 26px;
    height: 26px;
}

.location:hover,
.location:hover:after ,
.location:hover:before {
	border: 1px solid rgba(0,0,0,.6);
}

.location:hover > i {
	border: 1px solid rgba(0,0,0,1);
}

.location:after {
	border: 1px solid rgba(0,168,255,.4);
	position: absolute;
	border-radius: 50%;
	content: '';
	display: block;
	width: 17px;
    height: 17px;
    left: 50%; top: 50%;
    transform: translate(-50%, -50%);
}

.location:before {
	border: 1px solid rgba(0,168,255,.4);
	position: absolute;
	border-radius: 50%;
	content: '';
	display: block;
	width: 9px;
    height: 9px;
    left: 50%; top: 50%;
    transform: translate(-50%, -50%);
}

.location>i {
	border: 1px solid rgba(0,168,255,1);
	position: absolute;
	border-radius: 50%;
    display: block;
	width: 9px;
    height: 9px;
    left: 50%; top: 50%;
    transform: translate(-50%, -50%);
	-moz-animation-name: location;
    -moz-animation-duration: 800ms;
    -moz-animation-timing-function: ease-out;
    -moz-animation-delay: 500ms;
    -moz-animation-iteration-count: infinite;
    -moz-animation-direction: normal;
    -moz-animation-play-state: running;
}