JSFiddle - React, Tailwind, and code Playground

by milosdakic

HTML

<script id="tpl_event" type="text/x-jquery-tmpl">
    <ul>
    </ul>
</script>

<div class="calendar">    
    <div class="times">
        <div>
            <span>Noon</span><hr /><hr />
        </div>
        <div>
            <span>1:00 PM</span><hr /><hr />
        </div>
        
        <div>
            <span>2:00 PM</span><hr /><hr />
        </div>
        <div>
            <span>3:00 PM</span><hr /><hr />
        </div>
    </div>
    
    <div class="events">
        
        <!--
        <div class="event-line">
        <div class="event hour" style="margin-top: 30px">Event #1</div>
        <div class="event half-hour" style="margin-top: 45px">2:00-2:30PM Event</div>
        <div class="event two-hrs">Event #7</div>
    </div>
        <div class="event two-hrs">12:00-2:00PM Event</div>
        <div class="event-line">
        <div class="event half-hour">2:00-2:30PM Event</div>
        <div class="event half-hour" style="margin-top: 15px">2:00-2:30PM Event</div>
        <div class="event half-hour" style="margin-top: 30px">2:00-2:30PM Event</div>
        <div class="event half-hour" style="margin-top: 45px">2:00-2:30PM Event</div>
    </div>
        <div class="event hour">2:30-3:30PM Event</div>
        <div class="event half-hour">2:30-3:30PM Event</div>
        -->
    </div>
    
</div>

CSS

* {
    font-family: Lucida Grande;
    font-size: 11px;
}

.calendar {
    width: 100%;
    display: -webkit-box;
}

.times {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    width: 8%;
    background: #ddd;
    color: #999;
    border: 1px solid #ccc;
}

.times div {
    height: 59px;
    border-bottom: 1px solid #ccc;
}

.times div span {
    display: block;
    position: absolute;
    width: 8%;
    padding: 0;
    margin: 0;
    text-align: center;
}

.times div hr {
    display: block;
    padding: 0;
    margin: 0;
    height: 29px;
    border: none;
    border-bottom: 1px solid #ccc;
}

.events {
    width: 93%;
}

.event-line {
    display: -webkit-box;
}

.event-block {
    display: block;
    -webkit-box-flex: 1;
}

.event-line > .event-block {
    margin-right: 0;
}

.event-block > .event {
    padding-right: 7px;
}

.event-block + .event {
    
}

.event {
    -webkit-box-flex: 1;
    background: #99cc33;
    border: 1px solid green;
    margin: 0 0 1px 1px;
    text-align: center;
    
    -webkit-border-radius: 3px;
}

.two-hrs {
    height: 117px;
}

.hour {
    height: 57px;
}

.half-hour {
    height: 27px;
}

.quarter {
    hight: 12px;
}

JavaScript

var events = [
    {
        Name:'Daniel',
        Start: '09',
        Finish: '10'
    }
];

$('#tpl_selector').tmpl(events).appendTo('#area');