JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="http://www.shamusyoung.com/promo/style.css">
<div style="width=100%;text-align:center;">
<a href="/twentysidedtale/?p=21860" title="The Best of 2013" target="_top"><div class="bawx"><h2>The Best of 2013</h2><img src="http://www.shamusyoung.com/promo/images/thumb_2013.jpg" width="145" style="
/* min-height: 186px; */
"><p>My picks for what was important, awesome, or worth talking about in 2013.</p></div></a> <a href="/twentysidedtale/?p=19697" title="Spoiler Warning:<br>BioShock" target="_top"><div class="bawx"><h2>Spoiler Warning:<br>BioShock</h2><img src="http://www.shamusyoung.com/promo/images/thumb_sw_bioshock.jpg" width="145"><p>A confusing game that's really smart for a shooter, but kind of dumb compared to its RPG-focused forebears.</p></div></a> <a href="/twentysidedtale/?p=15248" title="The Witch Watch" target="_top"><div class="bawx"><h2>The Witch Watch</h2><img src="http://www.shamusyoung.com/promo/images/thumb_witch_watch.jpg" width="145"><p style="
">My first REAL published book, about a guy who comes back from the dead due to a misunderstanding.</p></div></a> <a href="/twentysidedtale/?p=16959" title="Spoiler Warning:<br>Mass Effect 3" target="_top"><div class="bawx"><h2>Spoiler Warning:<br>Mass Effect 3</h2><img src="http://www.shamusyoung.com/promo/images/thumb_sw_masseffect3.jpg" width="145"><p>Everyone was so worked up about how terrible the ending was that they overlooked how terrible everything else was. We're here to fix that.</p></div></a> <a href="/twentysidedtale/?p=17939" title="Overthinking Zombies" target="_top"><div class="bawx"><h2>Overthinking Zombies</h2><img src="http://www.shamusyoung.com/promo/images/thumb_zombies.jpg" width="145"><p>Let's ruin everyone's fun by listing all the ways in which zombies can't work, couldn't happen, and don't make sense.</p></div></a>
</div>
CSS
@import url(http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz);
@import url(http://fonts.googleapis.com/css?family=Belgrano);
/* css resets */
body, div, dl, dt, dd, xul, xol, xli, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, button, textarea, blockquote {
margin: 0;
padding: 0;
}
html, html a {
-webkit-font-smoothing: antialiased !important;
}
/*-----------------------------------------------------------------------------
Globals
-----------------------------------------------------------------------------*/
body {
xbackground: #ff0;
font-family: 'Arial', sans-serif;
font-size: 12px;
margin: 0px;
padding: 0px;
}
h2 { margin-bottom: 0px; font-size:small;}
img { opacity: 0.6; }
.bawx
{
padding: 0px;
margin: 3px;
min-height: 336px;
max-height: 336px;
min-width: 145px;
max-width: 145px;
display: inline-block;
background: #ccc;
border-radius: 4px;
text-align: left;
vertical-align:text-top;
}
.bawx p { padding: 4px; margin: 0px;}
.bawx h2 { padding: 10px 5px; min-height: 30px; text-align: center; /* background-color: #f0f0ee; */ border-radius: 4px;}
.bawx:hover {
background:#fff;
}
.bawx:hover img { opacity: 0.66; }
a {
color: #000;
text-decoration: none;
}
a:link {
color: #000;
text-decoration: none;
}
.header a
{
color: #00f;
text-decoration: underline;
}