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>
    <form action="#">
      <div>
        <label for="nImages">Number of Images</label>
        <input type="number" name="nImages" value="1" />
      </div>
      <div>
        <label for="imageWidth">Width of the Image (px)</label>
        <input type="number" name="imageWidth" value="200" />
      </div>
      <div>
        <label for="imageHeight">Height of the Image (px)</label>
        <input type="number" name="imageHeight" value="200" />
      </div>
      <div>
        <label for="showTitle">Show Title</label>
        <input type="checkbox" name="showTitle" />
      </div>
      <div>
        <label for="showDescription">Show Description</label>
        <input type="checkbox" name="showDescription" />
      </div>
      <div>
        <label for="editable">Editable</label>
        <input type="checkbox" name="editable" />
      </div>
    </form>
    <div id="style">
      <link
        rel="stylesheet"
       ...