JSFiddle - React, Tailwind, and code Playground

by asfar mohamed

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/color-thief/2.0.1/color-thief.min.js"></script>
<div class='img_color' id='js-img_color'>
  <img class='js-img_color--img img_color--img' id='img'...

CSS

body {
  text-align: center;
  padding: 50px;
  background-color: #F7F7F7;
}
.img_color {
  padding: 50px;
  text-align: center;
  vertical-align: middle;
  display: inline-block;
  background: rgba(255, 255, 255, 0.2);
  > img {
    max-width: 100%;
    border: 1px solid #000;
  }
}

JavaScript

(function() {
  var img = document.getElementById('img');

  // check if img is loaded
  if (img.naturalWidth) {
    onImageLoad();
  } else {
    img.onload = function() {
      onImageLoad(); 
    }; 
  }
  
  function onImageLoad() {
    var colorThief = new ColorThief();
    var rgb = colorThief.getColor(img);
    
    document.body.style.backgroundColor = 'rgb(' + rgb.join(', ') + ')';
  }
  

}());