JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
    <li class="event">
        <a id="all" href="#" class='white'>
            <div class='all swatch'></div>
        </a>
    </li>
    
    <li class="event">
        <a id="red" href="#">
            <div class='swatch red-color'></div>
        </a>
    </li>
    
    <li class="event">
        <a id="blue" href="#">
            <div class='swatch blue-color'></div>
        </a>
    </li>
</ul>

<div id="bigCal">
    <p class="all"><a href="http://foo.com" title="All event">All events</a></p>
    <p class="all blue"><a href="http://bar.com" title="Blue event">Blue event</a></p>
    <p class="all red"><a href="http://foobar.com" title="Red event">Red event</a></p>
</div>

CSS

.swatch{
    width: 20px;
    height: 20px;
    display: inline-block; 
    border: 1px solid #888;
}
.swatch:hover{
    border: 1px solid #000;   
}
.red-color{background-color: #ff0000;}
.blue-color{background-color: #0000ff;}

JavaScript

$(document).ready(function() {
    // hide all the events
    $("#bigCal p").hide();

    $(".event a").click(function(evt) {
        evt.preventDefault();
        $("#bigCal p").hide();
        var id = $(this).attr('id');

        $("." + id).show();
    });
});