JSFiddle - React, Tailwind, and code Playground

HTML

<body>
    <h1>My Sandbox</h1>
    <div id="content">
        <div id="0" class="back"></div>
        <div id="1" class="back"></div>
        <div id="2" class="back"></div>
        <div id="3" class="back"></div>
        <div id="4" class="back"></div>
        <div id="5" class="back"></div>
        <div id="6" class="back"></div>
        <div id="7" class="back"></div>
        <div id="8" class="back"></div>
        <div id="9" class="back"></div>

        <div id="flag_holder"></div>

    </div>
    <script type="text/javascript" src="js/main.js"></script>
</body>

CSS

h1 {
	text-align: center;
}

h3 {
	color: white;
}

#content {
	border: 1px solid black;
	background-color: lightgrey;
	padding: 2em;
	margin: 0 auto;
	height: auto;
	width: 90%;
	border-radius: 30px;
	overflow: auto;
}

.flag {
	float: left;
}

.sverige {
	position: relative;
	width: 300px;
	height: 200px;
	background-color: #005A99;
}

.sverige .first {
	position: absolute;
	top: 80px;
	background-color: #FECC00;
	width: 300px;
	height: 40px;
}

.sverige .second {
	position: absolute;
	left: 100px;
	background-color: #FECC00;
	height: 200px;
	width: 40px;
}

.osterrike {
	position: relative;
	width: 300px;
	height: 200px;
	background-color: #eee;
}

.osterrike .first {
	position: absolute;
	top: 133px;
	background-color: #ED2939;
	width: 300px;
	height: 67px;
}

.osterrike .second {
	position: absolute;
	background-color: #ED2939;
	width: 300px;
	height: 67px;
}

.italien {
	position: relative;
	width: 300px;
	height: 200px;
	background-color: #eee;
}

.italien .first {
	position: absolute;
	background-color: #009246;
	height: 200px;
	width: 100px;
}

.italien .second {
	position: absolute;
	left: 200px;
	background-color: #CE2B37;
	height: 200px;
	width: 100px;
}


.bulgarien {
	position: relative;
	width: 300px;
	height: 200px;
	background-color: #eee;
}

.bulgarien .first {
	position: absolute;
	top: 66.6px;
	background-color: #00966E;
	height: 66.6px;
	width: 300px;
}

.bulgarien .second {
	position: absolute;
	top: 133.33px;
	background-color: #D62612;
	height: 66.6px;
	width: 300px;
}


.japan {
	position: relative;
	width: 300px;
	height: 200px;
	background-color: #eee;
}

.japan .first {
	position: absolute;
	top: 40px;
	left: 30%;
	border-radius: 50%;
	background-color: #BC002D;
	height: 120px;
	width: 120px;
}


.back {
	background-color: #333;
	width: 300px;
	height: 200px;
	border: 1px black solid;
	margin: 0.5em;
	float: left;
}

.extra {
	outline: 20px blue dotted;
}



.nav li {
	display: inline;
	font-size: 20px;
	padding:...

JavaScript

(function(){
    'use strict';

    // var myContent = document.getElementById('content');
    // myContent.innerHTML = '<h3>This is Christofers template!</h3>';
    //var flagHolder = document.getElementById("flag_holder");


    var sverigesFlagga = '<div class="flag sverige"><div class="first"></div><div class="second"></div></div>';
    var italiensFlagga = '<div class="flag italien"><div class="first"></div><div class="second"></div></div>';
    var bulgariensFlagga = '<div class="flag bulgarien"><div class="first"></div><div class="second"></div></div>';
    var japansFlagga = '<div class="flag japan"><div class="first"></div></div>';
    var osterrikesFlagga = '<div class="flag osterrike"><div class="first"></div><div class="second"></div>';


    function shuffle(a) {
    var j, x, i;
    for (i = a.length; i; i--) {
        j = Math.floor(Math.random() * i);
        x = a[i - 1];
        a[i - 1] = a[j];
        a[j] = x;
        }
    }

    var flag = {
        html: "",
        init: function (html, id) {
            this.html = html;
            this.id = id;
        },

        draw: function (holder) {
            holder.innerHTML += "<div id='" + this.id + "'>" + this.html + "</div>";
        },

        undraw: function (holder) {
            holder.innerHTML = "";
        },
    };


    var jpFlag = Object.create(flag);
    var bulFlag = Object.create(flag);
    var itFlag = Object.create(flag);
    var svFlag = Object.create(flag);
    var osFlag = Object.create(flag);

    var flag_array = [];
    flag_array.push(jpFlag, jpFlag, bulFlag, bulFlag, itFlag, itFlag, svFlag, svFlag, osFlag, osFlag);

    shuffle(flag_array);


    svFlag.init(sverigesFlagga, "sv");
    itFlag.init(italiensFlagga, "it");
    bulFlag.init(bulgariensFlagga, "bul");
    jpFlag.init(japansFlagga, "jp");
    osFlag.init(osterrikesFlagga, "os");

    // for (var i = 0; i < flag_array.length; i++) {
    //     flag_array[i].draw();
    // }

    //Global variables for...