JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@simonwep/pickr/dist/themes/classic.min.css">
<script src="https://cdn.jsdelivr.net/npm/@simonwep/pickr/dist/pickr.min.js"></script>
<section class="container">
  <div class="pickr"></div>
</section>

CSS

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body,
.container {
  height: 100%;
  width: 100;
}

.container {
  display: flex;
  justify-content: center;
  padding-top: 5em;
}

JavaScript

const pickr = new Pickr({
  el: '.pickr',
  default: '#42445A',
  theme: 'classic',
comparison: false,
  swatches: [
    'rgba(244, 67, 54, 1)',
    'rgba(233, 30, 99, 0.95)',
    'rgba(156, 39, 176, 0.9)',
    'rgba(103, 58, 183, 0.85)',
    'rgba(63, 81, 181, 0.8)',
    'rgba(33, 150, 243, 0.75)',
    'rgba(3, 169, 244, 0.7)',
    'rgba(0, 188, 212, 0.7)',
    'rgba(0, 150, 136, 0.75)',
    'rgba(76, 175, 80, 0.8)',
    'rgba(139, 195, 74, 0.85)',
    'rgba(205, 220, 57, 0.9)',
    'rgba(255, 235, 59, 0.95)',
    'rgba(255, 193, 7, 1)'
  ],

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

    interaction: {
      hex: true,
      rgba: true,
      hsva: true,
      input: true,
      clear: true,
      save: true,
      cancel: true,
    }
  }
});
pickr.on('change', (color, source, instance) => {
    console.log('Event: "change"', color.toRGBA().toString(0));
  })
  .on('save', (color, instance) => {
    console.log('Event: "save"', color.toRGBA().toString(0));
  }).on('clear', instance => {
    /* If you click on clear button, below codes wont run */
    console.log('Event: "clear"');
  })
  .on('cancel', instance => {
    console.log('Event: "cancel"', instance._color.toRGBA().toString(0));
  });