JSFiddle - React, Tailwind, and code Playground

by Simonwep

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@simonwep/pickr/dist/pickr.es5.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@simonwep/pickr/dist/themes/default.min.css">
  <section class="demo">

        <div id="color-value-1"></div>
        <div id="color-value-2"></div>
        
        <div class="center">
            <div class="pickr-a"></div>
            <div class="pickr-b"></div>
        </div>

    </section>

CSS

html,
body {
  height: 100%;
  width: 100%;
  margin: 0;
}

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

JavaScript

const pickrA = new Pickr({
    el: '.pickr-a',
    default: 'pink',
    components: {
        preview: true,
        opacity: true,
        hue: true,
        interaction: {
            hex: true,
            rgba: true,
            hsva: true,
            input: true,
            save: true
        }
    }
});

const pickrB = new Pickr({
    el: '.pickr-b',
    default: 'beige',
    components: {
        preview: true,
        opacity: true,
        hue: true,
        interaction: {
            hex: true,
            rgba: true,
            hsva: true,
            input: true,
            save: true
        }
    }
});

pickrA.on('change', color => {
  	$("#color-value-1").text(color.toHEXA().toString());
});

pickrB.on('change', color => {
  	$("#color-value-2").text(color.toHEXA().toString());
});