JSFiddle - React, Tailwind, and code Playground

by Slava

HTML

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  </head>
  <body>
    <p>This is some sample content. The expandable images are below:</p>
    <div popover id="pop" class="full-image">
      <button popovertarget="pop" popovertargetaction="hide">
        <img src="https://picsum.photos/800/600" />
      </button>
    </div>

    <button popovertarget="pop" class="thumbnail">
      <img src="https://picsum.photos/800/600" alt="Expandable Image 1" />
    </button>
  </body>
</html>

CSS

body {
  padding: 20px;
	overflow: hidden;
}

.thumbnail {
  display: inline-block;
  position: relative;
  margin: 10px;
  cursor: zoom-in;
	
  & img {
		display: block;
		width: 200px;
		height: auto;
		border-radius: 10px;
	}
}

.full-image {
  position: fixed;
  width: 100vw;
  height: 100vh;
	object-fit: contain;
  align-items: center;
  justify-content: center;
	padding: 20px;
	
  border-radius: 20px;
	border: 10px solid red;
	overflow: scroll;
	
	&:popover-open {
		display: flex;
	}
	
	& button {
		flex-grow: 1;
		flex-shrink: 1;
	}
}