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();

    $('.event').each(function(idx, ele) {
        var day = $(ele).data("day");
        var month = $(ele).data("month");
        var year = $(ele).data("year");

        var divDate = new Date(year, month - 1, day);

        $(ele).toggle(divDate >= today);
    })
}