JSFiddle - React, Tailwind, and code Playground

by oduska

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.0.47/jquery.fancybox.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.0.47/jquery.fancybox.min.js"></script>
<div class="sunset">
    <a href="https://i.imgur.com/l5Qd4we.jpg" data-fancybox="gallery" class="area area-1">1</a>
    <a href="https://i.imgur.com/l5Qd4we.jpg" data-fancybox="gallery" class="area area-2">2</a>
    <a href="https://i.imgur.com/l5Qd4we.jpg" data-fancybox="gallery" class="area area-3">3</a>
</div>

SCSS

.sunset {
    width: 880px;
    height: 733px;
    background-image: url('https://i.imgur.com/l5Qd4we.jpg');
    background-size: contain;
    position: relative;
    
    .area {
        position: absolute;
        background-color: rgba(255, 255, 255, 0.5);
        display: block;
        width: 75px;
        height: 61px;
        
        &.area-1 {
            right: 158px;
            top: 238px;
        }
        
        &.area-2 {
            right: 261px;
            top: 410px;
        }
        
        &.area-3 {
            left: 197px;
            bottom: 112px;
        }
    }
}