JSFiddle - React, Tailwind, and code Playground

by Stafox

HTML

<link rel="stylesheet" href="http://getbootstrap.com/dist/css/bootstrap.min.css">
<div class="date-to dpicker">
    <div class="chosen">To: <span class="dp-text-date-to">Jun 24, 2014</span></div>
    <div class="dp-head">
        <ul class="h-row">
            <li class="s-month"><div><a><span>Jun</span></a></div></li>
            <li class="s-year"><div><a><span>2014</span></a></div></li>
            <li class="s-nav"><div><a><span class="p-month">&lt;</span><span class="f-month">&gt;</span></a></div></li>
        </ul>
    </div>
    <div class="dp-calendar current">
        <ul class="w-row">
            <li class="day"><div><a><span>S</span></a></div></li>
            <li class="day"><div><a><span>M</span></a></div></li>
            <li class="day"><div><a><span>T</span></a></div></li>
            <li class="day"><div><a><span>W</span></a></div></li>
            <li class="day"><div><a><span>T</span></a></div></li>
            <li class="day"><div><a><span>F</span></a></div></li>
            <li class="day"><div><a><span>S</span></a></div></li>
        </ul>
        <ul class="w-row">
            <li class="date"><div><a><span>1</span></a></div></li>
            <li class="date"><div><a><span>2</span></a></div></li>
            <li class="date"><div><a><span>3</span></a></div></li>
            <li class="date"><div><a><span>4</span></a></div></li>
            <li class="date"><div><a><span>5</span></a></div></li>
            <li class="date"><div><a><span>6</span></a></div></li>
            <li class="date"><div><a><span>7</span></a></div></li>
        </ul>
        <ul class="w-row">
            <li class="date"><div><a><span>8</span></a></div></li>
            <li class="date"><div><a><span>9</span></a></div></li>
            <li class="date"><div><a><span>10</span></a></div></li>
            <li class="date"><div><a><span>11</span></a></div></li>
            <li class="date"><div><a><span>12</span></a></div></li>
            <li...

CSS

body {
    font: normal 16px Arial;
}
.dpicker {
  font-size: 14px;
  max-width: 300px;
}
.dpicker div {
  width: 100%;
}
.dpicker div.dp-head {
  font-weight: bold;
  background-color: #f4f4f4;
}
.dpicker div.dp-calendar {
  display: block;
}
.dpicker div.dp-months {
  display: none;
}
.dpicker div.dp-years {
  display: none;
}
.dpicker div ul {
  width: 100%;
  margin: 0px;
    list-style: none;
}
.dpicker div ul:after,
.dpicker div ul:before {
  content: " ";
  display: table;
}
.dpicker div ul:after {
  clear: both;
}
.dpicker div ul li {
  width: 33.333%;
  float: left;
  position: relative;
}
.dpicker div ul li:before {
  content: "";
  display: block;
  padding-top: 51%;
}
.dpicker div ul li div {
  width: 100%;
  height: 100%;
  left: 0px;
  top: 0px;
  position: absolute;
}
.dpicker div ul li div a {
  width: 100%;
  height: 100%;
  display: table;
  transition: 0;
  color: #434343;
}
.dpicker div ul li div a span {
  cursor: pointer;
  display: table-cell;
  text-align: center;
  vertical-align: middle;
  /*padding-top: 5px;*/
  /*fix to get real vAlign middle*/
}
.dpicker div ul.h-row li div a span {
  text-align: left;
}
.dpicker div ul.h-row li.s-month div {
  padding-left: 16%;
}
.dpicker div ul.h-row li.s-nav div a span.p-month {
  text-align: right;
}
.dpicker div ul.h-row li.s-nav div a span.f-month {
  text-align: center;
}
.dpicker div ul.w-row {
  padding: 1.63% 0;
  border-top: 1px solid #dadada;
}
.dpicker div ul.w-row:first-child {
  border-top: none;
}
.dpicker div ul.w-row li {
  width: 14.285%;
}
.dpicker div ul.w-row li:before {
  padding-top: 75%;
}
.dpicker div ul.w-row li div {
  width: 75%;
  left: 12.5%;
}
.dpicker div ul.w-row li.day div {
  font-weight: bold;
}
.dpicker div ul.w-row li.day div a span {
  cursor: default;
}
.dpicker div ul.w-row li.date.current div {
  border: 1px solid #81c500;
}
.dpicker div ul.w-row li.date.selected div {
  background-color: #81c500;
}
.dpicker div ul.w-row li.date.selected div a {
  color:...