JSFiddle - React, Tailwind, and code Playground

HTML

<div id="content">

    	<div id="flag1"></div>
    	<div id="flag2"></div>
    </div>

CSS

h1 {
	text-align: center;
}

h3 {
	color: red;
}

#content {
	border: 5px solid black;
	background-color: #0F47AE;
	padding: 2em;
	margin: 0 auto;
	height: 300px;
    width: 1200px;
	border-radius: 15px;
	z-index: -10;
	position: absolute;
	right: 300px;
}


.ruta {
	outline: 1px solid black;
	position: absolute;
	width: 150px;
	height: 100px;
	font-weight: bold;
	text-align: center;
	font-size: 5em;
	background-color: #FFFFFF;
	background-repeat: no-repeat;
	left: 40px;
}

.ruta:hover{
	cursor: default;
	background-color: #000000;

}

.flag {
	position: absolute;
	width: 150px;
	height: 100px;
}

.elfenbenskusten {
	background-color: #fff;
	width: 150px;
}

.elfenbenskusten .part1 {
	width: 50px;
	height: 100px;
	background-color: #f77f00;
}

.elfenbenskusten .part2 {
	position: absolute;
	top: 0;
	left: 100px;
	width: 50px;
	height: 100px;
	background-color: #009e60;
}

.litauen {
	background-color: #C1272D;
	width: 150px;

}

.litauen .part1 {
	background-color: #FDB913;
	width: 150px;
	height: 66px;
	top: 33px;
}

.litauen .part2 {
	background-color: #006A44;
	width: 150px;
	height: 33px;
	position: absolute;
	top: 33px;
	left: 0;
}

.sweden {
	background-color: #006AA7;
	heigth: 150px;
}

.sweden .vertikal {
	background-color: #FECC00;
	width: 20px;
	height: 100px;
	position: absolute;
	top: 0;
	left: 45px;
}

.sweden .horisontell {
	background-color: #FECC00;
	width: 150px;
	height: 20px;
	position: absolute;
	top: 40px;
	left: 0;
}

.japan {
    background-color: white;
}
.japan .part2 {
	border-radius: 50%;
	width: 60px;
	height: 60px;
	background-color: red;
	position: relative;
	left: 45px;
	top: 20px;
}



span.navigationSpace {
	padding-left: 40px;
}

.tyskland {
	background-color: yellow;
	width: 150px;

}

.tyskland .part1 {
	background-color: #000000;
	width: 150px;
	height: 33px;
	bottom: 10px;
}

.tyskland .part2 {
	background-color: #DD0000;
	width: 150px;
	height: 33px;
	position: absolute;
	top: 33px;
	left: 0;
}

.hidden{
  background:...

JavaScript

(function() {
  'use strict';

  var flagTarget1 = document.getElementById('flag1');
  var flagTarget2 = document.getElementById('flag2');

  var i;
  var j;


  //function that can shuffle the array
  Array.prototype.shuffle = function() {
    var input = this;
    for (var i = input.length - 1; i >= 0; i--) {
      var randomIndex = Math.floor(Math.random() * (i + 1));
      var itemAtIndex = input[randomIndex];
      input[randomIndex] = input[i];
      input[i] = itemAtIndex;
    }
    return input;
  }



  var swedishFlag = '<div class="flag sweden"><div class="vertikal"></div><div class="horisontell"></div></div>';
  //var swedishFlag = '<div class="ruta"></div>';

  var japanFlag = '<div class="flag japan"><div class="part2"></div></div>';
  //var japanFlag = '<div class="ruta"></div>';

  var litauenFlag = '<div class="flag litauen"><div class="part1"></div><div class="part2"></div></div>';
  //var litauenFlag = '<div class="ruta"></div>';

  var elfenbenskustenFlag = '<div class="flag elfenbenskusten"><div class="part1"></div><div class="part2"></div></div>';
  //var elfenbenskustenFlag = '<div class="ruta"></div>';

  var tysklandFlag = '<div class="flag tyskland"><div class="part1"></div><div class="part2"></div></div>';
  //var tysklandFlag = '<div class="ruta"></div>';

  var swedishFlag2 = '<div class="flag sweden"><div class="vertikal"></div><div class="horisontell"></div></div>';
  //var swedishFlag2 = '<div class="ruta"></div>';

  var japanFlag2 = '<div class="flag japan"><div class="part2"></div></div>';
  //var japanFlag2 = '<div class="ruta"></div>';

  var litauenFlag2 = '<div class="flag litauen"><div class="part1"></div><div class="part2"></div></div>';
  //var litauenFlag2 = '<div class="ruta"></div>';

  var elfenbenskustenFlag2 = '<div class="flag elfenbenskusten"><div class="part1"></div><div class="part2"></div></div>';
  //var elfenbenskustenFlag2 = '<div class="ruta"></div>';

  var tysklandFlag2 = '<div class="flag tyskland"><div...