JSFiddle - React, Tailwind, and code Playground

HTML

<div class="event" data-day="28" data-month="7" data-year="2017">
            <h2>Birthday</h2>
            <span class="date">28.07.2017</span>
            <p>Description</p>
        </div>
        <div class="event" data-day="5" data-month="8" data-year="2017">
            <h2>Summerparty</h2>
            <span class="date">05.08.2017</span>
            <p>Description</p>
        </div>
        <div class="event" data-day="20" data-month="9" data-year="2017">
            <h2>meeting</h2>
            <span class="date">20.08.2017</span>
            <p>Description</p>
        </div>
        
          <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

CSS

@import url('https://fonts.googleapis.com/css?family=Montserrat:400,500,700');
            
            * {
                font-family: Montserrat;
                margin: 0;
                padding: 0;
            }
            
            .event h2 {
                text-transform: uppercase;
                display: inline;
                color: #fff;
            }
            
            .event {
                max-width: 40em;
                background-color: #009688;
                padding: .5em;
                margin: 1em 0 2em 1em;
            }

JavaScript

$(document).ready(function() {
  dateMethod();
});

function dateMethod() {
  var today = new Date();
  var dd = today.getDate();
  var mm = today.getMonth() + 1;
  var yyyy = today.getFullYear(); 
 	var day = $(this).data("day");
  var month = $(this).data("month");
  var year = $(this).data("year");
  
  if (yyyy < year && mm =< month && dd > day){ 
  	$(".event").show(); 
  } else{ 
  	$(".event").hide();
  }
}