JSFiddle - React, Tailwind, and code Playground

by Imri Paloja

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css">
<div class="container">

  <ul class="top-nav-menu-list">

    <li id="ThemeSwitcher-holder">

      <i class="fa-solid fa-moon" id="ThemeSwitcher"></i>

    </li>

  </ul>

  <form id="subscription-form" action="/843f6/test.php" method="POST" class="fancybox-content" style="">
    <h1>BookStack</h1>
    <p>Please fill out the form for BookStack Support options</p>
    <label for="fname">First name:</label>
    <input type="text" id="fname" name="fname" placeholder="John" required=""><br>
    <label for="lname">Last name:</label>
    <input type="text" id="lname" name="lname" placeholder="Doe" required=""><br>
    <label for="email">E-mail:</label>
    <input type="email" id="email" name="email" placeholder="[email protected]" required=""><br>
    <label for="organization">Organization (optionel):</label>
    <input type="text" id="organization" name="organization" value="" placeholder="Company EU"><br>
    <input type="hidden" id="application" name="application" value="bookstack"><br>
    <label for="subscription">Subscription:</label>
    <select name="subscription" id="subscription" required="">
      <option value="basic" selected="">Basic € 100 p/m</option>
      <option value="standard">Standard € 200 p/m</option>
      <option value="plus">Plus € 400 p/m</option>
    </select><br>
    <br>
    <label for="hardware">Choose hardware level:</label>
    <select name="hwl" id="hwl" required="">
      <option value="1">vCPU: 2, RAM: 4 GB, Traffic: 1 TB, Price: € 6.44</option>
      <option value="2">vCPU: 2, RAM: 2 GB, Traffic: 5 TB, Price: € 6.84</option>
      <option value="3">vCPU: 4, RAM: 8 GB, Traffic: 5 TB, Price: € 10.70</option>
      <option...

CSS

:root {
  --background-color: #F9F9F9;
  --text-color: #454545;
  --border-color: #CCCCCC;

  --object-background-color: #EEEEEE;

  --nav-menu-color: rgb(216, 212, 207) !important;
  --nav-menu-background-color: rgb(135, 16, 7) !important;
  --box-shadow: rgba(0, 0, 0, 0.75);

  --border-radius: 5px;

  --link-color: #3465A4;
  --section-background-color: #FFFFFF;


  /* Additive Color Model (RGB) */

  --color-red: red;
  --color-green: green;
  --color-blue: blue;

  /*
        Subtractive Color Model (CMY/CMYK)
    */

  --color-cyan: cyan;
  --color-magenta: magenta;
  --color-yellow: yellow;
  --color-black: black;

}

/* Dark theme variables */

[data-theme="dark"] {
  --text-color: rgb(188, 183, 174);
  --background-color: rgb(27, 30, 31);
  --border-color: rgb(62, 68, 70);
  --object-background-color: rgb(34, 36, 38);

  --nav-menu-color: rgb(205, 200, 194) !important;
  --nav-menu-background-color: rgb(108, 13, 6) !important;

  --box-shadow: rgba(0, 0, 0, 0.75);

  --section-background-color: rgb(24, 26, 27);

  --link-color: rgb(118, 167, 212);

}

body {
  background-color: var(--background-color);
  color: var(--text-color);
}

.container {
  margin-top: 5%;
}

#subscription-form {
  margin: 1%;
  padding: 20px 30px;
}


/*
    subscription-form
*/
#subscription-form,
#subscription-form input,
#subscription-form label,
#subscription-form select {
  background: var(--background-color);
  color: var(--text-color) !important;
  border-radius: var(--border-radius);
}

#subscription-form {
  border: 1px solid var(--border-color);
  min-width: 25%;
  box-shadow: 1px 1px 1px var(--box-shadow);
}

#subscription-form input,
#subscription-form select {
  background: var(--object-background-color) !important;
  padding: 0 3px;
  border: 1px solid var(--border-color);
  width: 100%;
}

#subscription-form input:hover,
#subscription-form select:hover {
  box-shadow: 1px 1px 1px var(--box-shadow);
}

#subscription-form input:active,
#subscription-form...

JavaScript

// Function to switch theme
function switchTheme() {

  const ThemeSwitcher = document.getElementById("ThemeSwitcher");
  const savedTheme = localStorage.getItem('theme');

  if (savedTheme === 'dark') {
    document.documentElement.setAttribute('data-theme', 'light');
    localStorage.setItem('theme', 'light'); // Save theme preference to localStorage

    ThemeSwitcher.setAttribute("class", "fa-solid fa-moon");

  } else {

    document.documentElement.setAttribute('data-theme', 'dark');
    localStorage.setItem('theme', 'dark'); // Save theme preference to localStorage

    ThemeSwitcher.setAttribute('class', 'fa-solid fa-sun');

  }
}

// Load theme preference from localStorage
function loadTheme() {
  const savedTheme = localStorage.getItem('theme');
  if (savedTheme) {
    document.documentElement.setAttribute('data-theme', savedTheme);
  } else {
    document.documentElement.setAttribute('data-theme', 'light'); // Default theme
  }
}



// Apply theme on page load
document.addEventListener('DOMContentLoaded', loadTheme);

document.getElementById('ThemeSwitcher-holder').addEventListener('click', function() {
  switchTheme();
});

const subscriptions = ['subscription-basic', 'subscription-standard', 'subscription-plus'];

for (let subscriptionName of subscriptions) {

  document.getElementById(subscriptionName).addEventListener('click', function() {

    const element = document.getElementById(subscriptionName);

    const app = element.getAttribute('data-app');

    subscription(subscriptionName, app);

  });
}