JSFiddle - React, Tailwind, and code Playground

by Peter Aad

HTML

<div class="compass-wrap">
    <img src="http://placehold.it/350x450"> <span class="compass-label north-label"><span>NORTH</span></span> <span class="compass-label south-label">
<span>SOUTH</span>
</span> <span class="compass-label east-label">
        <span>EAST</span>
</span> <span class="compass-label west-label"><span>WEST</span></span>
</div>

CSS

.compass-wrap {
    position:relative;
    display:inline-block;
}
.compass-wrap img {
    display:block;
}
.compass-label {
    position:absolute;
    text-align:center;
}
.north-label {
    top:0;
    left:50%;
}
.south-label {
    bottom:0;
    left:50%;
}
.east-label {
    right:0;
    top:50%;
}
.west-label {
    left:0;
    top:50%;
}
.compass-label > span {
    position:relative;
    left:-50%;
    top:-10px;
}
.compass-label.east-label > span {
    left:auto;
    right:-50%
}
.compass-label.south-label > span {
    top:auto;
    bottom:-10px;
}