输入
一张GPT Store的截图：
要求它用tailwind css实现这个页面的代码。
输出
输出的页面代码，复制后保存成 xxx.html，然后拖到浏览器里面打开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
<title>GPTs</title>
</head>
<body class="bg-gray-900 text-white">
<div class="container mx-auto px-4 py-8">
<div class="flex items-center justify-between mb-8">
<h1 class="text-2xl font-bold">GPTs</h1>
<button class="bg-green-500 hover:bg-green-600 text-white font-bold py-2 px-4 rounded">+ Create</button>
</div>
<p class="text-gray-400 mb-8">Discover and create custom versions of ChatGPT that combine instructions, extra knowledge, and any combination of skills.</p>
<div class="mb-8">
<input type="text" placeholder="Search public GPTs" class="w-full bg-gray-800 text-white px-4 py-2 rounded">
</div>
<div class="flex space-x-4 mb-8 overflow-x-auto">
<button class="bg-gray-800 hover:bg-gray-700 text-white font-bold py-2 px-4 rounded whitespace-nowrap">Top Picks</button>
<button class="bg-gray-800 hover:bg-gray-700 text-white font-bold py-2 px-4 rounded whitespace-nowrap">DALL·E</button>
<button class="bg-gray-800 hover:bg-gray-700 text-white font-bold py-2 px-4 rounded whitespace-nowrap">Writing</button>
<button class="bg-gray-800 hover:bg-gray-700 text-white font-bold py-2 px-4 rounded whitespace-nowrap">Productivity</button>
<button class="bg-gray-800 hover:bg-gray-700 text-white font-bold py-2 px-4 rounded whitespace-nowrap">Research & Analysis</button>
<button class="bg-gray-800 hover:bg-gray-700 text-white font-bold py-2 px-4 rounded whitespace-nowrap">Programming</button>
<button class="bg-gray-800 hover:bg-gray-700 text-white font-bold py-2 px-4 rounded whitespace-nowrap">Education</button>
<button class="bg-gray-800 hover:bg-gray-700 text-white font-bold py-2 px-4 rounded whitespace-nowrap">Lifestyle</button>
</div>
<h2 class="text-xl font-bold mb-4">Featured</h2>
<p class="text-gray-400 mb-8">Curated top picks from this week</p>
<div class="grid grid-cols-1 sm:grid-cols-2 gap-8">
<div class="bg-gray-800 p-4 rounded">
<div class="flex items-center mb-4">
<div class="w-8 h-8 mr-2 bg-gray-700 rounded-full"></div>
<h3 class="text-lg font-bold">AllTrails</h3>
</div>
<p class="text-gray-400">Find trails that fit your nature for your next hike, ride, or run.</p>
<p class="text-sm text-gray-500">By alltrails.com</p>
</div>
<div class="bg-gray-800 p-4 rounded">
<div class="flex items-center mb-4">
<div class="w-8 h-8 mr-2 bg-gray-700 rounded-full"></div>
<h3 class="text-lg font-bold">Consensus</h3>
</div>
<p class="text-gray-400">Your AI Research Assistant Search 200M academic papers from Consensus.ai, get science-backed answers.</p>
<p class="text-sm text-gray-500">By Consensus</p>
</div>
<div class="bg-gray-800 p-4 rounded">
<div class="flex items-center mb-4">
<div class="w-8 h-8 mr-2 bg-gray-700 rounded-full"></div>
<h3 class="text-lg font-bold">Code Tutor</h3>
</div>
<p class="text-gray-400">Let's code together! I'm Khanmigo Lite, by Khan Academy. I won't write the code for you, but I'll help you...</p>
<p class="text-sm text-gray-500">By khanacademyorg</p>
</div>
<div class="bg-gray-800 p-4 rounded">
<div class="flex items-center mb-4">
<div class="w-8 h-8 mr-2 bg-gray-700 rounded-full"></div>
<h3 class="text-lg font-bold">Books</h3>
</div>
<p class="text-gray-400">Your AI guide in the world of literature and reading.</p>
<p class="text-sm text-gray-500">By Josh Brent N. Villorido</p>
</div>
</div>
<h2 class="text-xl font-bold mt-8 mb-4">Trending</h2>
<p class="text-gray-400">Most popular GPTs by our community</p>
</div>
</body>
</html>
一次成功！部分代码添加了移动端适配，按钮自己动添加了动效。
