JSFiddle - React, Tailwind, and code Playground

by Ken Watanabe

HTML

<body>
    <br/>
    <br/>
    <br/>
    <br/>
    <div class="test fade">
        <article class="content">
            <section class="interview">
                <header>
                    <h2 id="interview">A&#8212;D</h2>
                </header>
                <section class="meta">
                    <div><span>Title</span><span>A conversation</span>
                    </div>
                    <div><span>Date</span><span>2011</span>

                    </div>
                </section>
                <p>COS, Collection Of Style, creates modern, functional, considered design for men and women. Since the fashion brands launch in 2007, COS has opened more than a hundred stores in Europe, Asia and the U.S., each one placed in a carefully considered location and with a clear modern design concept.</p>
                <p>For winter 2014 COS commissioned Till Wiedeck to develop a bespoke in store installation for their worldwide retail shops. In close collaboration we created “Object XI &amp; XII” a unique interpretation of HelloMe’s 2012 project <a title="Critical Objects" href="http://tillwiedeck.com/2012/10/critical-objects/" target="_blank">Critical Objects</a>. The two tables continue the studio’s exploration of the border between the functional and the sculptural.</p>
                <p>“Object XI &amp; XII” is designed to host a carefully curated selection of items in a black and white theme. Merging functionality and abstraction we developed a unique rubber granulate surface resembling Travatine stone while preserving the tactile and functional aspects of the rubber.</p>
                <p>The table can be seen in COS stores worldwide from 20th of November 2014.</p>
            </section>
        </article>
    </div>

CSS

.test {
    font: 13px/17px 'Apercu Regular', 'Helvetica Neue', Arial, Helvetica, Geneva, sans-serif;
    margin-bottom: 100px;
    background-color: #FFF;
    letter-spacing: 1px;
}

.test article.content section.meta div span:first-child {
    display: block;
    float: left;
    width: 72px;
}

.test header {
    text-align: center;
}

.test h2 {
    border-bottom: 1px solid #000;
    padding-bottom: 1px;
    font-size: 13px;
}

.test article.content section.interview {
    width: 620px;
    margin-left: 38px;
}

.test article.content section.interview > header {
    margin-bottom: 17px;
}

.test article.content section.interview > p {
    text-indent: 72px;
}

.test header h2 {
    text-align: center;
    border-bottom: 1px solid #000;
    padding-bottom: 1px;
    display: inline;
}