JSFiddle - React, Tailwind, and code Playground

by J. Albert Bowden

HTML

<link rel="stylesheet" type="text/css" href="http://dev.bowdenweb.com/pro/watkins/fonts/pompadour/stylesheet.css" media="screen" />
<h2 class="entry-meta">

          <a href="http://dev.bowdenweb.com/pro/watkins/blog/?p=5" class="bookmarkdate" title="4:53 pm &#45; October 20, 2011" rel="bookmark">

            <span class="sep">Posted on </span>

              <time class="entry-date" datetime="2011-10-20T05:18:15+00:00" pubdate><span class="entry-date-month">10</span> <span class="entry-date-date">20</span> <span class="entry-date-year">2011</span></time>

          </a>

          <span class="by-author">

            <span class="sep"> by </span>

            <span class="author vcard"><a class="url fn n" href="http://dev.bowdenweb.com/pro/watkins/blog/author/laura666" title="View all posts by laura666" rel="author">laura666</a></span>

          </span>

        </h2>

CSS

a{color:#000; text-decoration:none}
.entry-date{font-family: 'PompadourBlack';}
.sep,.by-author{display:none}
h2.entry-meta{    -moz-border-radius: 45px;
    -webkit-border-radius: 45px;
    border-radius: 45px; display:block;   background-color:#a8872d;
        width: 100px;
    height: 100px; position:relative
}
h2.entry-meta a{width:60px; height:60px; position:absolute; top:20px; left:20px; outline:1px solid #000; display:block}
h2.entry-meta a time{position:absolute; width:100%; height:100%}
h2.entry-meta a time span{display:block; position:absolute}
span.entry-date-month{bottom:0; left:0}
span.entry-date-date{top:0; left:0; font-size:30px}
span.entry-date-year{outline:1px solid #000; width:100%; 
 height:15px;
 left: -15px;
 line-height: 15px;
 text-indent: 3px;
  -webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); transform: rotate(-90deg);  
-webkit-transform-origin: top right;
-moz-transform-origin: top right;
transform-origin: top right;
}