Tailwind CSS home page

Showcase

New York Times Events

Screenshot of the hero on The New York Times Events website. It contains the logo, a site menu, and a large image for an upcoming event.
Technologies
Tailwind CSS
Date
URL
www.nytimes.com/events
Go to website

New York Times Events

Live events by The New York Times.

The New York Times Events website is an online collection of virtual gatherings and live-streamed events by the 171-year-old newspaper. The Events website was built using Tailwind CSS.

Screenshot of a three-column grid of video thumbnails for past events filterable by category. The category attached to each event is shown in an all-caps, pill-shaped badge below each thumbnail.
Three-column grid of video thumbnails for past events filterable by category.
Screenshot of the hero section of a single event. The section is split into two columns. To the right is an event image and to the left is the event’s name, including some metadata such as the type, the date, and the location. Below the text is a label, or disabled button, saying “sold out.”
The hero section of a single event.
Screenshot of the site menu, which only contains two items: “Featured Events” and “Past Events.” The menu background is black, and the font is a large, white serif font.
The site menu only contains two items: featured and past events.
Screenshot of the Events site homepage on a 375-pixel width mobile device, which features the latest event at the top with an image, name, description, date, and place. Below is a list of past events where we can only see part of the first image above the fold.
Screenshot of the Past Events page on a 375-pixel width mobile device, which contains a one-column list of events with the video thumbnail, title, and category shown in an all-caps, pill-shaped badge. Above the thumbnails is a list of category batches that are clickable to filter events.
Screenshot of part of a single event page on a 375-pixel width mobile device. It shows an image and a part of the page that’s split into sections for featured guests, venue, tickets, and “More Events Like This.” Each section is collapsed in an accordion-style element and can be toggled open by clicking a round plus-sign button.
The Events website experience on a 375-pixel width mobile device. Some sections are collapsed in an accordion-style element on small screens.
Screenshot of the “Featured Guests” section on a single event page. The page has its own top navigation for navigating sections. The “Featured Guests” element in the navbar is underlined in the screenshot.
Single event pages have their own navigation for the different sections on the page, such as the “Featured Guests” section.
Screenshot of the website footer, which has a black background with white text. To the left at the top is The New York Times Events logo and subheadline “Live journalism from The Times.” Below is a list of social icons and a copyright message. To the right are two columns of links to different pages on The New York Times website.
The New York Times Events website footer.