JSFiddle - React, Tailwind, and code Playground

by Owaiz Yusufi

HTML

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<div class="controls">
  <label for="fontsize">Font size:</label>
  <br>
  <input id="fontsize" type="range" name="fs" min="10" max="200" value="10" data-sizing="px">
  <br>
  <label for="fontcolor">Font Color:</label>
  <br>
  <input id="fontcolor" type="range" name="fc" min="0" max="25" value="0" data-sizing="px">
  <br>
  <label for="base">Base Color:</label>
  <br>
  <input id="base" type="color" name="base" value="#95c6c6">
</div>

<div class="firstclass">
  <h1 class="fh">Title</h1>
  <p class="fp">This is some Para</p>
</div>

<div class="secondclass">
  <h1 class="sh">Title</h1>
  <p class="sp">This is some Para</p>
</div>

CSS

.firstclass{ background-color:black;}
.secondclass {background-color:black;}
h1 {text-align:center;}
p {text-align:center;}

.fh {
  color:white;
  font-size:35px;
}
.fp {
  color:white;
  font-size:15px;
}
.sh {
  color:red;
  font-size:35px;
}
.sp {
  color:red;
  font-size:15px;
}

JavaScript

const inputs = document.querySelectorAll('.controls input');

function handleUpdate() {
  const suffix = this.dataset.sizing || '';
  document.documentElement.style.setProperty(`${this.name}`, this.value + suffix);
}

inputs.forEach(input => input.addEventListener('change', handleUpdate));
inputs.forEach(input => input.addEventListener('mousemove', handleUpdate));