JSFiddle - React, Tailwind, and code Playground

by yoowordpress

HTML

<div class="cover-info" style="">Lorem ipsum dolor sit amet</div>

CSS

.cover-info {
  padding: 3em;
  text-align: center;
  font-family: Georgia;
  font-size: 2em;
}

/* Adapt font color if the background is light or dark  */
.dark-color { color: black }
.light-color { color: white }

JavaScript

$( document ).ready(function() {
    adaptColor('.cover-info');
});

function adaptColor(selector) {
  var rgb = $(selector).css("background-color");

  if (rgb.match(/^rgb/)) {
    var a = rgb.match(/^rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*(\d+(?:\.\d+)?))?\)$/),
      r = a[1],
      g = a[2],
      b = a[3];
  }
  var hsp = Math.sqrt(
    0.299 * (r * r) +
    0.587 * (g * g) +
    0.114 * (b * b)
  );
  if (hsp > 127.5) {
    $(selector).addClass('dark-color');
  } else {
    $(selector).addClass('light-color');
  }
};