JSFiddle - React, Tailwind, and code Playground

by Chetan Hanumantha

HTML

<div>
    <div class="example-date">
        <span class="example-day">31</span> 
        <span class="example-month">July</span> 
        <span class="example-year">2009</span>
    </div>
</div>

CSS

body { 
    font-family: Arial, Helvetica, sans-serif;
}

.example-date { 
	background-color:#987; 
	float:left;
	position:relative;
	padding:45px 5px 0px;
	margin-left:10px;
}
.example-date .example-month {
    text-transform: uppercase;
    font-size:25px;
}
.example-date .example-day {
	font-size:45px;
    line-height:45px;
	position:absolute; 
    left:5px; 
    top:0px;
}
.example-date .example-year { 
	display:block; 
	position:absolute; 
    right:-5px; 
    top:15px;
    /* for firefox, safari, chrome, etc. */
	-webkit-transform: rotate(-90deg); 
	-moz-transform: rotate(-90deg);
    /* for ie */
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}