Tailwind CSS home page

Showcase

Google I/O 2022

Screenshot of the Google I/O 2022 home page. The header contains the Google I/O logo, the main navigation, and a language selector. The hero section contains an illustration of a blimp with 'IO22' written on the side. The blimp is towing a banner that says 'Thanks for joining'.
Technologies
Tailwind CSS, Preact
Date
URL
io.google/2022
Go to website

Google I/O 2022

The annual developer conference hosted by Google.

Google I/O is Google's annual developer conference, where new Google products are announced. The Google I/O 2022 website was built using Tailwind CSS.

Screenshot of the Google I/O 2022 'Program' page. The header contains the Google I/O logo, the main navigation, and a language selector. The hero section contains an introduction paragraph and an illustration of a laptop with the number '22' on the screen.
The program page featuring all the sessions at Google I/O.
Screenshot of the Google I/O 2022 'FAQ' page. A list of FAQ categories is displayed on the left side of the screen. On the right side the 'General' category is shown with a list of questions such as 'When and where is Google I/) 2022?'.
An FAQ section with collapsible FAQ items. From the sidebar, one can navigate to the different subsections of the FAQ.
Mobile screenshot of the Google I/O 2022 'Learning Lab' page. The header contains the Google I/O logo and a menu button. The hero contains a short introduction paragraph and an illustration of blocks stacked on top of each other. Below is a 'Workshops' section and the first video thumbnail can just be seen.
Mobile screenshot of the Google I/O 2022 program filters overlay. The overlay contains a list of filters such as 'Topic' and 'Level'. Each filter has a list of checkboxes.
Mobile screenshot of the Google I/O 2022 'Products' page. The header contains the Google I/O logo and a menu button. The hero contains a short introduction paragraph and an illustration of a mobile phone. Below is a list of products with icons, starting with 'Accessibility' and 'Android'.
The Google I/O website experience on mobile devices.
Screenshot of the Google I/O 2022 'Program' page. The page contains a list of videos with thumbnails and short descriptions, in three columns. On the left side of the screen there is a list of checkboxes that can be used to filter the list of videos.
Conference sessions presented on the program page and filterable by topic, level, and type.
Screenshot of the Google I/O 2022 'About' page. The header contains the Google I/O logo, the main navigation, and a language selector. The hero section contains an introduction paragraph and an illustration of some plain flags blowing in the wind.
The about page on the Google I/O website. Throughout the site, hero sections have animations that the visitor can pause.