JSFiddle - React, Tailwind, and code Playground

by Gwyn Milcote

HTML

new dress up.
<link rel='stylesheet' href='http://griffusion.elementfx.com/css/colours.css' type='text/css'>
<div class='dressup_holder'>
    <div class='dressup_sky'></div>
    <div class='dressup_horizon'></div>
    <div class='dressup_nearby'></div>
    
    <div class='dressup_body_colour'></div>
    <div class='dressup_hooves'></div>
    <div class='dressup_mark4'></div>
    <div class='dressup_mark3'></div>
    <div class='dressup_mark2'></div>
    <div class='dressup_mark1'></div>
    <div class='dressup_eye'></div>
    <div class='dressup_body_line'></div>
    
    <div class='dressup_wing dressup_wing_colour'></div>
    <div class='dressup_wing dressup_wing_mark2'></div>
    <div class='dressup_wing dressup_wing_mark1'></div>
    <div class='dressup_wing dressup_wing_line'></div>
    
    <div class='dressup_horn_colour'></div>
    <div class='dressup_horn_line'></div>
</div>

<div class='palette_holder'>
  <div class='palette colour1101' data-colour='1101'></div>
  <div class='palette colour1102' data-colour='1102'></div>
  <div class='palette colour1103' data-colour='1103'></div>
  <div class='palette colour1104' data-colour='1104'></div>
  <div class='palette colour1105' data-colour='1105'></div>
  <div class='palette colour1106' data-colour='1106'></div>
  <div class='palette colour1107' data-colour='1107'></div>
  <div class='palette colour1108' data-colour='1108'></div>
  <div class='palette colour1109' data-colour='1109'></div>
  <div class='palette colour1110' data-colour='1110'></div>
  <div class='palette colour1111' data-colour='1111'></div>
  <div class='palette colour1112' data-colour='1112'></div>
  <div class='palette colour1113' data-colour='1113'></div>
 
  <div class='palette colour1201' data-colour='1201'></div>
  <div class='palette colour1202' data-colour='1202'></div>
  <div class='palette colour1203' data-colour='1203'></div>
  <div class='palette colour1204' data-colour='1204'></div>
  <div class='palette colour1205'...

CSS

div {
  box-sizing: border-box;
}

.dressup_holder {
  position: relative;
  border: 1px solid green;
}
.dressup_holder div {
  position: absolute;
  top: 0px;
  left: 0px;
}

.dressup_tab {
  display: none;
}

.palette {
  width: 25px;
  height: 25px;
  border-radius: 5px;
  border: 2px solid rgba(0, 0, 0, 0.2);
  display: inline-block;
  transition: 0.2s;
}
.palette:hover {
  cursor: pointer;
  border: 2px solid rgba(255, 255, 255, 0.5);
  transition: 0.2s;
}

.select_part {
  padding: 5px;
  border-radius: 5px;
  border: 1px solid grey;
}

.option {
  width: 100px;
  height: 80px;
  border-radius: 5px;
  border: 1px solid grey;
  display: inline-block;
  margin: 3px;
}

/* ugh... was better to use one class, but the class needs to change all the time. */
#colour_body, #colour_mark1, #colour_mark2, #colour_mark3,#colour_mark4, #colour_mane, #colour_mane_acc, #colour_mane_extra, #colour_tail, #colour_tail_acc, #colour_tail_extra, #colour_wing, #colour_wing_mark1, #colour_wing_mark2, #colour_hoof, #colour_eye, #colour_horn {
  border: 1px solid black;
  float: right;
  border-radius: 5px;
  width: 50px;
  height: 30px;
}

JavaScript

// heap of global vars for tracking everything.
var selected_area = 0; // scenery, body, mane...
var selected_part = 0; // body, mark1-4, eye, hoof...
var selected_colour = 0; // main or secondary colour of part?


// first, scenery. Simple paper div bg by default.
var sky = 0;
var horizon = 0;
var nearby = 0;
var foreground = 0;

// body options.
var base_colour = 0;
var mark1 = 0;
var mark1_colour = 0;
var mark2 = 0;
var mark2_colour = 0;
var mark3 = 0;
var mark3_colour = 0;
var mark4 = 0;
var mark4_colour = 0;
var eye_colour = 0;
var hoof_colour = 0;

// mane options.
var mane_style = 0;
var mane_colour = 0;
var mane_acc_style = 0;
var mane_acc_colour = 0;
var mane_extra_style = 0;
var mane_extra_colour = 0;

// tail options.
var tail_style = 0;
var tail_colour = 0;
var tail_acc_style = 0;
var tail_acc_colour = 0;
var tail_extra_style = 0;
var tail_extra_colour = 0;

// legwear.
var leg_style = 0; // boots, socks, wrap
var leg_colour = 0;
var leg_acc_style = 0; // fur trim, ribbon, gems
var leg_acc_colour = 0;
var leg_extra_style = 0; // stars, stripes, spots
var leg_extra_colour = 0;

// headwear.
var head_style = 0; // bridle, veil, mask
var head_colour = 0;
var head_acc_style = 0; // fur trim, ribbon, gems
var head_acc_colour = 0;
var head_extra_style = 0; // stars, stripes, spots
var head_extra_colour = 0;

// backwear.
var back_style = 0; // saddle, blanket, armour
var back_colour = 0;
var back_acc_style = 0; // fur trim, ribbon, gems
var back_acc_colour = 0;
var back_extra_style = 0; // stars, stripes, spots
var back_extra_colour = 0;

// other.
var wing_style = 0;
var wing_colour = 0;
var wing_mark1_style = 0;
var wing_mark1_colour = 0;
var wing_mark2_style = 0;
var wing_mark2_colour = 0;
var horn_style = 0;
var horn_colour = 0;


// when hovering over a tab...
$('.dressup_tab_btn').mouseover(function(){
    var tab = $(this).data('tab');
    $('.dressup_thumb_highlight').html("<img src='../../images/dressup/thumb_highlight_"+tab+".png'>");
});

// open...