JSFiddle - React, Tailwind, and code Playground

by w3cplus

HTML

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

CSS

*{
      margin: 0;
      padding: 0;
    }
    
    body {
      font-family: "Helvetica Neue", Arial, Helvetica, "Nimbus Sans L", sans-serif;
      font-size: 13px;
    }
    
    .demo {
      width: 300px;
      padding: 50px;
      margin: 20px auto;
    }
    
    .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,...