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">

<div class="container">

  <p>
    An example demonstrating the use of the
    <code>&lt;input type="color"&gt;</code> control.
  </p>

  <label for="color-picker">Color:</label>
  <input type="color" value="#ff0000" id="color-picker" />

  <p>
    Watch the paragraph colors change when you adjust the color picker. As you
    make changes in the color picker, the first paragraph's color changes, as a
    preview (this uses the <code>input</code> event). When you close the color
    picker, the <code>change</code> event fires, and we detect that to change
    every paragraph to the selected color.
  </p>

</div>

CSS

html,body {
  color: #454545;
}

.container {
  margin-top: 5% !important;
}

JavaScript

const defaultColor = '#0000ff';
const colorPicker = document.querySelector('#color-picker');
colorPicker.value = defaultColor;
colorPicker.addEventListener('input', updateFirst);
colorPicker.addEventListener('change', updateAll);
colorPicker.select();

function updateFirst(event) {
  const p = document.querySelector('p');
  if (p) {
    p.style.color = event.target.value;
  }
}

function updateAll(event) {
  document.querySelectorAll('p').forEach((p) => {
    p.style.color = event.target.value;
  });
}