JSFiddle - React, Tailwind, and code Playground

by Andy Novocin

HTML

<div class="uWrapper">
    <div class="itemUWrap">
    <div class="item">
        <div class="iPicWrap">
            <img class="iPic" src="http://placekitten.com/700/500"/>
        </div>
        <p class="iTitle">This is an antique shaped like a cat.</p>
        <p class="iSubtitle">Subtle subtitle feline.</p>
        <p class="iSource">Charlene Upham Antiques</p>
        <p class="iDescriber">Described by Dave Nichols</p>
    </div>
    </div>
    <p class="sTime">Not Scheduled</p>
</div>
<div class="uWrapper">
    <div class="itemUWrap">
    <div class="item">
        <div class="iPicWrap">
            <img class="iPic" src="http://placekitten.com/700/900"/>
        </div>
        <p class="iTitle">This is an antique shaped like a cat.</p>
        <p class="iSubtitle">Subtle subtitle feline.</p>
        <p class="iSource">Charlene Upham Antiques</p>
        <p class="iDescriber">Described by Dave Nichols</p>
    </div>
    </div>
    <p class="sTime">Not Scheduled</p>
</div>

<ol>
<li class="sWrapper">
    <p class="slot">23.</p>
    <p class="sTime">7/8/2014 9:36:00 PM</p>
    <div class="itemSWrap">
    <div class="item">
        <div class="iPicWrap">
            <img class="iPic" src="http://placekitten.com/700/900"/>
        </div>
        <p class="iTitle">This is an antique shaped like a cat.</p>
        <p class="iSubtitle">Subtle subtitle feline.</p>
        <p class="iSource">Charlene Upham Antiques</p>
        <p class="iDescriber">Described by Dave Nichols</p>
    </div>
    </div>
</li>
</ol>

CSS

.uWrapper {
    height: 14em;
    width: 24em;
    position: relative;
    display: inline-block;
    border : .1em solid #900;
    margin: .25em;
}

.uWrapper .itemUWrap {
    position: absolute;
    display: block;
    padding: 0;
    margin: auto;
    width: 100%;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
}

.uWrapper .sTime {
    position: absolute;
    bottom: 0;
    margin: 1em;
    text-align: center;
    width: 100%;
}

.sWrapper {
    height: 14em;
    width: 24em;
    position: relative;
    display: inline-block;
    border : .1em solid #900;
    margin: .25em;
}

.sWrapper .itemSWrap {
    position: absolute;
    display: block;
    padding: 0;
    margin: auto;
    width: 100%;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
}

.sWrapper .sTime {
    position: absolute;
    bottom: 0;
    margin: 1em;
    text-align: center;
    width: 100%;
}


.item {
    height: 10em;
    width: 100%;
    position: relative;
    border : .1em solid #bbb;
}

.item .iPicWrap {
    height: 7em;
    width: 7em;
    max-width: 20%;
    display: inline-block;
    border: .2em solid #999;
    position: absolute;
    top: 0;
    left: 0;
    margin: 1em;
}

.item .iPicWrap .iPic {
    width: auto;
    height: auto;
    max-height: 100%;
    max-width: 100%;
    display: block;
    padding: 0;
    margin: auto;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.item p {
    font-weight: bold;
    font-size: 16px;
    text-align: center;
    position: absolute;
    right: 0;
    width: 80%;
}

.item p.iTitle {
    top: 0;
    margin-top: 1em;
}

.item p.iSubtitle {
    top:0;
    margin-top: 3em;
}

.item p.iSource {
    bottom: 0;
    left: 0;
    margin-left: 25%;
    width: 25%;
}

.item p.iDescriber {
    bottom: 0;
    right: 0;
    width: 25%;
}