JSFiddle - React, Tailwind, and code Playground

by ckissi

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Tailwind Starter Template</title>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, shrink-to-fit=no"
    />    
  </head>
  <body>
    <div class="w-full min-h-screen pt-16">
      <div
        style="width: 1200px; height: 1200px"
        class="flex flex-col justify-center pt-24 mx-auto my-auto bg-gray-50"
        id="palette"
      >
        <div
          class="flex flex-col self-center p-4 pt-12 bg-white shadow-2xl rounded-3xl"
          style="width: 1000px"
        >
          <div class="flex justify-center mb-8 -m-24">
            <div
              class="inline-block p-3 mx-auto font-semibold text-center bg-white rounded-full shadow-md"
            >
              <svg
                xmlns="http://www.w3.org/2000/svg"
                class="icon icon-tabler icon-tabler-palette"
                width="88"
                height="88"
                viewBox="0 0 24 24"
                stroke-width="1.5"
                stroke="#000000"
                fill="none"
                stroke-linecap="round"
                stroke-linejoin="round"
              >
                <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                <path
                  d="M12 21a9 9 0 1 1 0 -18a9 8 0 0 1 9 8a4.5 4 0 0 1 -4.5 4h-2.5a2 2 0 0 0 -1 3.75a1.3 1.3 0 0 1 -1 2.25"
                />
                <circle cx="7.5" cy="10.5" r=".5" fill="currentColor" />
                <circle cx="12" cy="7.5" r=".5" fill="currentColor" />
                <circle cx="16.5" cy="10.5" r=".5" fill="currentColor" />
              </svg>
            </div>
          </div>
          <div
            class="flex self-center justify-center w-full space-x-4"
            id="container"
          ></div>
        </div>
        <div class="flex justify-center mt-16">
          <div
            class="p-4 mx-auto text-5xl font-semibold tracking-widest...

CSS

/*! modern-normalize v1.0.0 | MIT License | https://github.com/sindresorhus/modern-normalize */:root{-moz-tab-size:4;-o-tab-size:4;tab-size:4}html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji}hr{height:0;color:inherit}abbr[title]{-webkit-text-decoration:underline dotted;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,Consolas,Liberation Mono,Menlo,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,select{text-transform:none}button{-webkit-appearance:button}legend{padding:0}progress{vertical-align:baseline}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}button{background-color:transparent;background-image:none}button:focus{outline:1px dotted;outline:5px auto -webkit-focus-ring-color}fieldset,ol,ul{margin:0;padding:0}ol,ul{list-style:none}html{font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;line-height:1.5}body{font-family:inherit;line-height:inherit}*,:after,:before{box-sizing:border-box;border:0 solid...

JavaScript

var colorcol = `
      <div class="flex flex-col p-2 columns">
              <span
                class="self-center my-3 text-3xl font-semibold text-gray-800"
                >clr</span
              >
              <div
                class="self-center w-full h-56 px-4 rounded-3xl"
                style="background-color: clr; height: 500px"
              ></div></div>
      `;
      var container = document.getElementById("container");
      var colors = getParameterByName("colors");
      colors = colors.split(",");
      console.log(colors);
      var columns = "w-1/" + colors.length;
      var content = "";
      var colorscol = "";

      for (let color of colors) {
        var newcolorcol = colorcol.replace("columns", columns);
        newcolorcol = newcolorcol.replace(/clr/g, "#" + color);
        content += newcolorcol;
      }
      container.innerHTML = content;

      // Helpers
      function getParameterByName(name, url = window.location.href) {
        name = name.replace(/[\[\]]/g, "\\$&");
        var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
          results = regex.exec(url);
        if (!results) return null;
        if (!results[2]) return "";
        return decodeURIComponent(results[2].replace(/\+/g, " "));
      }