JSFiddle - React, Tailwind, and code Playground

HTML

<div id="content">
		<a><div class="title">Title</div>Text</a>
		<ul>
			<li>Text</li>
			<li>More Text...</li>
		</ul>
	</div>

CSS

body {
    font-family: Georgia;
}
div.nfo{
    width: 60px;
    background: rgba(0,0,0,.4);
    padding: .3em;
    -moz-border-radius: .4em;
    -webkit-border-radius: .4em;
    border-radius: .4em;
}

div.nfo div.date {
    background: rgba(255,255,255,1);
    -moz-border-radius: .4em;
    -webkit-border-radius: .4em;
    border-radius: .4em;
    padding: .3em;
    text-align: center;
}

div.nfo div.date span {
    display: block;
    font-size: 2em;
    font-weight: bold;
    padding: .1em 0;
    color: rgba(255,255,255,1);
    background: rgba(255,144,0,1);
    -moz-border-radius: .2em;
    -webkit-border-radius: .2em;
    border-radius: .2em;
}
div.nfo a.comments {
    display: block;
    background: rgba(255,255,255,1);
    -moz-border-radius: .4em;
    -webkit-border-radius: .4em;
    border-radius: .4em;
    text-align: center;
    text-decoration: none;
    margin: .2em 0 0;
    color: rgba(255,144,0,1);
}