源代码：
下载代码
AI 编程工具
点击运行
<!doctype html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src="https://cdn.tailwindcss.com"></script> </head> <body> <div class="relative rounded-xl overflow-auto"> <div class="shadow-sm overflow-hidden px-4 py-8 sm:px-8"> <!-- 背景颜色实例 --> <div class="bg-blue-500 text-white p-6 mb-6"> <h1 class="text-xl">蓝色背景</h1> <p>这是一个拥有蓝色背景的容器，文字颜色为白色。</p> </div> <!-- 渐变背景实例 --> <div class="bg-gradient-to-r from-purple-500 via-pink-500 to-red-500 text-white p-6 mb-6"> <h1 class="text-xl">渐变背景</h1> <p>这是一个线性渐变背景，从紫色到粉色再到红色。</p> </div> <!-- 背景透明度实例 --> <div class="bg-green-500 bg-opacity-50 text-white p-6"> <h1 class="text-xl">透明度背景</h1> <p>这是一个具有半透明绿色背景的容器。</p> </div> </div> </div> </body> </html>
运行结果：
AI 编程工具