Quick calendar with tailwindcss

README.md

Go to Tailwind Playground to see it.

config.js

const colors = require('tailwindcss/colors')

module.exports = {
  mode: 'jit',
  theme: {},
  variants: {},
  plugins: [],
}

index.html

<div class="grid grid-cols-[50px,1fr,1fr,1fr,1fr,1fr]">
  <div class="bg-gray-100 border-b border-gray-700"></div>
  <div class="day">
    <h4>15</h4>
    <h6>monday</h6>
  </div>
  <div class="day">
    <h4>16</h4>
    <h6>tuesday</h6>
  </div>
  <div class="day">
    <h4>17</h4>
    <h6>wednesday</h6>
  </div>
  <div class="day">
    <h4>18</h4>
    <h6>thursday</h6>
  </div>
  <div class="day">
    <h4>19</h4>
    <h6>friday</h6>
  </div>

  <div class="slot time">8:00</div>
  <div class="slot"></div>
  <div class="slot busy"></div>
  <div class="slot"></div>
  <div class="slot"></div>
  <div class="slot"></div>

  <div class="slot bb"></div>
  <div class="slot"></div>
  <div class="slot busy"></div>
  <div class="slot"></div>
  <div class="slot"></div>
  <div class="slot"></div>

  <div class="slot time">9:00</div>
  <div class="slot"></div>
  <div class="slot busy"></div>
  <div class="slot"></div>
  <div class="slot"></div>
  <div class="slot"></div>

  <div class="slot bb"></div>
  <div class="slot"></div>
  <div class="slot busy"></div>
  <div class="slot"></div>
  <div class="slot"></div>
  <div class="slot"></div>

  <div class="slot time">10:00</div>
  <div class="slot busy"></div>
  <div class="slot busy"></div>
  <div class="slot busy"></div>
  <div class="slot busy"></div>
  <div class="slot busy"></div>

  <div class="slot bb"></div>
  <div class="slot busy"></div>
  <div class="slot busy"></div>
  <div class="slot busy"></div>
  <div class="slot busy"></div>
  <div class="slot busy"></div>

  <div class="slot time">11:00</div>
  <div class="slot"></div>
  <div class="slot"></div>
  <div class="slot"></div>
  <div class="slot"></div>
  <div class="slot"></div>

  <div class="slot bb"></div>
  <div class="slot"></div>
  <div class="slot"></div>
  <div class="slot"></div>
  <div class="slot"></div>
  <div class="slot"></div>

  <div class="slot time">12:00</div>
  <div class="slot"></div>
  <div class="slot"></div>
  <div class="slot"></div>
  <div class="slot"></div>
  <div class="slot"></div>

  <div class="slot bb"></div>
  <div class="slot"></div>
  <div class="slot"></div>
  <div class="slot"></div>
  <div class="slot"></div>
  <div class="slot"></div>

  <div class="slot time">13:00</div>
  <div class="slot"></div>
  <div class="slot"></div>
  <div class="slot"></div>
  <div class="slot"></div>
  <div class="slot"></div>

  <div class="slot bb"></div>
  <div class="slot"></div>
  <div class="slot"></div>
  <div class="slot"></div>
  <div class="slot"></div>
  <div class="slot"></div>

  <div class="slot time">14:00</div>
  <div class="slot"></div>
  <div class="slot"></div>
  <div class="slot"></div>
  <div class="slot"></div>
  <div class="slot"></div>

  <div class="slot bb"></div>
  <div class="slot"></div>
  <div class="slot"></div>
  <div class="slot"></div>
  <div class="slot"></div>
  <div class="slot"></div>

  <div class="slot time">15:00</div>
  <div class="slot busy"></div>
  <div class="slot"></div>
  <div class="slot"></div>
  <div class="slot"></div>
  <div class="slot"></div>

  <div class="slot bb"></div>
  <div class="slot busy"></div>
  <div class="slot"></div>
  <div class="slot"></div>
  <div class="slot"></div>
  <div class="slot"></div>

  <div class="slot time">16:00</div>
  <div class="slot busy"></div>
  <div class="slot"></div>
  <div class="slot"></div>
  <div class="slot"></div>
  <div class="slot"></div>

  <div class="slot bb"></div>
  <div class="slot"></div>
  <div class="slot"></div>
  <div class="slot"></div>
  <div class="slot"></div>
  <div class="slot"></div>

  <div class="slot time">17:00</div>
  <div class="slot"></div>
  <div class="slot"></div>
  <div class="slot"></div>
  <div class="slot"></div>
  <div class="slot"></div>

  <div class="slot bb"></div>
  <div class="slot"></div>
  <div class="slot"></div>
  <div class="slot"></div>
  <div class="slot"></div>
  <div class="slot"></div>

  <div class="slot time">18:00</div>
  <div class="slot"></div>
  <div class="slot"></div>
  <div class="slot"></div>
  <div class="slot"></div>
  <div class="slot"></div>

  <div class="slot bb"></div>
  <div class="slot"></div>
  <div class="slot"></div>
  <div class="slot"></div>
  <div class="slot"></div>
  <div class="slot"></div>

  <div class="slot time">19:00</div>
  <div class="slot"></div>
  <div class="slot"></div>
  <div class="slot"></div>
  <div class="slot"></div>
  <div class="slot"></div>

  <div class="slot bb"></div>
  <div class="slot"></div>
  <div class="slot"></div>
  <div class="slot"></div>
  <div class="slot"></div>
  <div class="slot"></div>
</div>

styles.css

@tailwind base;
@tailwind components;
@tailwind utilities;

.day {
  @apply bg-gray-100 text-gray-700 px-4 py-2 border-l border-b border-gray-700;
}

.day h4 {
  @apply text-2xl font-bold;
}
.day h6 {
  @apply text-sm;
}

.slot {
  @apply text-center text-gray-600 border-l bg-gray-50 border-b border-gray-300;
}

.busy {
  @apply bg-blue-300 border-none;
}

.time {
  @apply text-center pb-2 text-sm h-6 border-none;
}

.bb{
  @apply text-center pb-2 text-sm h-6 border-b;
}