JSFiddle - React, Tailwind, and code Playground

HTML

<body>
    <div id="calendar"></div>
</body>

CSS

body {
    background: black;
}

#calendar {
    width: 518px;
    height: 264px;
    border: 1px solid black;
    padding: 1px;
    background: gray;
}

.day {
    width: 70px;
    height: 30px;
    border: 1px solid black;
    float: left;
    margin: 1px;
    background: darkgray;
    padding-top: 10px;
    text-align: center;
    color: #333;
}

.day.code {
    padding-top: 0px;
    height: 40px;
    background: lightgray;
}

#today {
    background: orange;
}

JavaScript

var calendar = document.getElementById("calendar");

var themes = [
    "hello world",
    "border",
    "binary",
    "error",
    "bounce",
    "Time",
    "input",
    "mathematics",
    "jump",
    "switch",
    "ascii",
    "pixel",
    "sound",
    "loop",
    "yellow",
    "square",
    "random",
    "search",
    "tree",
    "play",
    "wave",
    "whirlpool",
    "meta",
    "space",
    "cursor",
    "malicious",
    "pattern",
    "race",
    "golf",
    "infinity",
    "exit"
];

// add february days
for (var i = 24; i <= 28; i++){
    var d = document.createElement("div");
    d.setAttribute("class","day");
    d.textContent = "Feb " + i;
    calendar.appendChild(d);
}


var date = new Date();
var day = (date.getFullYear() == 2014 && date.getMonth() == 2) ? date.getDate() : -1;

// add march days
for (var i = 1; i <= 31; i++){
    var d = document.createElement("div");
    d.setAttribute("class","day code");
    d.textContent = "Mar " + i + "\n\n\n\n\n" + themes[i-1] ;
    calendar.appendChild(d);
    if (day == i){
        d.setAttribute("id", "today");
    }
}

// add april days
for (var i = 1; i <= 6; i++){
    var d = document.createElement("div");
    d.setAttribute("class","day");
    d.textContent = "Apr " + i;
    calendar.appendChild(d);
}