JSFiddle - React, Tailwind, and code Playground

by Simonwep

HTML

<script src="https://simonwep.github.io/pickr/dist/pickr.es5.min.js"></script>
<link rel="stylesheet" href="https://simonwep.github.io/pickr/dist/themes/classic.min.css">
<section class="demo">

  <div class="center">
    <div class="cp1"></div>
    <div class="cp2"></div>
  </div>

</section>

CSS

section {
  display: flex;
  justify-content: center;
  align-items: center;
}

JavaScript

for (const el of ['.cp1', '.cp2']) {
  new Pickr({
    el,
    
    default: '#42445A',

    components: {
      preview: true,
      opacity: true,
      hue: true,

      interaction: {
        hex: true,
        rgba: true,
        hsva: true,
        input: true,
        save: true
      }
    }
  });
}