JSFiddle - React, Tailwind, and code Playground

by jklm313

HTML

<div class="img">One</div>
<div class="img">Two</div>
<div class="img">Three</div>

<div class="first text">First</div>
<div class="second text">Second</div>
<div class="third text">Third</div>

CSS

.img {
    float: left;
    margin-right: 5px;
    padding: 30px;
    background: indianred;
    }
.text {
    display: none;
    clear: both;
    }
    .img:first-of-type.active ~ .first,
    .img:nth-of-type(2).active ~ .second,
    .img:nth-of-type(3).active ~ .third {
        display: block;
        }

JavaScript

$('.img').click(function() {
    $('.active').removeClass('active');
    $(this).addClass("active");
});