JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">

    <head>

        <!-- Ts tag is required to make the page valid XHTML. -->
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />

        <!-- Give your page a title. -->
        <title>Photo Gallery for NBC's Community</title>

        <!-- Put your name and a description of the assignment or project here. -->
        <meta name="author" content="" />
        <meta name="description" content="A collection of photos regarding NBC's Community television show." />

        <!-- Ts links to a sample CSS file. -->
         <link href="css/style.css" rel="stylesheet" type="text/css" media="all" />

        <!-- Ts include a standard jQuery library and a sample JS file for your own code. -->
        <script type="text/javascript" src="javascript/jquery-1.6.4.min.js"></script>
        <script type="text/javascript" src="javascript/scripts.js"></script>
        <script type="text/javascript" src="javascript/shadowbox-3.0.3/shadowbox.js"></script>
        <script type="text/javascript" src="javascript/cookie.js"></script>
        
        <!-- Shadowbox code. -->
        <link href="javascript/shadowbox-3.0.3/shadowbox.css" rel="stylesheet" type="text/css" />
        <script type="text/javascript">
            Shadowbox.init();
        </script>

    </head>

    <body>
        <div id="wrap">
            <div id="header">
                <img src="media/header.png" alt="Community Header" />
            </div>
            
            <p>Please select a background color for either the page's background, the gallery's background, or both.</p>
            
            <select id="set_cookie">
                <option value="#1d375a" selected="selected">Default</option>
                <option value="black">Black</option>
                <option value="blue">Blue</option>
  ...

CSS

body {
    background: #1d375a;
}

#header {
    position: relative;
    top: 5px;
    left: -12px;
}

#wrap {
    background-color: white;
    width: 960px;
    margin-left: auto;
    margin-right: auto;
    border-radius: 15px;
    padding: 10px 20px 30px 20px;
}

#gallery {
    width: 860px;
    margin-left: auto;
    margin-right: auto;
    background: url('../media/black_linen.png');
    border-radius: 10px;
    padding: 8px 0 5px 0;
}

table {
    border: 0;
    margin-left: auto;
    margin-right: auto;
}

h1 {
    font-family: Georgia, 'Hoefler Text', serif;
    color: #194783;
    text-transform: uppercase;
}

p {
    font-family: Helvetica, Arial, sans-serif;
}

img {
    border-radius: 3px;
    margin: 1px 4px 1px 4px;
    xborder: 1px solid grey;
}

JavaScript

$(document).ready(function() {

    if (verifier == 1) {
        $('body').css('background', $.cookie('test_cookie'));
    }

    if (verifier == 2) {
        $('#gallery').css('background', $.cookie('test_cookie'));
    }

    if (verifier == 3) {
        $('body').css('background', $.cookie('test_cookie'));
        $('#gallery').css('background', $.cookie('test_cookie'));
    }

    $('#set_cookie').click(function() {

        var color = $('#set_cookie').val();

        $.cookie('test_cookie', color);
    });

    $('#set_page').click(function() {
        $('body').css('background',  $.cookie('test_cookie'));
        var verifier = 1;
    });

    $('#set_gallery').click(function() {
        $('#gallery').css('background', $.cookie('test_cookie'));
        var verifier = 2;
    });

    $('#set_both').click(function() {
        $('body').css('background', $.cookie('test_cookie'));
        $('#gallery').css('background', $.cookie('test_cookie'));
        var verifier = 3;
    });
});