JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://code.jquery.com/jquery-1.8.2.min.js" type="text/javascript"></script>
<div id="body">
   <div id="main">
      <div id="day">
         <div id="header">
             <span id="dayLabel">Luni</span>
          </div>
            <div id="body">
               <div id="dayContent">
                  <div id="materie" >
                      <span id="matLabel">Franceza</span>
                   </div>
                     <div id="materie" >
                         <span id="matLabel" >Fizica</span>
                   </div>
                     <div id="materie" >
                         <span id="matLabel" >Biologie</span>
                   </div>
                     <div id="materie">
                         <span id="matLabel" class="hotspot" onmouseout="hovermore.hide(this, 'Matematica');" onmouseover="hovermore.show(this, '-analiza-');">Matematica</span>
                   </div>
                     <div id="materie" >
                         <span id="matLabel" >Geografie</span>
                   </div>
                     <div id="materie" >
                         <span id="matLabel" >Istorie</span>
                   </div>
                </div>
          </div>
       </div>
    </div>
</div>

CSS

* {
    margin:0;
    padding:0;
}
body { background-color:#CCC; }
#main {

    padding:10px;

    margin-top:5px;

    display:table-cell;

    font-family:Calibri;

    font-size:25px;

    background-color:#50aafb;

}

#day {

    text-align:center;

    padding:7px;

    background-color:#50aafb;

    float:left;

}

#day #body {

    border-radius: 10px;

    box-shadow: 0 0 15px 4px rgba(0, 25, 45, 0.7);

}

#dayContent {

    padding:1px;

    border-radius: 10px;

}

#header {

    padding-bottom:4px;

}

#materie {

    padding:0;

    margin:0;

    background-color:#0560b1;

    color:#fff;

    min-width:100px;

    box-shadow: 0 0 2px 2px rgba(0, 25, 45, 0.5);

}

#materie:first-child {

    border-top-left-radius: 10px;

    border-top-right-radius: 10px;

}

#materie:last-child {

    border-bottom-left-radius: 10px;

    border-bottom-right-radius: 10px;

}

#materie:not(:last-child) {

    border-bottom:2px solid #00192E;

}

#dayLabel {

    background: -webkit-linear-gradient(top, rgba(174, 188, 191, 1) 0%,rgba(110, 119, 116, 1) 50%,rgba(10, 14, 10, 1) 51%,rgba(10, 8, 9, 1) 100%);

    -webkit-background-clip: text;

    -webkit-text-fill-color: transparent;

    -webkit-text-stroke: 1px rgba(0, 25, 45, 0.7);

    font-size: 40px;

}

#matLabel {

    padding:4px;

}

#footer {

    clear:both;

    text-align:left;

    margin-bottom:100px;

    z-index:99999;

}

#author {

    clear:both;

    text-align:left;

    color:#9f9f9f;

}

#save {

    clear:both;

    text-align:left;

}

#blackinsettext {

    text-decoration:none;

    font-family: Lucida Grande;

    font-weight:bold;

    color:#044d8f;

    text-shadow: #7caedb 0px 1px 0px, #000 0px -1px 0px;

}

#back {

    margin:2px;

    cursor:pointer;

    padding:5px;

    background-color:#0560b1;

    display:table-cell;

    background-clip: padding-box;

    border: 1px solid rgba(0, 25, 45, 0.5);

    border-radius: 10px;

    box-shadow: 0 0 15px 4px rgba(0, 25, 45,...

JavaScript

var l = ($(document).width() - $('#main').width()) / 2;
$('#main').animate({marginLeft:l}, 200);