JSFiddle - React, Tailwind, and code Playground

by jcubed111

HTML

<div class='calendar'>
    <div id='calendar_nav'>
        <div class='calendar_navButton calendar_active'></div>
        <div class='calendar_navButton'></div>
        <div class='calendar_navButton'></div>
    </div>
    <div id='calendar_slider'>
        
        <div id='calendar_month' class='calendar_sliderBlock'>
            <div id='calendar_monthTitle'>
                July 2011
            </div>
        </div>
        
    </div>
</div>

CSS

body{
    background:url(http://i.imgur.com/KrVRA.png) #efefef;
}

.calendar{
    margin:50px auto;
    width:216px;
    background:#1c1c1c;
    position:relative;
    overflow:hidden;
    border:1px solid #1c1c1c;
    font-family:sans-serif;
}

#calendar_nav{
    height:8px;
    font-size:0; /*no spaces messing up my layouts!*/
}

.calendar_navButton{
    display:inline-block;
    margin:0;
    height:3px;
    width:68px;
    border:2px solid #1c1c1c;
    border-width:2px 2px;
    background:#777;
    cursor:pointer;
}

.calendar_navButton:hover{
    background:#aaa;
}

.calendar_navButton.calendar_active{
    background:#ccc;
}

#calendar_slider{
    position:relative;
    top:0;
    left:0;
    width:648px;
    font-size:0; /*no spaces messing up my layouts!*/
}

.calendar_sliderBlock{
    display:inline-block;
}

#calendar_monthTitle{
    background:#313131;
    height:33px;
    width:216px;
    text-align:center;
    font-size:16px;
}

JavaScript

/* calendar */