Tailwind CSS 主页

展示

纽约时报活动

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.
技术
Tailwind CSS
日期
网址
www.nytimes.com/events
访问网站

纽约时报活动

纽约时报的现场活动。

纽约时报活动网站是一个在线集合，包含这家拥有 171 年历史的报纸举办的虚拟聚会和直播活动。活动网站使用 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.
过去活动的视频缩略图的三栏网格，可按类别筛选。
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.”
单个活动的英雄部分。
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.
网站菜单仅包含两个项目：精选活动和过去活动。
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.
活动网站在 375 像素宽的移动设备上的体验。某些部分在小屏幕上以手风琴样式元素折叠。
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.
单个活动页面有自己的导航，用于页面上的不同部分，例如“精选嘉宾”部分。
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.
纽约时报活动网站页脚。