JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://brandonaaron.net/javascripts/plugins/livequery.js"></script>


<div id="missionsAndAchivments" class="minimized">


    <div id="toogleMAminimized" style="" class="noPadding">
        <div class="" style="cursor: pointer;position: absolute;right: 0;top: 45px;"><img src ="images/MAminimized.png" alt="missions and achivments"/>
        </div>
    </div>
    
    <div id="toogleMAmaximized" style="background:#000000">
        <div id="missionsMinimized" style="display:none;margin-top:10px;margin-bottom: 10px;cursor:pointer"><img src="images/missionsMinimized.png" alt="missions"/>
        </div>
        <div id="achivmentsMinimized" style="display:none;margin-top:5px;cursor:pointer"><img src="images/achivmentsMinimized.png" />
        </div>
        <div id="missions" class="unselected MAmaximized">
            
        </div>
        <div id="achivments" class="unselected MAmaximized">
            
        </div>
        <div id="dataMA" style="position:absolute;top:10px;right:10px;display:none;width:450px;height:320px;background-image: url('images/background-home.png') ; overflow-y:scroll">
        </div>
    </div>
    
</div>

CSS

#missions{
    cursor: pointer;
    margin-top:7px;
    height: 140px;
    width:390px;
    background:#f3f3f3 url('../images/background-missions.jpg');
}

#achivments{
    cursor: pointer;
    margin-top:15px;
    height: 140px;
    width: 390px;
    background:#f3f3f3 url('../images/background-achivments.jpg');
}

.noPadding{
    padding:0 !important;
}

.noTitle .ui-dialog-titlebar{
    display:none;
}

.noTitle .ui-dialog-buttonpane,.ui-widget-content,.ui-helper-clearfix{

    margin-top: 0px !important;
    padding-top: 0px !important;
    border-top-width: 0px !important;
    padding-bottom: 0px !important;
    background:#000000;
}

.buttonMA{
    z-index:1000;
    top:320px;
    position:absolute !important;
    right:10px;
    width:70px !important;
}

.missionTitle{
    background:#ffffff url('../images/textureMA.jpg');
    height: 42px;
    width: 320px;
    display:inline-block;
    text-align: center;
    font-family: "Franklin Gothic Medium", "Impact", "Lucida Sans",sans-serif;
}

.missionTitle p{
    
}

.missionHistory{
    background-color: #b3b3b3;
    text-align: center;
}

.mission .plus{
    float:right;
    margin-top: 5px;
}

.missionHistory p{
    margin-top: 0px !important;
    margin-bottom: 0px !important;
    padding-top: 1em;
    padding-bottom:1em;
}

.mission{
    width: 390px;
    display:inline-block;
    margin-top:1em;
    margin-left:5em;
}

.mission .missionIcon{
    clear: left;
    float: left;
}

.missionData{
   width: 350px !important;
}

JavaScript

$(function() {


    dataMA = '<h1 style="color:white">Current Missions:</h1><div id="mission2" missiontitle="That is a gun!" missionpoint="1" missionicon="images/missions/icon/thatsagun-icon.jpg" made="f" class="mission notDone "><div style=""><img class="missionIcon" src="images/missions/icon/thatsagun-icon.jpg" alt="That is a gun!"></div><div class="missionData"><div class="missionTitle"><div style="width:350px;float:left;"><p>That is a gun!</p></div><img src="images/plus.png" class="plus" key="1" alt="plus"></div><div id="data1" class="missionHistory" style="display:none;"><hr style="color:#c00;background-color:#c00;height:1px;border:none;"><p>Construir 3 ataques ..We knew that they were coming, so we packed up and wait for them</p><div class="missionStatus"></div></div></div></div><h1 style="color:white">Not started missions:</h1><div id="mission1" missiontitle="A new home!" missionpoint="1" missionicon="images/missions/icon/anewhome-icon.jpg" made="f" class="mission notDone "><div style=""><img class="missionIcon" src="images/missions/icon/anewhome-icon.jpg" alt="A new home!"></div><div class="missionData"><div class="missionTitle"><div style="width:350px;float:left;"><p>A new home!</p></div><img src="images/plus.png" class="plus" key="0" alt="plus"></div><div id="data0" class="missionHistory" style="display:none;"><hr style="color:#c00;background-color:#c00;height:1px;border:none;"><p>Construir 1 ciudad. ..And then we decided to create our own city...</p></div></div></div><div id="mission4" missiontitle="A new empire!" missionpoint="10" missionicon="images/missions/icon/anewempire-icon.jpg" made="f" class="mission notDone "><div style=""><img class="missionIcon" src="images/missions/icon/anewempire-icon.jpg" alt="A new empire!"></div><div class="missionData"><div class="missionTitle"><div style="width:350px;float:left;"><p>A new empire!</p></div><img src="images/plus.png" class="plus" key="3" alt="plus"></div><div id="data3" class="missionHistory"...