JSFiddle - React, Tailwind, and code Playground

by joecritch

HTML

<ul>
    <li>
        <span><img src="//dummyimage.com/100x100"></span>
        <div><p>Test content 1</p></div>
    </li>
    <li>
        <span><img src="//dummyimage.com/100x100"></span>
        <div><p>Test content 2</p></div>
    </li>
    <li>
        <span><img src="//dummyimage.com/100x100"></span>
        <div><p>Test content 3</p></div>
    </li>
    <li>
        <span><img src="//dummyimage.com/100x100"></span>
        <div><p>Test content 4</p></div>
    </li>
</ul>

CSS

ul { list-style: none; position: relative; overflow: hidden; }
ul > li { margin-bottom: 15px; float: left; display: inline; height: 200px; }
ul > li+li { margin-left: 10px; }
ul > li > span { position: relative; }
ul > li > span:after { content: ''; width: 0; height: 0; border: 15px solid transparent; border-top-color: cyan; left: 50%; margin-left: -15px; position: absolute; bottom: -25px; display: none; }
ul > li > div { position: absolute; bottom: 0; height: 100px; background: cyan; left: 0; right: 0; display: none; } 
ul > li.active > span:after { display: block; }
ul > li.active > div { display: block; }

JavaScript

$('ul > li').click(function(e) {
    e.preventDefault();
    $('ul > li').removeClass('active').eq($(this).index()).addClass('active');
}).eq(0).click();