JSFiddle - React, Tailwind, and code Playground

HTML

<div class="calColor1 eventBox">
    <h2>9:00 AM - 11:00 AM</h2>
    <p>ECG SC Conf Call</p>
</div>
<div class="calColor2 eventBox">
    <h2>9:00 AM - 11:00 AM</h2>
    <p>ECG SC Conf Call</p>
</div>
<div class="calColor3 eventBox">
    <h2>9:00 AM - 11:00 AM</h2>
    <p>ECG SC Conf Call</p>
</div>
<div class="calColor4 eventBox">
    <h2>9:00 AM - 11:00 AM</h2>
    <p>ECG SC Conf Call</p>
</div>
<div class="calColor5 eventBox">
    <h2>9:00 AM - 11:00 AM</h2>
    <p>ECG SC Conf Call</p>
</div>
<div class="calColor6 eventBox">
    <h2>9:00 AM - 11:00 AM</h2>
    <p>ECG SC Conf Call</p>
</div>
<div class="calColor7 eventBox">
    <h2>9:00 AM - 11:00 AM</h2>
    <p>ECG SC Conf Call</p>
</div>
<div class="calColor8 eventBox">
    <h2>9:00 AM - 11:00 AM</h2>
    <p>ECG SC Conf Call</p>
</div>
<div class="calColor9 eventBox">
    <h2>9:00 AM - 11:00 AM</h2>
    <p>ECG SC Conf Call</p>
</div>
<div class="calColor10 eventBox">
    <h2>9:00 AM - 11:00 AM</h2>
    <p>ECG SC Conf Call</p>
</div>

CSS

* {
    font-family: Helvetica, Arial, sans-serif;
}

.calColor1 {
    border: 2px solid #049CDB;
    background-color: #48c7fb;
}

.calColor2 {
    border: 2px solid #0064CD;
    background-color: #4da3ff;
}

.calColor3 {
    border: 2px solid #46a546;
    background-color: #98d399;
}

.calColor4 {
    border: 2px solid #9d261d;
    background-color: #e3756c;
}

.calColor5 {
    border: 2px solid #ffc40d;
    background-color: #ffe38c;
}

.calColor6 {
    border: 2px solid #f89406;
    background-color: #fcc06e;
}

.calColor7 {
    border: 2px solid #7a43b6;
    background-color: #ba9ddb;
}

.calColor8 {
    border: 2px solid #ffa2a2;
    background-color: #ffcccc;
}

.calColor9 {
    border: 2px solid #66e2c1;
    background-color: #adefde;
}

.calColor10 {
    border: 2px solid #ffe38c;
    background-color: #ffffcc;
}

.eventBox {
    border:2px solid inherit;
}

.eventBox h2 {
    color:white;
    padding:4px;
    font-weight: bold;
}

.eventBox p {
    color:#404040;
    padding:4px;
    border-top: 20px solid;
    margin-top: -20px;
    border-color: inherit;
}

.eventBox {
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    font-size:9.75px;
    line-height:11px;
    cursor:pointer;
}