JSFiddle - React, Tailwind, and code Playground

by secretgspot

HTML

<div class="ical clearfix">
    <p class="ical"><time datetime="2011-11-25">November<em>25</em></time></p>
</div>
<p><em>『 iCal calendar icon 』</em><br />All done in css</p>

<br /><br /><br /><br />

<time class="cal" datetime="2011-11-25"><em>25<sup>th</sup></em>November</time>

<p><em>『 iCal calendar icon 2 』</em><br />2nd version, more dull then the previous one</p>

CSS

p { font-size: 15px; width: 400px; }
p em { font-weight: bold; }



div.ical {
  width: 90px;
  float: left;
  display: inline-block;
  margin: 0 10px 0 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;
}

p.ical {
  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;
}

p.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;
  }

p.ical:before, p.ical: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;
 ...