JSFiddle - React, Tailwind, and code Playground

by robdodson

HTML

<div class="hero">
        <div class="hero-inner">
            <ul>
                <li class="slide first">
                    <div class="article">
                        <img src="http://placekitten.com/g/590/400" alt="OMG Kittehs!">
                        <div class="info">
                            <p class="lead">The Complete Guide to Robert Downey Junior</p>
                            <p class="publication">Esquire, May 2012</p>
                        </div>
                    </div>
                </li>
                <li class="slide">
                    <div class="magazine">
                        <img src="http://placekitten.com/g/295/400" alt="OMG Kittehs!">
                        <div class="info">
                            <p class="lead">The Complete Guide to Robert Downey Junior The Complete Guide to Robert Downey Junior The Complete Guide to Robert Downey Junior The Complete Guide to Robert Downey Junior The Complete Guide to Robert Downey Junior </p>
                            <p class="publication">Esquire, May 2012</p>
                        </div>
                    </div>
                </li>
                <li class="slide last">
                    <div class="article">
                        <img src="http://placekitten.com/g/590/400" alt="OMG Kittehs!">
                        <div class="info">
                            <p class="lead">The Complete Guide to Robert Downey Junior</p>
                            <p class="publication">Esquire, May 2012</p>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
    </div>

CSS

.hero {
    height:500px;
    width: 100%;
    background:#a4a39e;
    overflow:hidden;
    }   

.hero-inner {
    max-height:500px;
    overflow:hidden;
    }

.hero-inner ul {
    white-space:nowrap;
    }

.slide {
    display:inline-block;
    margin-right: 20px;
    }

.slide.last {
    margin-right: 0;
    }

.slide div {
    display:inline-block;
    white-space:normal;
    overflow:hidden;
    color: #FFF;
    }

.magazine {
    width:305px; /* add some extra space for shadows */
    }

.article {
    width:600px; /* add some extra space for shadows */
    }

.slide img {
    display:inline-block;
    -webkit-box-shadow: 1px 1px 8px 0px #444;
    -moz-box-shadow: 1px 1px 8px 0px #444;
    box-shadow: 1px 1px 8px 0px #444;
    }

.magazine .info {
    width: 295px;
}

.article .info {
    width: 590px;
}

.info .lead {
    margin: 15px 0 0;
    font-size: 15px;
}

.info .publication {
    margin: 10px 0 0;
    font-size: 13px;
}