JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" type="text/css" href="style.css"/> 
 	<h4 class="panel-title">
        Monthly report download
    </h4>
	<p class="paragraph">Select the year and download your preferred spreadsheet report format.</p>

<body>
<div class="change-year">
<button class="tablinks tablink_2018" onclick="openTab(event, '2018')">2018</button>
<button class="tablinks tablink_2019" onclick="openTab(event, '2019')">2019</button>
<div>

<div id="2018" class="tabcontent">
	<table>
	    <thead class="months-download">
			<tr><th class="month">Month</th><th>Download</th></tr>
	    </thead>
		    <tbody class="table-custom-1">
		        <tr>
			        <td>September</td>
					<td><button class="csv-button" onclick="window.location.href='/api/tools/monthlyreport&month=8&year=2018'">CSV</button></td>
		        </tr>

				<tr>
			        <td>October</td>
					<td><button class="csv-button" onclick="window.location.href='/api/tools/monthlyreport&month=9&year=2018'">CSV</button></td>
		        </tr>

				<tr>
					<td>November</td>
					<td><button class="csv-button" onclick="window.location.href='/api/tools/monthlyreport&month=10&year=2018'">CSV</button></td>
		        </tr>

				<tr>
			     	<td>December</td>
					<td><button class="csv-button" onClick="window.location.href='/api/tools/monthlyreport&month=11&year=2018'">CSV</button></td>
		        </tr>
		    </tbody>
	</table>
</div>

<div id="2019 notshow_2019" class="tabcontent">
	<table>
	    <thead class="months-download">
			<tr><th class="month">Month</th><th>Download</th></tr>
	    </thead>
		    <tbody class="table-custom-1">
		        <tr id="january">
			        <td>January</td>
					<td><button class="csv-button" onclick="window.location.href='/api/tools/monthlyreport&month=0&year=2019'">CSV</button></td>
		        </tr>

				<tr id="february">
			        <td>February</td>
					<td><button class="csv-button"...

CSS

.panel-title{
    color: #707070;
    font-size: 24px;
    font-family: Helverica Neue, regular;
}

.paragraph{
    color: #8E9498;
    font-size: 16px;
    font-family: Open Sans, regular;
}

.p{
    color: #8E9498;
    font-size: 16px;
}

.month{
    padding-right: 7rem;
}

.tab {
    overflow: hidden;
    border: 1px solid #ccc;
    background-color: #f1f1f1;
}

.tab button {
    background-color: inherit;
    float: left;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 14px 16px;
    transition: 0.3s;
}
.tab button:hover {
    background-color: #ddd;
}
.tab button.active {
    background-color: black;
}

.tabcontent {
    display: none;
    padding: 6px 12px;
    border:none;
    border-top: none;
}

.tablinks{
    font-size: 16px;
    width: 120px;
    height: 34px;
    border: none;
    background-color: #fff;
    color: #8E9498;

}
.active{
    background-color:#EBEBEB;
    color: #8E9498;
}

.csv-button {
    background-color: #29245C;
    border-radius: 4px;
    color: #FFFFFF;
    border: none;
    width: 62.25px;
    height: 28px;
    font-size: 14px;
    font-weight: 500;

}
.months-download{
    color:#8E9498;
}
.months-download:after {
    content: " ";
    display: block;
    border-bottom: 1px solid #EBEBEB;
  }

.table-custom-1{
    color: #4A4A4A;
}

.hr{
    width: 300%;
}

.tble{
    display: block;
    padding-top: 10px;
}

#january,
#february,
#march,
#april,
#may,
#jun,
#july,
#august,
#september,
#october,
#november,
#december {
    display: none;
}

#notshow_2019{
    display:none;
}

JavaScript

function openTab(evt, tabName) {
  var i, tabcontent, tablinks;

  tabcontent = document.getElementsByClassName("tabcontent");
  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
  }

  tablinks = document.getElementsByClassName("tablinks");
  for (i = 0; i < tablinks.length; i++) {
    tablinks[i].className = tablinks[i].className.replace(" active", "");
  }

  document.getElementById(tabName).style.display = "block";
  evt.currentTarget.className += " active";

  displayMonths(tabName);
}


function getCurrentMonth() {
  var months = {
    0: "January",
    1: "February",
    2: "March",
    3: "April",
    4: "May",
    5: "Jun",
    6: "July",
    7: "August",
    8: "September",
    9: "October",
    10: "November",
    11: "December",
  };

  return months[(new Date()).getMonth()];
}


var monthArr = ['january', 'february', 'march', 'april', 'may', 'jun', 'july', 'august', 'september', 'october', 'november', 'december']

function displayMonth() {

  if (monthArr.includes(getCurrentMonth().toLowerCase())) {
    for (var i = 0; i < monthArr.length; i++) {
      document.querySelector(`.tabcontent #${monthArr[i]}`).style.display = 'table-row';
    }
  }
}


function displayMonths(tabName) {
	var months = {
    0: "January",
    1: "February",
    2: "March",
    3: "April",
    4: "May",
    5: "Jun",
    6: "July",
    7: "August",
    8: "September",
    9: "October",
    10: "November",
    11: "December",
  };

	var monthsHTML = document.getElementById(tabName);

  for (var i = 0; i < (new Date()).getMonth(); i++) {
    monthsHTML.querySelector("#" + months[i].toLowerCase()).style.display = 'table-row';
  }
}

var getCurrentYear = (new Date()).getFullYear();

	if (getCurrentYear == '2019') {
		return(document.getElementById('notshow_2019'),style.display = 'block');
		}