JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<!DOCTYPE html>

    <link rel="stylesheet" href="style.css" media="screen" title="no title" charset="utf-8">
    <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>


<body>

<header>
 <a href="" ><span class="fa fa-refresh spin" style="font-size:25px;"></span><span class="igen spin">&nbsp;igen</span></a>
 <span class="points"><i class="fa fa-thumbs-o-up" style="font-size:24px"></i>Rigtige:  &nbsp;&nbsp;&nbsp; <span id="rigtige">0</span> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <i class="fa fa-thumbs-o-down" style="font-size:24px"></i>Forkerte: &nbsp;&nbsp;&nbsp;<span id="forkerte">0</span></span>
</header>

<div class="container">

          <div class="img" id="img1">
            <div class="plaatje" id="plaatje1"><img class="center" src="img/cat.jpg" alt="cat" width="50%;"></div>
            <div class="move1"><div class="antwoord droppable" id="antwoord1"><i class="fa fa-play" style="font-size:20px" ></i></div></div>
          </div>
          <div class="img" id="img2">
            <div class="plaatje" id="plaatje1"><img class="center" src="img/beak.jpg" alt="beak" width="50%;"></div>
            <div class="move2"><div class="antwoord" id="antwoord2"><i class="fa fa-play" style="font-size:20px" ></i></div></div>
          </div>
          <div class="img" id="img3">
            <div...

CSS

body, html {
  margin-left: 10%;
  margin-right: 10%;
  padding: 0px;
  height: 100%;
  font-family: georgia, "Comic Sans MS";
  background-color: #f0f0f0;
}
.container {
  height:90%;
  border-collapse:collapse;
  display : table;
}
.igen {
  font-size: 25px;
  font-weight: bold;
}
.points {
    float: right;
}
.container {
  height:90%;
  border-collapse:collapse;
  display : table;
}

header {
  height: 5%;
  border-bottom: thick solid grey;
}

.img {
  width: 25%;
  height: 30%;
  background-color:#f0f0f0;
  float: left;
}
.center {
  margin-left: 25%;
  margin-right: 25%;
}
.antwoord {
  float: left;
  width: 95%;
  height: 25px;
  background-color: white;
  border-style: solid;
  border-color: #000000;
  border-width: 4px;
}

.move2 {
margin-top: 12.5%
}
.move4 {
margin-top: 19%
}
.move5 {
margin-top: 33.5%
}
.move6 {
margin-top: 20.8%
}
.move7 {
margin-top: 37.5%
}

.border {
  margin-top: 45%;
  border-top: thick solid grey;
  background-color: red;
}

.word, .word .tekst, .word p {
  display: inline;
  margin-left: 7%;
  font-weight: bold;
}
.my-row {
  clear: both;
}
.answers .word, .answers .word2 {
  float: left;
  padding: 3px;
  margin-left: 7%;
  font-weight: bold;
}
.fa {
  
  margin-left: 5px;
  margin-top: 2px;
}
.word, .word2 {
  padding-top: 5%;
  margin: 5%;
}

footer {
    border-top: thick solid grey;
    height: 5%;
    display : table-row;
    vertical-align : bottom;
}
.sprint {
  float: right;
}
.copyright {
  position: relative;
  bottom: 20px;
  left: 65px;
  font-size: 10px;
}
a{
  text-decoration: none;
  color: black;
}
a:hover{
  text-decoration: none;
  color: black;
}

JavaScript

$( document ).ready(function() {
    var rigtige = 0; //good_points
    var forkerte = 0; //false_points
    var answers;
    var footer;
    var timer = setInterval(function() {getReady();}, 203);
    var number = [0, 1, 2, 3, 4, 5, 6, 7];


//define JSON arrays (jsonData_0_123.json)
    function getReady()
    {
        if(jsonData !== "noJson")
        {
            clearInterval(timer);
            answers = jsonData.answers;
            footer = jsonData.footer;
            makeWordList();
            dragDrop();
        }
    }
//end


function makeWordList()
{
    shuffle(number);
    var text_time;
    for (var j = 0; j < answers.length; j++) {
        var i = j + 1;
        //<div class="tekst draggable" id="tekst1"> <p>kat</p> </div>
        document.getElementById("word" + number[j]).innerHTML = '<div class="tekst draggable" id="tekst' + i + '"> <span>'+ answers[j] +'</span></div>'


    }
}
// //makeWordList
//     function makeWordList() {
//         shuffle(number);
//         for (var i = 0; i < answers.length; i++) {
//           //<div class="tekst draggable" id="tekst1"> <p>kat</p> </div>
//           var j = i + 1;
//           var str = '<div class="tekst draggable" id="tekst'+ j +'"> <p>'+ answers[i] +'</p> </div>';
//           document.getElementById('word' + number[i]).innerHTML = str;
//         }
//     };
//
// //end

//shuffle
function shuffle(array) {
  var currentIndex = array.length, temporaryValue, randomIndex;

  while (0 !== currentIndex) {

    randomIndex = Math.floor(Math.random() * currentIndex);
    currentIndex -= 1;

    temporaryValue = array[currentIndex];
    array[currentIndex] = array[randomIndex];
    array[randomIndex] = temporaryValue;
  }

  return array;
}
//end

//make dragdroppable
    function dragDrop() {
//Make the revert event for draggable
           $.ui.draggable.prototype._mouseStop = function(event)
           {
               //If we are using droppables, inform the manager about the drop
            ...