JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<script src="../test6/scripts/jquery.min.js" type="text/javascript"></script>
<script src="../test6/scripts/avatarselection.js"  type="text/javascript"></script>
<link href="../test6/frontend/stylesheets/screen.css" rel="stylesheet" type="text/css" />
</head>

<body>

<div id="container" class="hair-blonde skin-pink boy">


<div class="selections">

<form name="htmlform" method="post" action="html_form_send.php">

<p class="gender">
<span>Select a Gender</span>
Male: <input name="gender" type="radio" value="boy" checked="checked" />
Female: <input name="gender" type="radio" value="girl" />
</p>

<p class="boyhair hair">
<span>Male Hair Style</span>
<input class="spikyboy" name="boyhair" type="radio" value="spikyboy" checked="checked" />
<input class="bowlboy" name="boyhair" type="radio" value="bowlboy" />
<input class="shortboy" name="boyhair" type="radio" value="shortboy" />
<input class="curlyafroboy" name="boyhair" type="radio" value="curlyafroboy" />
<input class="mediumboy" name="boyhair" type="radio" value="mediumboy" />
</p>

<p class="girlhair hair">
<span>Female Hair Style</span>
<input class="wavygirl"      name="girlhair" type="radio" value="wavygirl" checked="checked" />
<input class="bobgirl"       name="girlhair" type="radio" value="bobgirl" />
<input class="bunchesgirl"   name="girlhair" type="radio" value="bunchesgirl" />
<input class="longgirl"      name="girlhair" type="radio" value="longgirl" />
<input class="curlyafrogirl" name="girlhair" type="radio" value="curlyafrogirl" />
<input class="mediumgirl"    name="girlhair" type="radio" value="mediumgirl" />
</p>

<p class="haircolour colour">
<span>Select Hair Colour</span>
<input class="" id="hair-blonde" name="haircolour"...

CSS

@charset "UTF-8";
/* line 2,  */
.colour input {
  width: 25px;
  height: 25px;
  border: 1px solid black;
}

/* line 13,  */
p.haircolour #hair-blonde {
  background: #feda00;
  border-color: #cbae00;
}

/* line 17,  */
#hair-red {
  background: #feda00;
  border-color: #cbae00;
}

/* line 21,  */
#hair-ltbrown {
  background: #bb9a51;
  border-color: #9c7e3d;
}

/* line 25,  */
#hair-dkbrown {
  background: #675128;
  border-color: #42341a;
}

/* line 29,  */
#hair-black {
  background: #48464f;
  border-color: #2f2e34;
}

/* line 33,  */
#skin-pink {
  background: #fcddcd;
  border-color: #f9bc9d;
}

/* line 37,  */
#skin-olive {
  background: #ecc9a2;
  border-color: #e3b078;
}

/* line 41,  */
#skin-brown {
  background: #bd9870;
  border-color: #ab7f4f;
}

/* line 45,  */
#skin-black {
  background: #815e38;
  border-color: #5d4429;
}

/* line 49,  */
#eye-blue {
  background: #00adee;
  border-color: #0088bb;
}

/* line 53,  */
#eye-green {
  background: #79c14f;
  border-color: #61a33a;
}

/* line 57,  */
#eye-ltbrown {
  background: #997952;
  border-color: #785f40;
}

/* line 61,  */
#eye-dkbrown {
  background: #564030;
  border-color: #35281e;
}

/* CSS Document */
/* line 4, _hair.scss */
.hair input {
  width: 70px;
  height: 70px;
  background-position: top center;
  background-repeat: no-repeat;
}

/* line 15, _hair.scss */
.hair-blonde .spikyboy {
  background: url('http://olo.uk.com/files/test/test6/frontend/images/xsppsfhairspikyboyblonde.svg?1348818877') center top no-repeat, url('http://olo.uk.com/files/test/test6/frontend/images/xsppsheadgrey.svg?1348818878') center top no-repeat, url('http://olo.uk.com/files/test/test6/frontend/images/xsppsbhairspikyboyblonde.svg?1348818874') center top no-repeat;
}

/* line 21, _hair.scss */
.girl.hair-blonde #eyelash {
  background: url('http://olo.uk.com/files/test/test6/frontend/images/xsppseyelashblonde.svg?1348818875') center top no-repeat;
}

/* line 15, _hair.scss */
.hair-blonde .curlyafroboy {
 ...

JavaScript

// JavaScript Document
$(document).ready(function() {


    $(document).ready(function() {
        $(".girlhair").hide();

        $("input[name$='gender']").click(function() {
            var gender = $(this).val();
            $(".hair").hide();
            $("." + gender + "hair").show();
            var body = $('#container').attr('class').split(' ')[3];
            var body = gender;

        });
    });


    $(".haircolour input").click(function() {
        var newhaircolour = $(this).val();
        var hair_colour = $('#container').attr('class').split(' ')[0];
        var hair_colour = $(".haircolour input").val();
    });

    $(".skincolour input").click(function() {
        var newskincolour = $(this).val();
        var skin_colour = $('#container').attr('class').split(' ')[1];
        var skin_colour = newskincolour;
    });


    $(".hair input").click(function() {
        var newhairstyle = $(this).val();
        $("span#backhair").removeAttr('class');
        $("span#backhair").addClass(newhairstyle);
        $("span#fronthair").removeAttr('class');
        $("span#fronthair").addClass(newhairstyle);
    });

    $(".eyecolour input").click(function() {
        var neweyecolour = $(this).val();
        $("#eyecolour").removeAttr('class');
        $("#eyecolour").addClass(neweyecolour);
    });


    $(".glasses input").click(function() {
        var newglasses = $(this).val();
        $("#glasses").removeAttr('class');
        $("#glasses").addClass(newglasses);
    });




});