Tailwind CSS home page

Showcase

OpenAI / ChatGPT

Screenshot of the OpenAI website hero. The background is an auto-playing video showing people working on different things in an office. There’s a dark overlay on top of the video, and the website text and OpenAI logo are white. In the corner is a button to pause the video. The headline is at the bottom of the hero with a primary and secondary button below it. The navbar is at the top and has a transparent background. It contains the OpenAI logo, dropdown lists and links, and a search button.
Technologies
Vue, Nuxt, Tailwind CSS
Date
URL
www.openai.com
Go to website

OpenAI / ChatGPT

The fastest growing consumer application in history.

OpenAI and ChatGPT have taken the world by storm — in fact, ChatGPT was the fastest-growing consumer application in history after it launched. The newly redesigned OpenAI website and the ChatGPT chat interface are built using Tailwind CSS.

Screenshot of a conversation with ChatGPT where the asker is sharing with ChatGPT that its chat interface was built with Tailwind CSS and will be included in the Tailwind CSS showcase website.
The ChatGPT chat interface is built using Tailwind CSS and Headless UI — another open source product from Tailwind Labs.
Screenshot of a section of the OpenAI website with black background and white text. It’s horizontally split in two. The top section contains headlines for the four main areas of the website with a call-to-action link below. The bottom section has a cool graphic with colored lines in grainy, gradient colors going from purple to green on the left side and a description of ChatGPT on the right side. There are call-to-action links to try or read about ChatGPT below the description.
Section featuring the four main areas of the website and highlighting the recently launched ChatGPT product.
Screenshot of an article section of the OpenAI website with a white background and black text. Four articles are featured on a row with a graphic, a headline, and the publish date. Above the articles are a headline to the left and a description of the article group to the right.
Article section layout used throughout the site — here with links to articles on AI safety.
Screenshot of the hero section of the OpenAI website about page. The headline is to the left, and the subheadline is to the right. Below is a full-width image showing four happy people in an office that looks like an old factory floor with much daylight and many green plants. The page's background color is light cyan, and the text color is dark orange.
Hero section on the About page.
Screenshot of the OpenAI website on a 375-pixel wide mobile device. The background color is black with white text, and each menu item that can be expanded shows a plus icon. The menu items that are just a link shows an arrow icon instead.
Screenshot of an article section on the OpenAI website on a 375-pixel wide mobile device. The background color is black with white text. The article in view is about the DALL·E API with a colorful painting of an astronaut as the featured image.
Screenshot of the careers page hero on the OpenAI website on a 375-pixel wide mobile device. The background color is pink with green text. A headline, description, call to action to view open roles, and video promoting OpenAI are all stacked vertically.
The OpenAI website experience on a 375-pixel width mobile device.
Screenshot of a table of research papers OpenAI has published. The background color is white with black text. The table has a minimalistic design with only horizontal borders. Above is a wide search field, and below is a filter button.
Filterable table showing research papers OpenAI has published.
Screenshot of the OpenAI website footer. The footer starts in one color at the bottom and features horizontal lines that get taller and taller with more and more spacing until the background color ultimately changes — giving a cool fade effect. The two colors used on this page are light orange and dark cyan. Above the fade pattern are a copyright notice, links to terms, a link to go back to the top, and links to social profiles.
Striped pattern in the OpenAI website footer is repeated across the site in different colors.