JSFiddle - React, Tailwind, and code Playground

by blineberry

HTML

<div class="container">
    <div class="event event-plus30">Event Name</div>
</div>
<table>
    <tr>
        <th>8:00</th><td><div class="event event-plus30">Event Name</div></td>
    </tr>
    <tr>
        <th>9:00</th><td></td>
    </tr>
    <tr>
        <th>10:00</th><td></td>
    </tr>
    <tr>
        <th>11:00</th><td></td>
    </tr>
    <tr>
        <th>12:00</th><td></td>
    </tr>
    <tr>
        <th>1:00</th><td></td>
    </tr>
    <tr>
        <th>2:00</th><td></td>
    </tr>
    <tr>
        <th>3:00</th><td></td>
    </tr>
    <tr>
        <th>4:00</th><td></td>
    </tr>
    <tr>
        <th>5:00</th><td></td>
    </tr>
</table>

CSS

tr > th {
    text-align: right;
    width: 10%;
}
tr:not(:first-child) td {
    border-top: 1px solid lightgray;
}
html {
    height: 100%;
}
body {
    margin: 0;
    padding: 0;
    height: 100%;
}
table {
    height: 100%;
    width: 100%;
}
.wrapper {
    width: 100%;
    height: 100%;
    position: relative;
}
.event {
    border: 2px solid blue;
    background: lightblue;
    height: 100%;
    width: 100%;
    padding: 0.5em;
    box-sizing: border-box;
    position: relative;
}
.event-plus30 {
    top: 50%;
}
.container {
    height: 300px;
    background: gray;
}