JSFiddle - React, Tailwind, and code Playground

by sampottinger

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<div id="title">
    <h1>A Brief History of Coffee</h1>
    <div id="by-line">prepared by <a href="">Dragonfly Coffee Roasters</a>
</div>

</div>
<div class="row">
    <div class="col-md-4 left-gutter">
        <h3>Possible origins</h3>
        <img class="big-image" src="http://gallery.mailchimp.com/32806f6c68ff9c4d5c7164582/images/Kaldic4bfc8.jpg" alt="Picture of Kaldi">
        <div class="img-caption">Artist depiction of Kaldi the Ethiopian goat herder thought to have discovered coffee, and his coffee consuming goats in the background. (img source: <a href="http://elenagrey.com/portfolio/">http://elenagrey.com/portfolio/</a>)</div>
    </div>
    <div id="content" class="col-md-7">
        <p>In a way, <a href="http://oll.libertyfund.org/index.php?option=com_content&task=view&id=256&Itemid=269">Mohammed (570 – 632 AD)</a> set the stage for the popularity of tea and coffee when he discouraged the use of all alcoholic beverages. Tea was in common use, probably in the form of locally grown herbal teas such as mint or chamomile, before caffeinated teas were available from China and India. (Were there taverns before Mohammed that were closed after the ban on alcohol or did they merely change into teahouses?) Often beverage vendors served from street-curb booths or kiosks in market areas. Another connection with Mohammed and coffee would be through the Sufi order some four hundred years later.</p>
        <p>According to one story, the effect of coffee beans on behavior was first recorded as being noticed by a goat herder from Kaffa Ethiopia in the 9th century named <a href="http://en.wikipedia.org/wiki/Kaldi">Kaldi</a> as he tended his herd of goats. Over time he began to notice that the goats became hyperactive after eating the red “cherries” from a certain plant when they changed pastures. He tried a few himself, and was soon as “energized” as his herd of goats....

CSS

p {
    margin-bottom: 25px;
}
.img-caption {
    font-size: 10px;
    color: #A0A0A0;
    width: 50%;
    margin-left: 50%;
}
.big-image {
    width: 60%;
}
.left-gutter {
    text-align: right;
}
#title {
    margin-bottom: 40px;
    text-align: center;
    background: #E0E0E0;
    padding: 30px;
}
#title h1 {
    font-size: 41px;
}
#by-line {
    margin-bottom: 15px;
}
#content {
    margin-top: 50px;
    line-height: 150%;
}
@media (max-width: 1000px) {
    .img-caption {
        margin-left: 25%;
    }
    .left-gutter {
        text-align: center;
    }
}