JSFiddle - React, Tailwind, and code Playground

by saidulu401

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<body>


  <div class="container">
    <i class="prev-month fa fa-chevron-left fa-3x"></i> <i class="next-month fa fa-chevron-right fa-3x"></i>
    <br>
    <div class="month-year text-center">
      <h3></h3></div>
    <table class="table table-bordered">
      <tr>
        <th>S</th>
        <th>M</th>
        <th>T</th>
        <th>W</th>
        <th>T</th>
        <th>F</th>
        <th>S</th>
      </tr>

      <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
      </tr>


      <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
      </tr>


      <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
      </tr>

      <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
      </tr>

      <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
      </tr>

      <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
      </tr>



    </table>




  </div>
</body>

CSS

* {
  margin: 0;
  padding: 0;
}

.container {
  margin-top: 80px;
}

th {
  height: 30px;
  text-align: center;
  font-weight: 700;
}

td {
  height: 100px;
}

.today {
  background-color: gray;
}

th:nth-of-type(7),
td:nth-of-type(7) {
  font-weight: bold;
}

th:nth-of-type(1),
td:nth-of-type(1) {
  font-weight: bold;
}

JavaScript

$(document).ready(function() {

  var d = new Date();


  function myCalendar() {

    var month = d.getUTCMonth();
    var day = d.getUTCDate();
    var year = d.getUTCFullYear();
    var nextMonth = month + 1;
    var preMonth = month - 1;
    var febDays = '';
    var html = '';
    var counter = 1;







    // Displays the current month in Strings and the actual year 
    switch (month) {
      case 0:
        $('.month-year').append('<h3> ' + 'January' + ' ' + year + ' </h3>');
        break;
      case 1:
        $('.month-year').append('<h3> ' + 'February' + ' ' + year + ' </h3>');
        break;
      case 2:
        $('.month-year').append('<h3> ' + 'March' + ' ' + year + ' </h3>');
        break;
      case 3:
        $('.month-year').append('<h3> ' + 'April' + ' ' + year + ' </h3>');
        break;
      case 4:
        $('.month-year').append('<h3> ' + 'May' + ' ' + year + ' </h3>');
        break;
      case 5:
        $('.month-year').append('<h3> ' + 'June' + ' ' + year + ' </h3>');
        break;
      case 6:
        $('.month-year').append('<h3> ' + 'July' + ' ' + year + ' </h3>');
        break;
      case 7:
        $('.month-year').append('<h3> ' + 'August' + ' ' + year + ' </h3>');
        break;
      case 8:
        $('.month-year').append('<h3> ' + 'September' + ' ' + year + ' </h3>');
        break;
      case 9:
        $('.month-year').append('<h3> ' + 'October' + ' ' + year + ' </h3>');
        break;
      case 10:
        $('.month-year').append('<h3> ' + 'November' + ' ' + year + ' </h3>');
        break;
      case 11:
        $('.month-year').append('<h3> ' + 'December' + ' ' + year + ' </h3>');
        break;
      default:
        break;

    }


    //Getting February Days Including The Leap Year
    if (month == 1) {
      if ((year % 100 != 0) && (year % 4 == 0) || (year % 400 == 0)) {
        febDays = 29;

      } else {
        febDays = 28;
      }

    }


    // Getting The Months and Days of the Week
    var...