JSFiddle - React, Tailwind, and code Playground

by makingthings

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment-recur/1.0.7/moment-recur.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tachyons/4.8.1/tachyons.min.css">
  <div class="wrapper h-100 w-100 flex items-center justify-center">
    <article class="w-90 tc center pa5 bg-lightest-blue white">
    <h1 class="f2 avenir"></h1>
      <ul class="list">
        
      </ul>
      </article>
  </div>

CSS

html,body{
  height:100vh;
  width:100%;
}

JavaScript

const month = [1,2,3,4,5,6,7,8,9,10,11,12]
const list = document.querySelector('.list');

let m = [];


month.forEach(function(element,index){
const date = '2107-' + (element < 10 ? '0' + element : element.toString())
m[index] = `<li class="avenir lh-copy">${date} has <span class="underline">${moment(date).daysInMonth()} weeks</span> in the month</li>`

})

list.innerHTML = m.join(' ')
console.log(m)