JSFiddle - React, Tailwind, and code Playground
HTML
<div class="yearBanner">2012</div>
<section class="wrapper"> <a id="mainImage" class="floatLeft" href="http://www.amazon.com/exec/obidos/ASIN/B00655KLOY/garrphotgall-20" target="_blank">
<img
height="160"
width="107"
src="http://images.amazon.com/images/P/B00655KLOY.01.MZZZZZZZ.jpg"
alt="Ben Fountain book cover"></img>
</a>
<div id="prizeCategory" class="category">Fiction</div>
<br/> <cite id="prizeTitle" class="title">Billy
Lynn's
Long
Halftime
Walk</cite>
<br/>
<div id="prizeArtist" class="author">Ben Fountain</div>
<br/>
<button> <a href="http://www.amazon.com/exec/obidos/ASIN/B00655KLOY/garrphotgall-20" target="_blank">Kindle</a>
</button>
<button> <a href="http://www.amazon.com/exec/obidos/ASIN/0060885599/garrphotgall-20" target="_blank">Hardbound</a>
</button>
<button> <a href="http://www.amazon.com/exec/obidos/ASIN/0060885610/garrphotgall-20" target="_blank">Paperback</a>
</button>
</section>
<section class="wrapper"> <a id="mainImage" class="floatLeft" href="http://www.amazon.com/exec/obidos/ASIN/B007EDOLJ2/garrphotgall-20" target="_blank">
<img
height="160"
width="107"
src="http://images.amazon.com/images/P/B007EDOLJ2.01.MZZZZZZZ.jpg"
alt="Andrew Solomon book cover"></img>
</a>
<div id="prizeCategory" class="category">General Nonfiction</div>
<br/> <cite id="prizeTitle" class="title">Far
From
the
Tree:
Parents,
Children,
and
the
Search
for
Identity</cite>
<br/>
<div id="prizeArtist" class="author">Andrew Solomon</div>
<br/>
<button> <a href="http://www.amazon.com/exec/obidos/ASIN/B007EDOLJ2/garrphotgall-20" target="_blank">Kindle</a>
</button>
<button> <a href="http://www.amazon.com/exec/obidos/ASIN/0743236718/garrphotgall-20" target="_blank">Hardbound</a>
</button>
<button> <a href="http://www.amazon.com/exec/obidos/ASIN/0743236726/garrphotgall-20"...
CSS
* {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
/* This added 7/12/2013 to allow for jQueryUI buttons without them being oversized -
the fiddle for it: http://jsfiddle.net/RFUsW/1/ */
.ui-button-text-only .ui-button-text {
padding: .2em .5em;
line-height: 1.2;
font-size: 0.8em;
}
html {
background-color: black;
}
.yearBanner {
font-size: 2em;
color: white;
/*font-family: Verdana, Arial, Helvetica, sans-serif;*/
font-family: 'Segoe UI Light', Candara, Calibri, Consolas, sans-serif;
float: left;
padding-top: 50px;
}
.floatLeft {
float: left;
padding-right: 20px;
padding-left: 5px;
}
section.wrapper {
/* this may need to be wider when landscape cover img is used - 350 or even 353 */
min-width: 340px;
overflow: hidden;
display: inline-block;
}
.category {
display: inline-block;
font-family: Consolas, sans-serif;
font-size: 2em;
color: Orange;
width: 160px;
}
.title {
display: inline-block;
font-family: Calibri, Candara, serif;
color: Yellow;
width: 160px;
}
.author {
display: inline-block;
font-family: Courier, sans-serif;
font-size: 0.8em;
color: White;
width: 160px;
}
/*Add this for the landscape (mostly children's) books:*/
.horz {
width: 160px;
height: 107px;
/*will min-width on section have to be changed, too?*/
}
JavaScript
$('button').button();