JSFiddle - React, Tailwind, and code Playground

by Nicolas PUJOL

HTML

<section class="app_section app_section_calender hide center">
  <header class="app_section_header">CALENDER
  <section class="monthsHolder"  align="center"></section>
</section>

CSS

<style>
.calenderMonth_header {
	height:35px;
	line-height:35px;
	text-align:center;
	background-color: rgba(221,221,221,1);
	border-bottom: 1px solid rgba(221,221,221,1);
}
.calenderMonth {
	height: 160px;
	width:160px;
	margin:10px;
	border-radius:2px;
	background-color: rgba(238,238,238,1);
	border: 1px solid rgba(221,221,221,1);
	display:inline-block;
	vertical-align:top;
	cursor:pointer;
}
.activeMonth {
  float: left;
  height: 340px;
  width: 340px;
}
.calenderMonth:hover { border: rgba(0,153,204,1) 1px solid}
</style>

JavaScript

$(document).ready(function(e) {
    var months = [ 
	{month:'January', state:''},
	{month:'Feburary', state:''},
	{month:'March', state:''},
	{month:'April', state:''},
	{month:'May', state:''},
	{month:'June', state:''},
	{month:'July', state:'current'},
	{month:'August', state:''},
	{month:'September', state:''},
	{month:'October', state:''},
	{month:'November', state:''},
	{month:'December', state:''}];
	$(months).each(function(index, element){
		element.state == 'current' ?
		activeMonth = 'activeMonth':activeMonth = '';
        $('.monthsHolder').append('<article class="calenderMonth '+activeMonth+'">\
		<header class="calenderMonth_header">'+element.month+'</header>\
		</article>');
    });
});