JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">
    <a class="hotspot-1">
         <span>This is text</span>
    </a>
    <a class="hotspot-2">
         <span>This is text</span>
    </a>
    <a class="hotspot-3">
         <span>This is text</span>
    </a>
</div>

CSS

#container {
    position: relative;
    height: 500px;
    background: #eee;
}

span {
    color: #333;
	position: absolute;
	font-size: 15px;  // I WOULD LIKE ALL THE FONT TO BE THE SAME SIZE
	width: 54px;
	height: 25px;
	left: 0;
	top: 0;
	bottom: 0;
	right: 0;
	margin: auto;
}

.hotspot-1 {
    background: #ccc;
    width: 23%;
	height: 14%;
    position: absolute;
	left: 19%;
	top: 13%;
	transform: skew(70deg,-19deg);
	-ms-transform: skew(70deg,-19deg);
	-webkit-transform: skew(70deg,-19deg);
}

.hotspot-1 span {
    transform: skew(-70deg, 19deg);
	-ms-transform: skew(-70deg, 19deg);
	-webkit-transform: skew(-70deg, 19deg);
}

.hotspot-2 {
    background: #ccc;
 	width: 12%;
	height: 4%;
    position: absolute;
	left: 63%;
	top: 27%;
	transform: skew(67deg,-16deg);
    -ms-transform: skew(67deg,-16deg);
	-webkit-transform: skew(67deg,-16deg);
}

.hotspot-2 span {
    transform: skew(-67deg, 16deg);
    -ms-transform: skew(-67deg, 16deg);
	-webkit-transform: skew(-67deg, 16deg);
}

.hotspot-3 {
    background: #ccc;
	width: 5%;
	height: 14%;
    position: absolute;
	left: 44%;
	top: 38%;
	transform: skew(63deg,-42deg);
	-ms-transform: skew(63deg,-42deg);
	-webkit-transform: skew(63deg,-42deg);    
}

.hotspot-3 span {
    transform: skew(-63deg, 42deg);
    -ms-transform: skew(-63deg, 42deg);
    -webkit-transform: skew(-63deg, 42deg);  
}