JSFiddle - React, Tailwind, and code Playground

CSS Calendar

by Jennifer Perrin

HTML

<div class="calendar">
    <h1 class="month">December 2013</h1>
    <ol class="day-names">
        <li>Sun</li>
        <li>Mon</li>
        <li>Tues</li>
        <li>Wed</li>
        <li>Thur</li>
        <li>Fri</li>
        <li>Sat</li>
    </ol>
    <ol class="days">
        <li>
            <div class="date">1</div>
            <div class="event">Event with Long Name</div>
        </li>
        <li>
            <div class="date">2</div>
        </li>
        <li>
            <div class="date">3</div>
        </li>
        <li>
            <div class="date">4</div>
        </li>
        <li>
            <div class="date">5</div>
        </li>
        <li>
            <div class="date">6</div>
        </li>
        <li>
            <div class="date">7</div>
        </li>
        <li>
            <div class="date">8</div>
        </li>
        <li>
            <div class="date">9</div>
        </li>
        <li>
            <div class="date">10</div>
        </li>
        <li>
            <div class="date">11</div>
        </li>
        <li>
            <div class="date">12</div>
        </li>
        <li>
            <div class="date">13</div>
            <div class="event all-day begin span-2">Event Name</div>
        </li>
        <li>
            <div class="date">14</div>
        </li>
        <li>
            <div class="date">15</div>
            <div class="event all-day end">Event Name</div>
        </li>
        <li>
            <div class="date">16</div>
        </li>
        <li>
            <div class="date">17</div>
        </li>
        <li>
            <div class="date">18</div>
        </li>
        <li>
            <div class="date">19</div>
        </li>
        <li>
            <div class="date">20</div>
        </li>
        <li>
            <div class="date">21</div>
            <div class="event">Event Name</div>
            <div class="event">Event Name</div>
        </li>
        <li>
            <div class="date">22</div>
           ...

CSS

@import url(http://fonts.googleapis.com/css?family=Quicksand);

.clearfix:after, .calendar ol:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}

/* ==========
   Setup Page */
*, *:before, *:after {
  box-sizing: border-box;
}

body {
  padding: 1em 2em;
  background-image: url(http://subtlepatterns.com/patterns/retina_wood.png);
  color: grey;
  font-family: 'Quicksand', sans-serif;
}

/* ================
   Calendar Styling */
.calendar {
  background: white;
  padding: 3em;
  border-radius: 10px;
}
.calendar .month {
  margin-top: 0;
  font-weight: normal;
  font-size: 3em;
  color: #6eb590;
}
.calendar ol {
  list-style: none;
  margin: 0;
  padding: 0;
}
.calendar ol li {
  float: left;
  width: 14.28571%;
}
.calendar .day-names {
  border-bottom: 1px solid #eee;
}
.calendar .day-names li {
  text-transform: uppercase;
  margin-bottom: .5em;
}
.calendar .days li {
  border-bottom: 1px solid #eee;
  min-height: 8em;
}
.calendar .days li .date {
  margin: .5em 0;
}
.calendar .days li .event {
  background: #6eb590;
  font-size: .75em;
  padding: 0 .75em;
  line-height: 2em;
  color: white;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  border-radius: 1em;
  margin-bottom: 1px;
}
.calendar .days li .event.span-2 {
  width: 200%;
}
.calendar .days li .event.begin {
  border-radius: 1em 0 0 1em;
}
.calendar .days li .event.end {
  border-radius: 0 1em 1em 0;
}
.calendar .days li .event.all-day {
  background: #9987b5;
}
.calendar .days li .event.clear {
  background: none;
}
.calendar .days li:nth-child(n+29) {
  border-bottom: none;
}
.calendar .days li.outside .date {
  color: #ddd;
}