JSFiddle - React, Tailwind, and code Playground

by secretgspot

HTML

<div class="ical" id="cal1"><p><em></em></p></div>
<div class="ical" id="cal2"><p><em></em></p></div>

CSS

div.ical {
  width: 90px;
  float: left;
  margin: 0 10px 10px 0;
  
  background:#868fa0;
  background:-webkit-gradient(linear, left top, left bottom, from(#b0b5bd), to(#868fa0) ); 
  background:-moz-linear-gradient(top,  #b0b5bd,  #868fa0);
  
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  
  -moz-box-shadow:0 2px 2px #333;
  -webkit-box-shadow:0 2px 2px #333;
  box-shadow:0 2px 2px #333;
}

div.ical p{
  margin: 5px;
  padding: 5px 0 0 0;
  width: 80px;
  text-align:center;
  
  background:#ec9191;
  background:-webkit-gradient(linear, right top, left bottom, from(#ec9191), to(#b44c4b),color-stop(0.5, #b44c4b) ); 
  background:-moz-linear-gradient(top,  #ec9191, #b44c4b 50%,  #b44c4b); 
  font: bold 10px/30px Arial, Helvetica, san-serif;
  
  color: #fff;
  text-shadow:#331908 0 -1px 0;
  
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  position: relative;
  -moz-box-shadow:0 2px 2px #333;
  -webkit-box-shadow:0 2px 2px #333;
  box-shadow:0 2px 2px #333;
}

div.ical em{
  display:block;
  font: bold 40px/60px Arial Black, Helvetica, sans-serif;
  color:#000;
  text-shadow: #fff 0 1px 0;
  margin: -7px 0 0 0;
  
  background: #f3f3f3;
  background: -webkit-gradient(linear, left top, left bottom, from(#f3f3f3), to(#e5e5e5));
  background: -moz-linear-gradient(top, #f3f3f3, #e5e5e5);
  
  -moz-border-radius-bottomright:3px;
  -webkit-border-bottom-right-radius:3px;  
  border-bottom-right-radius:3px;
  
  -moz-border-radius-bottomleft:3px;
  -webkit-border-bottom-left-radius:3px;  
  border-bottom-left-radius:3px;
  
  border-top:1px solid #fff;
  
  text-align:center;
  }

div.ical p:before, div.ical p:after{
  content:'';
  float:left;
  position:absolute;
  top:4px;  
  width:5px;
  height:5px;
  background:#111;
  z-index:1;
  -moz-border-radius:5px;
  -webkit-border-radius:5px;
  border-radius:5px;
  -moz-box-shadow:0 1px 1px #fff;
  -webkit-box-shadow:0 1px 1px #fff;
  box-shadow:0 1px 1px...

JavaScript

(function(win) {
    var doc = win.document,
        month_names_short = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
    
    function ical(id, date){
        var ical = doc.getElementById( id ),
            month;

        date = date ? date : new Date();
        month = date.getMonth() + 1;

        ical.innerHTML = ["<p>", month, "m - ", month_names_short[month-1], 
            "<em>", date.getDate(), "</em></p>"].join("");
    }
    
    ical("cal1");
    ical("cal2",new Date(2011,8,1));

})(this);