JSFiddle - React, Tailwind, and code Playground

by Michael Prosser

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<div class="affiliate-manager">
  <div class="affiliate-column">
    <h1>Affiliate Account Details</h1>
    <table cellpadding="5" cellspacing="0" border="0" align="center">
      <tr>
          <td><input type="text" placeholder="First Name" /></td>
      </tr>
      <tr>
          <td><input type="text" placeholder="Last Name" /></td>
      </tr>
      <tr>
          <td><input type="email" placeholder="Email Address" /></td>
      </tr>
      <tr>
          <td><input type="number" value="80" min="0" max="100" step="1" /> % <span class="note">of transaction goes<br />to this affiliate</span></td>
      </tr>
    </table>
    <h1>Affiliate Links</h1>
    <h3>Brain-centric Design Experience (CERTIFICATION)</h3>
    <div class="affiliate-link">
      https://nola.theeducationengine.com/mosaic/brain-centric-design-experience-certification/?affID=VFZSQmQwMUJQVDA9
    </div>
    
    <h2>
    Experience Welcome Message
    </h2>
  </div>
  <div class="affiliate-column">
    <h1>Affiliate Branding &amp; Styles</h1>
    <p>Experience Logo (60x46): </p>
    <p>Menu Logo (204x20): </p>
    <p>Splash Image (480x360): </p>
    
    <h1>
    
    </h1>
    <div class="affiliate-styles">
      <button class="color-button button-theme">
        <span>THEME<br />COLOR</span>
        <input type="color" id="color_theme" />
      </button> &nbsp;
      <button class="color-button button-background">
        <span>BACKGROUND<br />COLOR</span>
        <input type="color" id="color_background" />
      </button> &nbsp;
      <button class="color-button button-text">
        <span>TEXT<br />COLOR</span>
        <input type="color" id="color_text" />
      </button>
    </div>
    <div class="affiliate-styles">
      <h4>Image Filtering</h4>
      <div class="hue">
        <button class="hue-button hue-0" data-value="0"></button>
        <button class="hue-button hue-45"...

CSS

:root {
  --theme: #17ad8b;
  --background: #ffffff;
  --text: #000000;
  --filter: none;
}

.affiliate-manager{
  display: block;
  font-family: helvetica, serif;
  font-size: 14px;
}
.affiliate-manager .affiliate-column{
  width: calc(50% - 4px);
  display: inline-block;
  vertical-align: top;
}
.affiliate-manager .affiliate-column h1{
  text-align: center;
  font-weight: normal;
}
.affiliate-manager .affiliate-column h2{
  text-align: center;
  font-weight: normal;
}
.affiliate-manager .affiliate-column h3{
  text-align: left;
  font-weight: normal;
  font-size: 17px;
}
.affiliate-manager .affiliate-column input{
  padding: 8px;
  font-size: 13px;
  background-color: #cac8c8;
  border: none;
}
.affiliate-manager .affiliate-column input[type="text"], .affiliate-manager .affiliate-column input[type="email"]{
  width: 200px;
}
.affiliate-manager .affiliate-column input[type="number"]{
  width: 40px;
}
.affiliate-manager .affiliate-column input[type="color"]{
  padding: 0px;
  width: 0px;
  height: 0px;
  border: none;
  opacity: 0;
  position: absolute;
  left: 50%;
  top: 50%;
}
.affiliate-manager .affiliate-column .note{
  float: right;
  font-size: 12px;
  margin-right: 20px;
}
.affiliate-manager .affiliate-column .affiliate-link{
  padding: 2px;
  background-color: #edecec;
  font-size: 11px;
}
.affiliate-manager .color-button{
  border-radius: 50%;
  width: 100px;
  height: 100px;
  border: none;
  font-size: 12px;
  position: relative;
  box-shadow: 0px 0px 1px rgba(0,0,0,0.7);
  cursor: pointer;
}
.affiliate-manager .color-button.button-theme{
  background-color: var(--theme);
}
.affiliate-manager .color-button.button-background{
  background-color: var(--background);
}
.affiliate-manager .color-button.button-text{
  background-color: var(--text);
}
.affiliate-manager .color-button.grayscale{
  background: linear-gradient(0deg, rgba(32,32,32,1) 0%, rgba(249,249,249,1) 100%);
  color: #fff;
}
.affiliate-manager .color-button.sepia{
  background:...

JavaScript

var color_theme = '#17ad8b';
var color_background = '#ffffff';
var color_text = '#000000';
var hue = '0';
var grayscale = '0';
var sepia = '0';

function hexToRgb(hex) {
  var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
  return result ? {
    r: parseInt(result[1], 16),
    g: parseInt(result[2], 16),
    b: parseInt(result[3], 16)
  } : null;
}

function getTextColor(hex){

	var rgb = hexToRgb(hex);
  
  var t = rgb.r + rgb.g + rgb.b;
  
  if(t < 380){
  
  	return '#ffffff';
  
  } else {
  
  	return '#000000';
  
  }

}

$('.color-button input#color_theme').change(function(){

	color_theme = $(this).val();
  
  $(this).parent().css('color',getTextColor(color_theme));
  
  document.documentElement.style.setProperty('--theme', color_theme);
  
});

$('.color-button input#color_background').change(function(){

	color_background = $(this).val();
  
  $(this).parent().css('color',getTextColor(color_background));
  
  document.documentElement.style.setProperty('--background', color_background);

});

$('.color-button input#color_text').change(function(){

	color_text = $(this).val();
  
  $(this).parent().css('color',getTextColor(color_text));
  
  document.documentElement.style.setProperty('--text', color_text);

});

$('.color-button.grayscale').click(function(){

	grayscale = '1';
  sepia = '0';
  hue = '0';
  
  document.documentElement.style.setProperty('--filter','grayscale(1)');
  
});

$('.color-button.sepia').click(function(){

	grayscale = '0';
  sepia = '1';
  hue = '0';
  
  document.documentElement.style.setProperty('--filter','sepia(1)');
  
});

$('.hue-button').click(function(){

	grayscale = '0';
  sepia = '0';
  hue = $(this).attr('data-value');
  
  document.documentElement.style.setProperty('--filter','hue-rotate(' + hue + 'deg)');
  
});


$('.color-button input').click(function(e){

	e.stopPropagation();

});

$('.color-button').click(function(){
 
	$(this).find('input').click();

});

$('.color-button...