JSFiddle - React, Tailwind, and code Playground

by Aaron Hao

HTML

<div class="calendar">
				<span class="year">2012</span>
				<span class="day">24</span>
				<span class="month">January</span>      
			</div>

CSS

.calendar {
				  width: 160px;
				  background-color: #ededef;
				  background-image: -webkit-gradient(linear, left top, left bottom, from(#ededef), to(#ccc)); 
				  background-image: -webkit-linear-gradient(top,  #ededef,  #ccc);
				  background-image: -moz-linear-gradient(top,  #ededef,  #ccc);
				  background-image: -o-linear-gradient(top,  #ededef,  #ccc);
				  background-image: -ms-linear-gradient(top,  #ededef,  #ccc);
				  background-image: linear-gradient(top,  #ededef,  #ccc);
				  filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#ededef', EndColorStr='#cccccc');
				  font: 30px/60px "Helvetica Neue", Arial, Helvetica, "Nimbus Sans L", sans-serif;
				  text-align: center;
				  float: left;
				  color: #000;
				  text-shadow: 0 1px 0 rgba(255,255,255,1);
				  -moz-border-radius: 3px;
				  -webkit-border-radius: 3px;
				  border-radius: 3px;
				  position: relative;
				  -moz-box-shadow: 0 2px 2px #888;
				  -webkit-box-shadow: 0 2px 2px #888;
				  box-shadow: 0 2px 2px #888;
				}
				
				.calendar:before,
				.calendar:after {
				  content:"";
				  position: absolute;
				  top: 5px;
				  width: 8px;
				  height: 8px;
				  background-color: #111;
				  z-index:1;
				  -moz-border-radius:10px;
				  -webkit-border-radius:10px;
				  border-radius:10px;
				  -moz-box-shadow: 0 1px 1px rgba(255,255,255,1);
				  -webkit-box-shadow: 0 1px 1px rgba(255,255,255,1);
				  box-shadow: 0 1px 1px rgba(255,255,255,1);
				}
				.calendar:before {
				  left: 11px;
				}
				.calendar:after {
				  right: 11px;
				}
				.calendar span {
				  display: block;
				}
				.month,
				.year {
				  font: bold 20px/30px "Helvetica Neue", Arial, Helvetica, "Nimbus Sans L", sans-serif;
				  color:#fff;
				  text-shadow:#00365a 0 -1px 0;	
				  background-color:#04599a;
				  background-image:-webkit-gradient(linear, left top, left bottom, from(#04599a), to(#00365a)); 
				  background-image:-webkit-linear-gradient(top, ...