JSFiddle - React, Tailwind, and code Playground

by John Barker

HTML

<div class="day">
<span class="show title">Fri. 26th</span>
<a href="#" class="button"><span class="show expired">2pm<span class="td"></span></span></a>
<span class="show">4pm<span class="af"></span></span>
<span class="show">6pm<span class="td"></span><span class="vip"></span></span>
</div>
<div class="day">
<span class="show title">Sat. 27th</span>
<span class="show">2pm</span>
<span class="show">4pm</span>
<span class="show">6pm</span>
<span class="show">2pm</span>
<span class="show">4pm</span>
<span class="show">6pm</span>
</div>
<div class="day">
<span class="show title">Sun. 28th</span>
<span class="show">2pm</span>
<span class="show">4pm</span>
<span class="show">6pm</span>
<span class="show">2pm</span>
<span class="show">4pm</span>
<span class="show">6pm</span>
</div>

CSS

body {
  padding: 2em;
  margin: 0;
  background-color: #fff;
  font-family: helvetica;
}
.day {
  margin-bottom:10px;
}
.show {
    display: inline-block;
    font-size: 15px;
    padding: 7px 12px 7px 12px;
    margin-right: 10px;
    margin-bottom: 10px;
    background-color:#f2f2f2;
    color:#222;
}
.expired {
    text-decoration: line-through;
    background-color:#fff;
}
.title {
  background-color: #fa1917;
  color: #fff;
  width: 75px;
  text-align:center;
  font-weight: bold;
}
.td:after {
    content: '3D';
    margin-left: 5px;
    padding: 2px;
    color: blue;
}
.af:after {
    content: '2D';
    margin-left: 5px;
    padding: 2px;
    color: grey;
}
.vip:after {
    content: 'VIP seating';
    margin-left: 5px;
    padding: 2px;
    color: red;
}
@media screen and (max-width: 480px) {
    .title {
        display: block;
        width:100%;
        text-align:left;
    }
}