JSFiddle - React, Tailwind, and code Playground

by colintoh

HTML

<div id="cal">
    <div id="jan" class="month">
        <div id="feb" class="month">
            <div id="mar" class="month">
                <div id="apr" class="month">
                    <div id="may" class="month">
                        <div id="jun" class="month">
                            <div id="jul" class="month">
                                <div id="aug" class="month">
                                    <div id="sep" class="month">
                                        <div id="oct" class="month">
                                            <div id="nov" class="month">
                                                <div id="dec" class="month">
               <div id="header">                                     
                <h2 jan>January</h2>
                <h2 feb>February</h2>
                <h2 mar>March</h2>
                <h2 apr>April</h2>
                <h2 may>May</h2>
                <h2 jun>June</h2>
                <h2 jul>July</h2>
                <h2 aug>August</h2>
                <h2 sep>September</h2>
                <h2 oct>October</h2>
                <h2 nov>November</h2>
                <h2 dec>December</h2>
                
                <a href="#feb" class="monthLink right" jan> >> </a>
                <a href="#jan" class="monthLink left" feb> << </a>
                <a href="#mar" class="monthLink right" feb> >> </a>
                <a href="#feb" class="monthLink left" mar> << </a>
                <a href="#apr" class="monthLink right" mar> >> </a>
                    
                <a href="#mar" class="monthLink left" apr> << </a>
                <a href="#may" class="monthLink right" apr> >> </a>
                <a href="#apr" class="monthLink left" may> << </a>
                <a href="#jun" class="monthLink right" may> >> </a>
                <a href="#may" class="monthLink left" jun> << </a>
                <a href="#jul" class="monthLink right" jun> >> </a>
                <a href="#jun"...

CSS

* {
    -webkit-user-select:none;
}

#cal{
    font-family:menlo;
    width:200px;
    height:205px;
    position:relative;
    top:20px;
    left:25px;
    background-image:-webkit-gradient(
    linear,
    left bottom,
    left top,
    color-stop(0.9, rgb(52,59,63)),
    color-stop(0.9, rgb(70,80,85)),
    color-stop(1, rgb(82,91,97))
);
    border:1px solid #000;
    border-radius:5px;
    box-shadow: 0 1px 0 rgba(255,255,255,0.3) inset, 0 0 10px #000;
    box-sizing:border-box;
    padding:0 12px 10px 11px;
}

#header {
    position:relative;
    height:40px;
    line-height: 40px;
    color: white;
}

#numbers {
    position:relative;
    height:150px;
    background:#444;
    box-shadow:1px 1px 1px rgba(0,0,0,0.1) inset,-1px -1px 1px rgba(0,0,0,0.1) inset,0px -1px 0px rgba(255,255,255,0.2),-1px 1px 0px rgba(255,255,255,0.1),1px 0px 0px rgba(255,255,255,0.1);
    overflow:hidden;
    border:1px solid black;
}

.left {
    position:absolute;
    top:0;
    left:0;
}

.right {
    position:absolute;
    top:0;
    right:0;
}

h2 {
    position:absolute;
    left:10px;
    right:10px;
    text-align:center;
}

.day {
    position:absolute;
    top:0;
    left:0;
    cursor:pointer;
    width:25px;
    height:25px;
    font-size:12px;
    text-shadow:0 1px 0 rgba(255,255,255,1);
    text-align:center;
    line-height:29px;
    display:inline-block;
    -webkit-transition:0.3s linear;
    box-shadow:1px 1px 0 rgba(0,0,0,1) inset,1px 1px 0 rgba(0,0,0,1),-1px -1px 0 rgba(255,255,255,1) inset;
    background-image:-webkit-gradient(
    linear,
    left bottom,
    left top,
    color-stop(0, rgb(230,230,230)),
    color-stop(1, rgb(235,235,235))
);
}

.day[prop="1"],.day[prop="4"]{
    -webkit-transition:0.4s linear;
}

.day[prop="2"],.day[prop="5"]{
    -webkit-transition:0.5s ease-in-out;
}

.day[prop="3"],.day[prop="6"]{
    -webkit-transition:0.6s linear;
}

.day[prop="7"],.day[prop="10"]{
    -webkit-transition:0.6s ease-in;
}

.day[prop="8"],.day[prop="11"]{
...