JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.3.3/underscore-min.js"></script>
<head>      
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
  <script type="text/javascript" src="http://code.jquery.com/ui/1.8.21/jquery-ui.min.js"></script>  
</head>

<body>
  <div class="maincontain">
  <div class="container">
  <img src="http://designbeep.designbeep.netdna-cdn.com/wp-content/uploads/2010/11/1.collection-of-character-mascot-illustrator-tutorial.jpg">
  
     <ul style="display:none;" id="answerlist">
     
        <li data-answer="1" data-sum="4 - 3 ="></li>
         
        <li data-answer="2" data-sum="7 - 5 ="></li>
      
        <li data-answer="3" data-sum="1 + 2 ="></li>
      
        <li data-answer="4" data-sum="1 + 3 ="></li>
      
        <li data-answer="5" data-sum="4 - 3 ="></li>
         
        <li data-answer="6" data-sum="10 - 4 ="></li>
         
        <li data-answer="7" data-sum="4 + 3 ="></li>
         
        <li data-answer="8" data-sum="2 x 4 ="></li>
         
        <li data-answer="9" data-sum="4 + 5 ="></li>
         
        <li data-answer="10" data-sum="1 x 10 ="></li>
         
        <li data-answer="11" data-sum="10 + 1 ="></li>
         
        <li data-answer="12" data-sum="2 x 6 ="></li>
         
        <li data-answer="13" data-sum="9 + 4 ="></li>
         
        <li data-answer="14" data-sum="2 x 7 ="></li>
        
        <li data-answer="15" data-sum="11 + 4 ="></li>
       
      </ul>
  <div class="squares">
      
            <div id="drag1" class="drag ui-widget-content box-style2" tabindex="0" data-number="1">
            <p>1</p>
            </div>    
            
            
            <div id="drag2" class="drag ui-widget-content box-style" tabindex="0" data-number="2">
            <p>2</p>
            </div>
            
            <div id="drag3" class="drag ui-widget-content box-style" tabindex="0"...

CSS

.drag {

    background: none repeat scroll 0 0 #DDDDDD;
    display: inline-block;
    height: 61px;
    line-height: 25px;
    margin-right: -4px;
    text-align: center;
    width: 61px;
}

.drag :hover {

    -moz-transform: scale(1.1);
    -webkit-transform: scale(1.1);
    transform: scale(1.1);     
}

table {
    clear:both;
    line-height:25px;
     text-align:center;    

}

.drop {
   
    height:61.5px;
    width:61.5px;
    cursor: move;
    -moz-transition: all 1s ease-out;
    -webkit-transition: all 1s ease-out;
    opacity: 1;
}
.maincontain {
    
    width: 557.5px;
    border: solid 8pt lightgreen;
    -webkit-box-shadow: 4px 4px 4px green;
    -moz-box-shadow: 4px 4px 4px green;
    box-shadow: 4px 4px 4px green;  
    background: #cc66ff;       
}

.container {
       
    height: 370px;
    position: relative;
    width: 1000px;       
}

.container > img {
        
    height: 373px;
    position: absolute;
    width: 373px;
    cursor: move;
                  
}

table {
    margin: 0;
    padding: 0;
    line-height: 56px;
               
}
 
article, aside, figure, footer, header, hgroup,
menu, nav, section {
    
    display: block;    
}
  
table td {
    
    border: 1px solid white;
    border-style: dashed;
    position: relative;
    vertical-align: top;
    cursor: move;
    min-height:60px;
    max-width:60.3px;
    min-width:60.3px;
    max-height:60px;
    background: #cc66ff;
    float: left;         
}
    
table td div {
         
    position: absolute;
    width: 59.5px;
    height: 59.5px;
    cursor: move;
    opacity: 1;
}

.tablestyle{
  
    position: absolute;
    color: transparent;
    font-family: arial;
    font-size: 35pt;
    text-align: center;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;

      
}


.spellanswer {
 
    -webkit-box-shadow: inset 0px 0px 10px 5px purple;
   ...

JavaScript

var listOfanswers = [];
var maxanswers = 15;
var rndanswer = [];
var score = {
    right: 0,
    wrong: 0,
    attempts: 0
};
var counter = 0;
var ul = document.getElementById("answerlist");
var i;

for (i = 0; i < maxanswers; ++i) {
    listOfanswers.push({
        "name": ul.children[i].getAttribute("data-answer"),
        "sum": ul.children[i].getAttribute("data-sum")

    });
}
chosenanswers = jQuery("#answerlist li").get().sort(function() {
    return Math.round(Math.random()) - 0.5
}).slice(0, 2)

var copylist = listOfanswers.slice();
for (var x = 0; x < listOfanswers.length; x++) {
    var rand = Math.floor(Math.random() * (copylist.length));
    chosenanswers.push(copylist[rand].name);
    copylist.splice(rand, 1);
    if (chosenanswers.length < 12) {
        chosenanswers.push('   ');
    }

}

var shuffledanswers = [];
shuffledanswers = chosenanswers.sort(function() {
    return 0.5 - Math.random()
});


var unusedShuffledanswers = shuffledanswers.slice();

function getXSpaces(numOfSpaces) {
    var answer = "";
    for (var i = 0; i < numOfSpaces; i++) {
        answer += " ";
    }
    return answer;
}


function getanswerToFitIn(spaceAvail, answerlist) {
    var foundIndex = -1;

    var answer = _.find(answerlist, function(answer, index) {
        if (answer.length <= spaceAvail) {
            foundIndex = index;
            return true;
        }
    });


    if (foundIndex == -1) {
        answer = getXSpaces(spaceAvail);

        _.find(answerlist, function(answer, index) {
            if (answer[0] == " ") {
                foundIndex = index;
                return true;
            }
        });
    }


    if (foundIndex != -1) {
        answerlist.splice(foundIndex, 1);
    }
    return answer;

}

var guesses = {};
var tbl = document.createElement('table');
tbl.className = 'tablestyle';
var answersPerRow = 2;
var numRows = 6;
var numnumbers = 6;

for (var i = 0; i < numRows; i++) {
    if (unusedShuffledanswers.length == 0) {
       ...