Tailwind CSS 主页

展示

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.
技术
Vue、Nuxt、Tailwind CSS
日期
网址
www.openai.com
访问网站

OpenAI / ChatGPT

历史上增长最快的消费者应用程序。

OpenAI 和 ChatGPT 席卷全球——事实上，ChatGPT 是历史上增长最快的消费者应用程序，自推出以来就广受欢迎。新设计的 OpenAI 网站和 ChatGPT 聊天界面都是使用 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.
ChatGPT 聊天界面使用 Tailwind CSS 和 Headless UI 构建——这是 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.
展示网站四个主要区域的部分，并重点介绍最近推出的 ChatGPT 产品。
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.
整个网站使用的文章部分布局——这里链接到关于人工智能安全的文章。
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.
关于页面上的英雄部分。
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.
OpenAI 网站在 375 像素宽的移动设备上的体验。
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.
可过滤表格，显示 OpenAI 发布的研究论文。
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.
OpenAI 网站页脚中的条纹图案在整个网站中以不同的颜色重复出现。