JSFiddle - React, Tailwind, and code Playground

by thelifeisyours

HTML

<div id="main">
</div>

CSS

html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}

body {
  font-family: Arial, sans-serif;
  color: #e2e2e2;
  background: #272727;
}

#main {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: #272727;
  width: inherit;
  height: inherit;
}

JavaScript

/*Start of color match class*/
class ColorMatch {
  constructor(applicationAnchor, alternatives) {
    this.GIPHY_API_KEY = "CaSL6msn6ZiI41msBeEsg5n2KgImDh9c";

    this.applicationAnchor = applicationAnchor;

    this.alternatives = alternatives || 5;

    this.cmElements = [];

    this.headerElementContainer = this.addElement('div', 'headerElementContainer', this.applicationAnchor);
    this.headerElementContainer.setStyle('flex', 'row', 'center', 'alignCenter', 'h6em', 'bgDark0_6');

    this.headerElementTitle = this.addElement('div', 'headerElementTitle', this.headerElementContainer);
    this.headerElementTitle.setStyle('fs3em');
    this.headerElementTitle.element.innerHTML = "Color Match";

    this.gifOverlayElementContainer = this.addElement('div', 'gifOverlayElementContainer', this.applicationAnchor);
    this.gifOverlayElementContainer.setStyle('absolute', 't0em', 'l0em', 'flex', 'column', 'center', 'alignCenter', 'w100pc', 'h100pc', 'bgDark0_8', 'hidden');
    this.gifOverlayElementContainer.setTriggerEvent('click', this.hideGifOverlay);

    this.gifOverlayElementText = this.addElement('div', 'gifOverlayElementText', this.gifOverlayElementContainer);
    this.gifOverlayElementText.setStyle('fs5em', 'm1em');

    this.gifOverlayElementImageContainer = this.addElement('div', 'gifOverlayElementImageContainer', this.gifOverlayElementContainer);
    this.gifOverlayElementImageContainer.setStyle('flex', 'center', 'w100pc', 'h50pc');

    this.answerElementContainer = this.addElement('div', 'answerElementContainer', this.applicationAnchor);
    this.answerElementContainer.setStyle('flex', 'row', 'center');

    this.answerElementColor = this.addElement('div', 'answerElementColor', this.answerElementContainer);
    this.answerElementColor.setStyle('w20em', 'h20em', 'bgLight1');

    this.altElementContainer = this.addElement('div', 'alternativeElementsContainer', this.applicationAnchor);
    this.altElementContainer.setStyle('flex', 'row', 'evenly',...