JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.css">
<script src="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.js"></script>
<div id="page1" data-role="page">
    <div data-role="header">
        <h1>Page 1</h1>
    </div>
    <div data-role="content">
        <p class="special">This is a paragraph whose highlighting will be toggled when clicked.</p>
        <a href="#page2" data-role="button">Go to Page 2</a>
    </div>
</div>

<div id="page2" data-role="page">
    <div data-role="header">
        <h1>Page 2</h1>
    </div>
    <div data-role="content">
        <p class="special">This is a paragraph whose highlighting will be toggled when clicked.</p>
        <a href="#page1" data-role="button">Go to Page 1</a>
    </div>
</div>

CSS

.black {
    color: black;
}

.red {
    color: red;
}

.orange {
    color: orange;
}

.yellow {
    color: yellow;
}

.green {
    color: green;
}

.blue {
    color: blue;
}

.indigo {
    color: indigo;
}

.violet {
    color: violet;
}

JavaScript

$(document).ready(function() {
    var colors = [ "black", "red", "orange", "yellow", "green", "blue", "indigo", "violet" ],
        colorIndex = 0,
        currentColor = "";
    
    $(".special").click(function() {
        $(this).removeClass(currentColor);
        colorIndex = (colorIndex < colors.length - 1) ? colorIndex + 1 : 0;
        $(this).addClass(colors[colorIndex]);
        currentColor = colors[colorIndex];
    });
    
    $("a").click(function() {
        $(".special").attr("class", "special");
        colorIndex = 0;
        currentColor = "";
    });
});