JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="row block-grid events">
  <li class="small-12 medium-6 large-4 column event">
    <dl>
      <dt><time date="2016-02-02">Feb 2</time></dt>
      <dd>Boston Public Library at 7:00pm</dd>
      <dd>Book launch</dd>
      <dd>Boston, MA</dd>
      <dd><a href="http://www.bpl.org">More details</a></dd>
    </dl>
  </li>
  <li>
    <dl>
      <dt><time date="2018-02-02">Feb 2</time></dt>
      <dd>Boston Public Library at 7:00pm in the future</dd>
      <dd>Book launch</dd>
      <dd>Boston, MA</dd>
      <dd><a href="http://www.bpl.org">More details</a></dd>
    </dl>
  </li>

  <li>
    <dl>
      <dt><time date="2012-02-02">Feb 2</time></dt>
      <dd>Boston Public Library at 7:00pm in the past</dd>
      <dd>Book launch</dd>
      <dd>Boston, MA</dd>
      <dd><a href="http://www.bpl.org">More details</a></dd>
    </dl>
  </li>
</ul>

CSS

.event {
        background-color: #fff;
      }

JavaScript

$('time').each(function() {
  var submitted_date = new Date($(this).attr('date'));
  var now = new Date();
  console.log(submitted_date.getTime() < now.getTime());
  if (submitted_date.getTime() < now.getTime()) {
    $(this).parent().parent().css('background', 'gray')
  }
});