JSFiddle - React, Tailwind, and code Playground

by Gwyn Milcote

HTML

Dress-up game.

<div class='container'>
  <div class='bg'></div>
  
  <div class='base_tail'></div>
  <div class='extra_tail'></div>
  <div class='line_tail'></div>
  
  <div class='base_body'></div>
  <div class='extra_body'></div>
  <div class='line_body'></div>
  
  <div class='base_mane'></div>
  <div class='extra_mane'></div>
  <div class='line_mane'></div>
</div>

JavaScript

// global variables, to keep track of the currently selected stuff.
var part = 0;
var style = 0;
var colour = 0;

// when clicking an icon...
$('.thumb').click(function(){ 

part = $(this).data('part');
style = $(this).data('style');

// in the hair layer, load div with the hair_6 class, for example, and the last colour chosen.
$('.layer_'+part).html("<div class='"+part+"_"+style+" colour_"+colour+"'></div>");

if(part != 'bg'){
    // and above the coloured shape, we need its outline.
    $('.line_'+part).html("<div class='"+part+"_"+style+"_line'></div>");
}

});