JSFiddle - React, Tailwind, and code Playground

by CSS_Apprentice

HTML

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<div class="part">
  <span data-type="test">Test</span>
  <span data-type="new">New</span>
</div>

<div>
  <h5>Example 1</h5>
  <p>Test</p>
</div>

<div>
  <h5>Example 2</h5>
  <p>New</p>
</div>

<div>
  <h5>Example 3</h5>
  <p>Test</p>
</div>

CSS

body {text-align: center;}
.part span {color: blue; text-decoration: underline;}
.part span.active{color: red;}
.part span:hover {cursor: pointer;}

div:not(.part){
  background-color: white;
  display: inline-block;
  margin: 1%;
  width: 40%;
}
.hidden{display: none}

JavaScript

$(".part span").click(
  function () {
    $("span").removeClass("active");
    $(this).addClass("active");
  }
);