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;
      }
      form {
        display: block;
        width: 50%;
        padding: 20px;
        border-radius: 5px;
        box-shadow: 0 0 5px dimgrey;
        margin: auto;
      }
      form div {
        display: grid;
        grid-template-columns: 1fr 1fr;
        padding: 10px;
      }
      input[type="checkbox"] {
        width: 16px !important;
      }
    </style>
  </head>
  <body>
    
    <div id="style">
      <link
        rel="stylesheet"
        href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
      />
      <style>
        html {
          scroll-behavior: smooth;
        }

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

        .gallery {
          display: grid;
          grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
          justify-items: center;
          grid-gap: 10px;
        }

        figure {
          width: 100%;
          cursor: pointer;
          margin: 10px;
          box-sizing: border-box;
        }

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

        .image-span {
          position: relative;
          display: block;
         ...