JSFiddle - React, Tailwind, and code Playground

HTML

<body>
     <h1>
        Evolution Simulator
    </h1>

    <div id="desc">
        <p>In the early 1980s the evolutionary biologist Richard Dawkins created a simple computer program that simulates the process of natural selection and generates the string "METHINKS IT IS LIKE A WEASEL" from an initial string of random characters. This is my javascript version of that program.</p>
        <p>Type a target string into the input box or leave in the default "METHINKS IT IS LIKE A WEASEL", click the evolve button and watch the program hone in on it. The initial guess is composed of randomly chosen characters. This is copied into 10 child strings that contain some random copy errors. The child string that is the most similar to the target string is deemed the fittest and is chosen to spawn 10 new child strings. This will continue until an exact match to the target string is generated which normally takes less than 20 seconds. This process is mathematically similar to how evolution in the natural world operates.</p>
        <p>You can read more about Dawkins' original program <a href="http://en.wikipedia.org/wiki/Weasel_program" target=_blank>here</a>.</p>
    </div>
    <table id="evolution">
        <tr>
            <td>Initial guess:</td>
            <td id="guess"></td>
        </tr>
        <tr>
            <td>Generation:</td>
            <td id="generation"></td>
        </tr>
        <tr>
            <td>Child 0:</td>
            <td id="child0"></td>
        </tr>
        <tr>
            <td>Child 1:</td>
            <td id="child1"></td>
        </tr>
        <tr>
            <td>Child 2:</td>
            <td id="child2"></td>
        </tr>
        <tr>
            <td>Child 3:</td>
            <td id="child3"></td>
        </tr>
        <tr>
            <td>Child 4:</td>
            <td id="child4"></td>
        </tr>
        <tr>
            <td>Child 5:</td>
            <td id="child5"></td>
        </tr>
        <tr>
            <td>Child 6:</td>
        ...

CSS

body {
    background: -webkit-linear-gradient(left, rgb(220, 220, 220), white, rgb(220, 220, 220));
    /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(right, rgb(220, 220, 220), white, rgb(220, 220, 220));
    /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(right, rgb(220, 220, 220), white, rgb(220, 220, 220));
    /* For Firefox 3.6 to 15 */
    background: linear-gradient(to right, rgb(220, 220, 220), white, rgb(220, 220, 220));
    /* Standard syntax (must be last) */
}
h1 {
    font-size: 40px;
    text-align: center;
}
#desc {
    font-family:"Serif";
    font-size: 20px;
    margin: 0 10px;
}
#evolution {
    margin: 10px 10px;
    border-collapse: collapse;
    border: 3px solid black;
    background: -webkit-linear-gradient(rgb(240, 240, 255), rgb(200, 200, 255));
    /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(rgb(240, 240, 255), rgb(200, 200, 255));
    /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(rgb(240, 240, 255), rgb(200, 200, 255));
    /* For Firefox 3.6 to 15 */
    background: linear-gradient(rgb(240, 240, 255), rgb(200, 200, 255));
    /* Standard syntax */
}
#evolution td {
    border: 1px solid black;
}
#evolution td, #input {
    font-size: 16px;
    font-family: sans-serif;
    font-weight: bold;
}
#fittest {
    color: green;
}
#button {
    border: none;
}
#input {
    width: 30em;
    background-color: rgb(230, 230, 255);
}

JavaScript

var CHAR_LIST = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789@.,!?\"' ";
var NUM_CHARS = CHAR_LIST.length;
var LITTER_SIZE = 10;
var MAX_MUTATION = 5;
var MUTATION_RATE = 0.01;
var PAUSE_BTW_GENS = 10;

var target, current, fittest, generation, litterElems, inputField,
generationField, fittestField, evolving;

window.onload = function () {
    litterElems = new Array();
    inputField = document.getElementById('input');
    fittestField = document.getElementById('fittest');
    generationField = document.getElementById('generation');
    var evolveBtn = document.getElementById('evolveBtn');
    evolveBtn.addEventListener("click", evolve);
    for (var i = 0; i < LITTER_SIZE; i++) {
        (function (i) {
            litterElems[i] = document.getElementById('child' + i);
        })(i);
    }
    evolving = false;
}

function evolve() {
    if (evolving) return;
    evolving = true;
    inputField.disabled = true;
    generation = 1;
    for (var i = 0; i < LITTER_SIZE; i++) {
        litterElems[i].innerHTML = "";
    }
    target = filter(inputField.value);
    inputField.value = target;
    current = "";
    for (var i = 0; i < target.length; i++) {
        current += getRandomChar();
    }
    document.getElementById("guess").innerHTML = current;
    reproduce();
}

function filter(text) {
    var filtered = "";
    for (var i = 0; i < text.length; i++) {
        var ch = text.charAt(i);
        if (CHAR_LIST.indexOf(ch) >= 0) {
            filtered += ch;
        }
    }
    return filtered;
}

function getRandomChar() {
    var index = Math.floor(Math.random() * NUM_CHARS);
    return CHAR_LIST.charAt(index);
}

function reproduce() {
    generationField.innerHTML = generation;
    for (var i = 0; i < LITTER_SIZE; i++) {
        litterElems[i].innerHTML = getChild();
    }
    current = getFittest();
    fittestField.innerHTML = current;
    generation++;
    if (current != target) {
        setTimeout(reproduce, PAUSE_BTW_GENS);
    } else...