JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title></title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <!-- Place favicon.ico and apple-touch-icon.png in the root directory -->

        <link rel="stylesheet" href="css/main.css">
        <script src="js/vendor/modernizr-2.6.2.min.js"></script>
    </head>
    <body>

        <h1 id="title">Plan klasy: <span id="klasa"></span></h1> <br />
        <div class="buttons">
            <div class="back btn-default"><img src="http://oi61.tinypic.com/2nap62r.jpg"></div>
            <div class="btn-default">Niemiecki</div><div class="btn-default">Rosyjski</div>
            <div class="btn-default">Inf gr I</div><div class="btn-default">Inf gr II</div>
            <div class="btn-default">wf chł</div><div class="btn-default">wf dzw</div>
        </div>
        <div class ='choose'>
            <div class="btn-default">2a</div><div class="btn-default">6a</div>
        </div>
        <div class="plan">
            <div id="nr"><p>nr.</p></div>
            <div id="godz"><p>Godz</p></div>
            <div id=0><p>Poniedziałek</p></div>
            <div id=1><p>Wtorek</p></div>
            <div id=2><p>Środa</p></div>
            <div id=3><p>Czwartek</p></div>
            <div id=4><p>Piątek</p></div>
        </div>

        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
        <script>window.jQuery || document.write('<script src="js/vendor/jquery-1.10.2.min.js"><\/script>')</script>
        <script src="js/main.js"></script>
    </body>
</html>

CSS

.choose {
    width: 2%;
    font-size: 1.2vw;
    margin: 0 0 0 5px;
    text-align: center;
    border: 1px solid;
    cursor: pointer;
}
img {
    width: 1.2vw;
}
.buttons {
    margin: -40px 0 0 80px;
    height: 30px;
}
.buttons > div{
    display: inline-block;
    border: 1px solid;
    border-radius: 3px;
    width: 8%;
    text-align: center;
    font-style: italic;
    font-size: 1.2vw;
    margin: 5px 5px 5px 5px;
    position: relative;
    cursor: pointer;
    font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;
}
.plan>div>p:hover {
    background-color: #FFD700;
}
.buttons > .back {
    position:relative;
    border: 1px solid;
    border-radius: 10px;
    width: 2%;
    font-size: 1.2vw;
    padding: 3px;
    line-height: 10px;
    margin: 0 0 0 -50px;
}
.plan {
    position: relative;
    width: 100%;
    height: 100%;
    margin: 0 0 0 10px;
}
.plan div {
    display: block;
    float: left;
    margin: 0 3px 0 0;
    width: 16%;
}
.plan > div > p:first-child {
    background-color: #FFCC00
}
.plan > div > p:nth-child(2) {
    background-color: #F1F1F1
}
.plan > div > p {
    height: 1.5vw;
    border: 1px solid black;
    text-align: center;
    font-family: Verdana, Geneva, sans-serif;
    font-style: italic;
    font-size: 1.2vw;
    margin: 5px 0 0 0;
}
#nr {
    width: 3%;
}
#godz {
    width: 7%;
}
.hidden{
    visibility: hidden;
}
/*!
 * Bootstrap v3.2.0 (http://getbootstrap.com)
 * Copyright 2011-2014 Twitter, Inc.
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
 */

.btn-default {
    text-shadow: 0 -1px 0 rgba(0, 0, 0, .2);
    -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .15), 0 1px 1px rgba(0, 0, 0, .075);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .15), 0 1px 1px rgba(0, 0, 0, .075);
}
.btn-default:active
 {
    -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
    box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
}
.btn:active,
.btn.active {
    background-image:...

JavaScript

//Próba nr 3 -,-
//Klasa Plan
var Klasy = {
    kl2a: function () {
        var x = this.lekcje;
        return [
            [x.nic.name, x.mat.name, x.mat.name, x.pol.name, x.pol.name, x.fiz.name, x.ang.name, [x.niem.name, x.ros.name], x.inf1.name],
            [x.nic.name, x.inf1.name, x.inf1.name, x.gw.name, x.fiz.name, x.mat.name, x.cis.name, x.wf_chl.name, x.wf_chl.name],
            [x.nic.name, x.inf2.name, x.inf2.name, x.ang.name, x.mat.name, x.wf_chl.name, x.cis.name, x.his.name, x.niem.name],
            [x.wf_dzw.name, x.wf_dzw.name, x.mat.name, x.mat.name, x.fiz.name, x.pol.name, x.his.name, x.rel.name, x.inf2.name],
            [x.nic.name, x.ros.name, x.mat.name, x.ang.name, x.fiz.name, x.fiz.name, x.rel.name, x.pol.name, x.nic.name]
        ]
    },
    kl6a: function () {
        var x = this.lekcje;
        return [
            [x.nic.name, x.rel.name, x.przy.name, x.his.name, x.pol.name, x.mat.name, x.muz.name, x.ang.name],
            [x.nic.name, x.pol, [x.wf_chl.name, x.wf_dzw.name], x.mat.name, x.ang.name, x.pla.name, x.inf2.name, x.ang.name],
            [x. nic.name, x.mat.name, x.pol.name, x.przy.name, x.his.name, [x.wf_chl.name, x.wf_dzw.name], x.gw.name],
            [ x.nic.name,x.mat.name,x.rel.name,x.pol.name,x.pol.name, [x.wf_chl.name, x.wf_dzw.name]],
            [ x.nic.name, x.pol.name, x.przy.name, x.mat.name, [x.wf_chl.name, x.wf_dzw.name], x.tech.name, x.ang.name]
            ]

    },
    //Lista lekcji
    lekcje: {
        mat: {
            name: 'matma'
        },
        pol: {
            name: 'polski'
        },
        fiz: {
            name: 'fizyka'
        },
        inf1: {
            name: 'informatyka gr 1'
        },
        inf2: {
            name: 'informatyka gr 2'
        },
        cis: {
            name: 'człowiek i środowisko'
        },
        ang: {
            name: 'angielski'
        },
        niem: {
            name: 'niemiecki'
        },
        ros: {
            name: 'rosyjski'
      ...