JSFiddle - React, Tailwind, and code Playground

by von

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Editor</title>
    <style>
      code {
        background-color: dimgray;
        padding: 50px;
        margin: 10px;
        border-radius: 5px;
        color: white;
        display: block;
      }
      #copy-code-div {
        position: relative;
      }
      #copyBtn {
        position: absolute;
        right: 15px;
        top: 10px;
        background-color: wheat;
        outline: 0;
        border: 0;
        box-shadow: 0 0 0 black;
      }
    </style>
  </head>
  <body>
    <div id="root">
      <main>
        <div class="gallery">
          <figure>
            <span class="image-span">
              <img
                src="https://source.unsplash.com/random/1920x1080"
                alt="Landscape"
                class="image"
              />
            </span>

            <figcation>Landscape</figcation>
          </figure>
        </div>
        <div class="mid-div"></div>
        <div class="modal hide">
          <div class="modal-box">
            <span class="close">&times;</span>
            <img src="" alt="" class="modal-image" />
          </div>
        </div>
        <style>
          html {
            scroll-behavior: smooth;
          }

          main *,
          main *::after,
          main *::before {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
          }

          .gallery {
            display: flex;
          }

          figure {
            width: 100px;
            cursor: pointer;
          }

          figure .image {
            width: 100px;
            height: 100px;
            object-fit: cover;
            display: block;
            pointer-events: none;
          }

          .image-span {
            position: relative;
            display: block;
            pointer-events: none;
          }

         ...