Two-tier Calendar Layout with Timeline

This HTML component uses Tailwind CSS to create a responsive two-tier calendar layout with a left timeline. The top tier has a header with the month and navigation buttons. The bottom tier has a sticky left timeline showing hours, sticky top day labels, and vertical divider lines. Calendar events are shown in a grid overlapping the timeline. On small screens the day labels and vertical dividers are hidden.

Similar Components

Other components related to html, tailwind, calendar, timeline, responsive, grid, layout tags