JSFiddle - React, Tailwind, and code Playground

by cdeutsch

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/color-js/1.0.1/color.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
<html>

<head>

<script>

// Yes jquery, fuck off Chirstopher.
$(document).ready(function() {
  var Color = net.brehaut.Color;
  
  // StackOverflow
  function hashCode(str) {
  	var hash = 0, i, chr;
  	if (str.length === 0) return hash;
	  
    for (i = 0; i < str.length; i++) {
    	chr   = str.charCodeAt(i);
	   	 hash  = ((hash << 5) - hash) + chr;
  	 	 hash |= 0; // Convert to 32bit integer
  	}
  	
    return hash;
	};

	var maxHueShiftDegrees = 180; // This worked best in my tests
  var minLum = 0.55; // Combat very light colours
  
	function coloursForText(text) {
    var base = Color("#9B51E0"); // This is our purple, which looks good.

		base = base.shiftHue(hashCode(text) % maxHueShiftDegrees);
    
    // Sometimes the colours returned are too light
    var lum = base.getLuminance();
    if (lum > minLum) {
  		base = base.darkenByAmount(lum - minLum);
    }
       
		var bg = Color(base.toCSS()).setAlpha(0.125);    
   
    return { bg: bg.toCSS(), fg: base.toCSS()};
  }

  var tags = ["redis", "postgres", "dbs", "aws", "kubernetes"];
  
  // Add some more names to the list
  var taglen = tags.length;
  for (var i = 0; i < taglen; i++) {
  	tags.push(tags[i].split('').reverse().join(''));
  }
  
  for (var i = 0; i < tags.length; i++) {
    var colors = coloursForText(tags[i]);
    
    var style= 'width: 20%; margin: 10px; padding: 10px; text-align: center; font-weight: bold; text-transform: uppercase; font-size: 0.8em; font-family: sans-serif; background-color: ' + colors.bg + '; color:' + colors.fg + ' ;';
    
    var e = $('<div style="' + style + '"></div>').text(tags[i]);
    $("body").append(e);
  }
});

</script>

</head>

<body>


</body>

</html>