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></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 + 1, // change this to list more colors in list
    color, ccount = {},
    itm,
    repeatCount = 0;
    colorloop1 = $('<ul id="loop1"></ul>');

function genColor1 (seed) {
    color = Math.floor(Math.random()*256).toString(16);
    while(color.length < 2) {
        color = '0' + color;
    }
    
    return color;
}

while (i < rounds) {
        color = genColor1(i);
    colorloop1.append('<li style="background:#' + color + 'face"><span>#' + color + 'face</span></li>');
    ccount[color] = ccount[color] === undefined ? 1 : ccount[color] + 1;
    i += 1;
}


//------------------------------------------------------------------------------------//

var i = 1,
    rounds = 10 + 1, // change this to list more colors in list
    color, ccount = {},
    itm,
    repeatCount = 0;
    colorloop2 = $('<ul id="loop2"></ul>');

function genColor2 (seed) {
    color = Math.floor(Math.random()*256).toString(16);
    while(color.length < 2) {
        color = '0' + color;
    }
    
    return color;
}

while (i < rounds) {
        color = genColor2(i);
    colorloop2.append('<li style="background:#face' + color + '"><span>#face' + color + '</span></li>');
    ccount[color] = ccount[color] === undefined ? 1 : ccount[color] + 1;
    i += 1;
}

//------------------------------------------------------------------------------------//

var i = 1,
    rounds = 10 + 1, // change this to list more colors in list
    colorf, ccount = {},
    colorb, ccount = {},
    itm,
    repeatCount = 0;
    colorloop3 = $('<ul id="loop3"></ul>');

function genColor3 (seed) {
    colorf = Math.floor(Math.random()*16).toString(16);
    while(colorf.length < 1) {
        colorf = '0' + colorf;
    }
    
    return colorf;
}
function genColor4 (seed) {
    colorb = Math.floor(Math.random()*16).toString(16);
    while(colorb.length < 1) {
        colorb = '0' + colorb;
    }

    return colorb;
}

while (i < rounds) {
    colorb = genColor4(i);
    colorf = genColor3(i);
  ...