JSFiddle - React, Tailwind, and code Playground

by wrxsti85

HTML

<nav class="slides-navigation"> <a href="#" class="next">Next</a>

</nav>
<div id="caption-container">
    <div class="caption-holder first"><a href="#"><div class="caption-title"><p>This is Your Life</p></div><div class="caption-info"><p>i</p></div></a>
    </div>
    <div class="caption-holder"><a href="#"><div class="caption-title"><p>Test</p></div><div class="caption-info"><p>i</p></div></a>
    </div>
    <div class="caption-holder last"><a href="#"><div class="caption-title"><p>Test 123</p></div><div class="caption-info"><p>i</p></div></a>
    </div>
</div>

CSS

.caption-holder {
    z-index: 10;
    position: absolute;
    bottom: 0;
    right: 15px;
    font-family: sans-serif;
    text-transform: uppercase;
    letter-spacing: 2px;
    display: none;
    background: #000;
}
.caption-holder.first {
    display: block;
}
.caption-holder div {
    float: left;
}
.caption-holder a {
    display: block;
}
.caption-holder .caption-title {
    color: #fff;
    font-size: 0.6em;
    background-image: url(../images/caption-bg.png);
    height: 38px;
}
.caption-holder .caption-title p {
    margin: 14px 16px 0 16px;
}
.caption-holder .caption-info {
    background-color: #FFD11B;
    font-size: 0.9em;
    height: 38px;
}
.caption-holder .caption-info p {
    text-transform: lowercase;
    font-style:italic;
    margin: 10px 16px 0 16px;
    color: #222222;
    font-weight: 700;
}
.caption-holder a:hover .caption-info p {
    color: #fff;
}

JavaScript

$(".next").click(function () {
    if ( $("#caption-container").find(":visible").hasClass('last') ) {
        $("#caption-container > .last").fadeOut(100);
        $("#caption-container .first").fadeIn(100);
    } else {
        $("#caption-container").find(".caption-holder:visible").hide().next().show();
    }
});