JSFiddle - React, Tailwind, and code Playground
HTML
<div class="events-list-wrapper">
<div class="event">
<p class="date"><span>Jan</span> 17-21</p>
<h3>Event Title</h3> ...
</div>
<div class="event">
<p class="date"><span>Aug</span> 30-21</p>
<h3>Event Title</h3> ...
</div>
</div>
CSS
.past {
border: 1px solid gray;
}
.today {
border: 1px solid blue;
}
JavaScript
// get today's date
var today = new Date();
today = new Date(today.getFullYear(), today.getMonth(), today.getDate());
$('div.event').each(function() {
var div = $(this);
var divDate = Date.parse($('.date', this).text());
switch (divDate) {
case divDate < today:
div.addClass('past');
break;
default:
div.addClass('today');
break;
}
});