JSFiddle - React, Tailwind, and code Playground

by kongallis

HTML

<div class="center-flex">
    <picture>
        <img id="revealImage" src="https://via.placeholder.com/250">
    </picture>
</div>

CSS

.center-flex {
    display: flex;
    justify-content: center;
}

picture {
    position: relative;
}

JavaScript

const picture = document.querySelector('picture');

const square = document.createElement('div');

square.style.height = '100px';
square.style.width = '100px';
square.style.zIndex = '2';
square.style.position = 'absolute';
square.style.backgroundColor = 'red';
square.style.top = 0;
picture.appendChild(square)