JSFiddle - React, Tailwind, and code Playground

by Roland Doda

HTML

<body style="padding: 20px">

  <label>Choose your favorite color:</label>
  <input type="color" value="#2cba92">
  <br/>
  <label>Adjust margin:</label>
  <input type="range" id="margin" min="0" max="200" value="0">
  <footer></footer>
</body>

CSS

:root {
  --footer-color: #2cba92;
  /* @reasonCode green */
  --palatte-padding-left: 0px
}

footer {
  width: 50px;
  height: 50px;
  margin-top: 20px;
  margin-left: var(--palatte-padding-left);
  background-color: var(--footer-color);
  border-radius: 15px;
}

JavaScript

const footer = document.querySelector('footer')
const inputs = document.querySelectorAll('input')

inputs[0].addEventListener('change', handleUpdate);
inputs[1].addEventListener('mousemove', handleUpdate);

function handleUpdate(e) {
  if (this.type === 'color') {
    footer.style.setProperty('--footer-color', this.value)
  } else {
    footer.style.setProperty('--palatte-padding-left', this.value + 'px')
  }
}