JSFiddle - React, Tailwind, and code Playground

HTML

<ol>
<li><span class="date">18/11/2015</span></li>
<li><span class="date">02/12/2015</span></li>
<li><span class="date">16/12/2015</span></li>
<li><span class="date">30/12/2015</span></li>
<li><span class="date">13/01/2016</span></li>
<li><span class="date">03/02/2016</span></li>
<li><span class="date">17/02/2016</span></li>
<li><span class="date">02/03/2016</span></li>
<li><span class="date">16/03/2016</span></li>
<li><span class="date">30/03/2016</span></li>
<li><span class="date">04/05/2016</span></li>
<li><span class="date">13/04/2016</span></li>
<li><span class="date">04/05/2016</span></li>
<li><span class="date">18/05/2016</span></li>
<li><span class="date">08/06/2016</span></li>
</ol>

CSS

.date {font-size:15px;}
.past
{
	   font-family:arial;
	   font-size:15px;
	   direction:rtl;
	   text-align:right;
	   font-weight:300;
	   color:#f11;  
}
.future
	{
	   font-size:15px;
	   direction:rtl;
	   text-align:right;
	   font-weight:300;
	   color:#1f1;  
}

JavaScript

var today=new Date();
var yr = today.getFullYear();
var da = today.getDate();
if (da<10){da= "0"+today.getDate()} else {da=today.getDate()};
var mo = (today.getMonth()+1);
if (mo<10){mo= "0"+mo} else {mo=mo};

var cnl = document.getElementsByClassName("lesson");
var cnd = document.getElementsByClassName("date");
var cd = document.querySelectorAll('.date');
for (var i=0;i<cnd.length;i)
{
	var cd = document.querySelectorAll('.date')[i].innerHTML;

if (
	       ( cd.substring(6,10)<yr ) 
		 
	        	||
		
		 (   
		   ( 
		 	 cd.substring(3,5) <= (mo)		
		    ) 
			 
		        &&
			 
		   (
		     ( 
			  cd.substring(0,2) < (da)		
		      ) 
		   )
		   
		 )
	   ) 
     {
	    cnd[i].className = "past";
	 }
	 else 
	 {
	 	    cnd[i].className = "future";
     }
	 
}