JSFiddle - React, Tailwind, and code Playground

HTML

<link href='http://fonts.googleapis.com/css?family=Baumans' rel='stylesheet' type='text/css'>

<link href='http://fonts.googleapis.com/css?family=Oleo+Script:700' rel='stylesheet' type='text/css'>
<div id="warper">
<h1>face color generator</h1>
    <p>จากแนวคิดของ<a href="http://iannnnn.com/2012/788">ไอ้แอน</a><br/><small>โค้ดสั่วๆโดย chaitat voravarn</small>
    <br/><small>ปรับปรุงโค๊ดร่างแรก โดย @fake-or-dead </small></p>
    <h2>#facexx</h2>
    <div id="frontface"></div>
    <h2>#xfacex</h2>
    <div id="centerface"></div>
    <h2>#xxface</h2>
    <div id="backface"></div>
</div>

SCSS

body {
    background:#333;
    color:#fff;
    margin:30px;
}
#frontface,#centerface,#backface {margin-bottom:30px;height:220px;}
#warper{width:550px;margin:auto}
h1 {
  font: bold 50px/1.5 'Oleo Script', cursive;
  text-transform: uppercase;
  color: #c8d2da;
  text-shadow: 0 2px 0 #9dafbd, 0 4px 0 #97aab9, 0 6px 0 #91a5b5, 0 8px 0 #8ba0b1, 3px 8px 15px rgba(0, 0, 0, 0.1), 3px 8px 5px rgba(0, 0, 0, 0.3);
}
h2 {
  font: 30px/1.5 'Baumans', cursive;
  color: #c8d2da;
}
p,span{color:#999;}
p {margin:30px 0;}
a:link,a:visited,a:hover {color:#c8d2da;text-decoration:none}
ul {width:550px;margin:auto;}
li {width: 100px;height: 100px;float:left;margin:5px;border-radius:100px;display: table; }
li span {  display: table-cell;   vertical-align: middle;   text-align: center; color:#000;}

JavaScript

var i = 1,
    rounds = 10,
    facexx = $('<ul id="facexx"></ul>'),
    xfacex = $('<ul id="xfacex"></ul>'),
    xxface = $('<ul id="xxface"></ul>');

function genColor(seed, position) {
    color = Math.floor(Math.random(seed) * 256).toString(16);
    if (position !== "center") {
        if (color.length < 2) {
            color = '0' + color;
        }
        if (position === "front") {
            return "face" + color;
        }
        else {
            return color + "face";
        }
    }
    else {
        return color.substring(0, 1) + "face" + Math.floor(Math.random(seed) * 256).toString(16).substring(0, 1);

    }
}

while (i <= rounds) {
    color_front = genColor(i, "front");
    facexx.append('<li style="background:#' + color_front + '"><span>#' + color_front + '</span></li>');

    color_center = genColor(i, "center");
    xfacex.append('<li style="background:#' + color_center + '"><span>#' + color_center + '</span></li>');

    color_back = genColor(i, "back");
    xxface.append('<li style="background:#' + color_back + '"><span>#' + color_back + '</span></li>');

    i += 1;
}


$('#frontface').append(facexx);
$('#centerface').append(xfacex);
$('#backface').append(xxface);