JSFiddle - React, Tailwind, and code Playground

by Alexander Zonov

HTML

<div class="wrapper">
    <span>1</span>
</div>

CSS

.wrapper {
	display: inline-block;
	position: absolute;
	width: 35%;
	padding-bottom: 35%;
	font-size: 1rem;
	
	background-size: 85% auto !important;
	background-position: center !important;
	background: gold;
}

.wrapper span {
    position: absolute;
	width: 35%;
	height: 35%;
	text-align: center;
	
	border-radius: 50%;
	color: white;
	background: green;
display: block;
top: 0;
bottom:0;
left:0;
right:0;
margin: auto;
}