JSFiddle - React, Tailwind, and code Playground

by kmturley

HTML

<div class="carousel">
    <ul>
        <li id="item1">
            <img src="http://www.eightyonedesign.co.uk/blog/wp-content/uploads/2009/04/70-photography-2.jpg" />
            <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer elit elit, euismod ut fermentum sit amet, molestie non nisi. Cras placerat aliquet hendrerit. Nulla turpis sapien, ultricies ac rutrum ac, elementum vitae diam.</span>
        </li>
        <li id="item2">
            <img src="http://www.stevegoslingphotography.co.uk/images/general/steve_gosling_photography.jpg" />
            <span>Example long title goes here</span>
        </li>
        <li id="item3">
            <img src="http://www.eightyonedesign.co.uk/blog/wp-content/uploads/2009/04/70-photography-2.jpg" />
            <span>Example Title 1</span>
        </li>
        <li id="item4">
            <img src="http://www.stevegoslingphotography.co.uk/images/general/steve_gosling_photography.jpg" />
            <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer elit elit, euismod ut fermentum sit amet, molestie non nisi. Cras placerat aliquet hendrerit. Nulla turpis sapien, ultricies ac rutrum ac, elementum vitae diam.</span>
        </li>
    </ul>
</div>
<div class="carousel-nav">
    <ul>
        <li><a href="#item1">Item 1</a></li>
        <li><a href="#item2">Item 2</a></li>
        <li><a href="#item3">Item 3</a></li>
        <li><a href="#item4">Item 4</a></li>
    </ul>
</div>

<div class="carousel-full">
    <ul>
        <li id="item5">
            <img src="http://www.eightyonedesign.co.uk/blog/wp-content/uploads/2009/04/70-photography-2.jpg" />
            <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer elit elit, euismod ut fermentum sit amet, molestie non nisi. Cras placerat aliquet hendrerit. Nulla turpis sapien, ultricies ac rutrum ac, elementum vitae diam.</span>
        </li>
        <li id="item6">
            <img...

CSS

/* carousel nav */

.carousel-nav {
    padding: 5px;
    background-color: grey;
}

.carousel-nav li {
    display: inline-block;
}

/* carousel */

.carousel {
    overflow: auto;
    padding: 10px;
}

.carousel ul {
    display: table;
    table-layout: fixed;
}

.carousel li {
    display: table-cell;
    vertical-align: top;
    padding: 0 10px 0 0;
}

:target { outline: solid red }

/* carousel full */

.carousel-full {
    overflow: auto;
    padding: 10px;
}

.carousel-full ul {
    white-space: nowrap;
}

.carousel-full li {
    width: 100%;
    display: inline-block;
    white-space: normal;
    vertical-align: top;
}

.carousel-full img {
    float: left;
}

.carousel-full span {
    clear: left;
    float: left;
}