JSFiddle - React, Tailwind, and code Playground

by ckissi

HTML

<label class="glow-switch" data-css="
.glow-switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}

.glow-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.glow-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #333;
  transition: 0.4s;
  border-radius: 34px;
  border: 2px solid #666;
}

.glow-slider:before {
  position: absolute;
  content: '';
  height: 26px;
  width: 26px;
  left: 2px;
  bottom: 2px;
  background-color: white;
  transition: 0.4s;
  border-radius: 50%;
}

input:checked + .glow-slider {
  background-color: #222;
  border-color: #00ff00;
  box-shadow: 0 0 10px #00ff00,
              0 0 20px #00ff00,
              0 0 40px #00ff00;
}

input:checked + .glow-slider:before {
  transform: translateX(26px);
  background-color: #00ff00;
}

/* Animation */
@keyframes glow {
  0% { box-shadow: 0 0 10px #00ff00; }
  50% { box-shadow: 0 0 20px #00ff00; }
  100% { box-shadow: 0 0 10px #00ff00; }
}

input:checked + .glow-slider {
  animation: glow 1.5s infinite;
}">
    <input type="checkbox">
    <span class="glow-slider"></span>
</label>

<button id="openModal">Show Code</button>

<div id="modal" class="modal">
    <div class="modal-content">
        <span class="close">&times;</span>
        <h2>HTML Code</h2>
        <textarea id="htmlCode" rows="10" readonly></textarea>
        <button onclick="copyToClipboard('htmlCode')">Copy HTML</button>

        <h2>CSS Code</h2>
        <textarea id="cssCode" rows="10" readonly></textarea>
        <button onclick="copyToClipboard('cssCode')">Copy CSS</button>
    </div>
</div>

CSS

body {
    font-family: Arial, sans-serif;
}

.modal {
    display: none;
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgb(0,0,0);
    background-color: rgba(0,0,0,0.4);
}

.modal-content {
    background-color: #fefefe;
    margin: 15% auto;
    padding: 20px;
    border: 1px solid #888;
    width: 80%;
}

.close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}

textarea {
    width: 100%;
    margin-bottom: 10px;
}

button {
    margin-bottom: 20px;
}

JavaScript

document.getElementById("openModal").onclick = function() {
    const glowSwitch = document.querySelector('.glow-switch');

    // Get HTML code
    const htmlCode = glowSwitch.outerHTML;
    document.getElementById("htmlCode").value = htmlCode;

    // Get CSS code from the data attribute
    const cssCode = glowSwitch.getAttribute('data-css');
    document.getElementById("cssCode").value = cssCode;

    document.getElementById("modal").style.display = "block";
}

document.querySelector(".close").onclick = function() {
    document.getElementById("modal").style.display = "none";
}

window.onclick = function(event) {
    if (event.target == document.getElementById("modal")) {
        document.getElementById("modal").style.display = "none";
    }
}

function copyToClipboard(id) {
    const textarea = document.getElementById(id);
    textarea.select();
    document.execCommand("copy");
}