JSFiddle - React, Tailwind, and code Playground

by mromanbanks

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/chroma-js/2.0.6/chroma.min.js"></script>
<p class="p">

</p>

CSS

.colorBlock {
  display: inline-block;
  width: 40px;
  height: 40px;
  margin: 0;
  padding: 0;
}

JavaScript

var bez = chroma.bezier(['white', 'yellow', 'red', 'black']);
// compute some colors
bez(0).hex()  // #ffffff
bez(0.33).hex()  // #ffcc67
bez(0.66).hex()  // #b65f1a
bez(1).hex()  // #000000
const res = bez(1).hex();

const colors = [
	'#ffffff',
  '#ffcc67',
  '#b65f1a',
  '#000000'
];

const body = document.createElement('div');

for (let item in colors) {
	const colorReference = document.createElement('div');
  colorReference.classList.add('colorBlock')
  colorReference.setAttribute('style', `background-color: ${item}`)
  
	body.appendChild(colorReference)
}