JSFiddle - React, Tailwind, and code Playground

by cillay

HTML

<div class="event">
    <div class="date">
        <span class="weekday">Saturday</span>
        <span class="day">14</span>
        <span class="month">Feb</span>
    </div>
    <div class="time">
        <div class="clock">
            <span class="start">11:30 AM</span>
            <span class="sep">to</span>
            <span class="end">1:30 PM</span>
        </div>
    </div>
    <div class="details">
        <span class="title">Food Truck Rodeo</span>
        <span class="location">100 Main Street<br />Anytown, USA 10101</span>
    </div>
</div>

CSS

.event { 
    font: normal 1.25em 'Helvetica Neue', 'Segoe UI', Helvetica, sans-serif; 
    display: block;
    width: 600px;
    max-width: 600px;
    position: relative;
    overflow: hidden;
    overflow-y: hidden;
    border: 2px groove #CCC;
    border-radius: 10px;
    padding: 5px;
}
.event .date {
    display: block;
    float: left;
    width: 90px;
    max-width: 90px;
    height: 90px;
    max-height: 90px;
    border: 1px solid gray;
    border-radius: 10px;
    margin: 15px;
    position: relative;
}
.event .date .weekday {
    display: block;
    width: 100%;
    height: 10%;
    max-height: 10%;
    padding-top: 3px;
    font-size: 0.65em;
    color: #2a2a2a;
    font-weight: bold;
    text-align: center;
    position: relative;
}
.event .date .day {
    display: block;
    width: 100%;
    height: 50%;
    max-height: 50%;
    padding-top: 5px;
    font-size: 2.15em;
    font-weight: bold;
    text-align: center;
    position: relative;
}
.event .date .month {
    display: block;
    width: 100%;
    height: 25%;
    padding-top: 2px;
    padding-bottom: 4px;
    font-size: 1.05em;
    font-weight: bold;
    text-align: center;
    color: white;
    text-transform: uppercase;
    background-color: firebrick;
    position: absolute;
    bottom: 0px;
    border-radius: 0 0 10px 10px;
}
.event .details {
    display: block;
    padding: 15px 0 0 70px;
    margin-left: 50px;
}
.event .details .title {
    display: block;
    font-size: 1.25em;
    font-weight: bold;
    text-transform: uppercase;
}
.event .details .location {
    display: block;
    font-size: .85em;
}
.time {
    display:block;
    float:left;
    margin-left: 10px;
    width: 120px;
    font-weight: bold;
    font-size: 0.75em;
    text-align: center;
}
.time .start, .time .end {
    display: block;
}
.time .start {
    margin-top: 26px;
}
.time .sep {
    display: block;
    font-size: 0.6em;
    text-transform: uppercase;
}
.clock {
    display:block;
    float:left;
  margin:...