JSFiddle - React, Tailwind, and code Playground

by Amar Nyayapati

HTML

<div id="main">
    <div id="mon">
        <span id="button_placement">
            <a href="#" onclick="prevMonth()">&lt;</a>
            <label id="mon_year"></label>
            <a href="#" onclick="nextMonth()">&gt;</a>
        </span>
    </div>
    <div id="day">
        <div class="day_class bott-border-none">SUN</div>
        <div class="day_class bott-border-none">MON</div>
        <div class="day_class bott-border-none">TUE</div>
        <div class="day_class bott-border-none">WED</div>
        <div class="day_class bott-border-none">THU</div>
        <div class="day_class bott-border-none">FRI</div>
        <div class="day_class bott-border-none">SAT</div>
    </div>
    <div id="date" x-apple-data=detectors="false" ></div>
</div>
<script>
    var d = new Date();
    var month_date = ['31','28','31','30','31','30','31','31','30','31','30','31'];
    calendar();
    function calendar(){
            temp_date = new Date(d.setDate(1));
            var temp_day = temp_date.getDay();
            var html = "";
            for(i=1;i<=42;i++){
                newX = parseInt(i-temp_day);
                if((newX > 0)&&(newX <= month_date[d.getMonth()])){
                    html += '<div class="date_class" id="d_'+i+'">'+newX+'</div>';
                } else {
                    html += '<div class="date_class" id="d_'+i+'"></div>';
                }
            }
            document.getElementById("date").innerHTML = html;
    }
function prevMonth(){
    var m = d.getMonth();
    if(m==0){
        m = 11;
    } else {
        m--;
    }
    d.setFullYear(2012,m,1);
    calendar();
}
function nextMonth(){
    var m = d.getMonth();
    if(m==11){
        m = 0;
    } else {
        m++;
    }
    d.setFullYear(2012,m,1);
    calendar();
}
</script>

CSS

#main
    {
        width:660px;
        height:574px;
        float:left;
        z-index:4;
        
    }
#mon
    {
        width:657px;
        height:33px;
        float:left;
        margin-bottom:30px;
        text-align: center;
        
    }

#day
    {
        width:660px;
        height:30px;
        float:left;
        text-align: center;
    }
    #date
    {
        border:solid 0px white;
        width:660px;
        height:509px;
        float:left;
    }
.day_class
    {
        
        border-bottom:1px solid #7d7d7d;
        width:93px;
        height:30px;
        float:left;
        font:bold 22px Arial, Helvetica, sans-serif; color:#000; text-decoration:none;
    }
    .date_class
    {
        
        border:1px solid #7d7d7d; 
        width:92.5px;
        height:56px;
        float:left;
        font:bold 28px Arial, Helvetica, sans-serif; color:#000; text-decoration:none;
        padding:20px 0 0 0;
        text-align: center;
    }