源代码：
下载代码
点击运行
<!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 class="bg-gray-100 flex items-center justify-center min-h-screen"> <div class="max-w-sm rounded overflow-hidden shadow-lg transition-all duration-300 hover:shadow-xl transform hover:-translate-y-1"> <img class="w-full" src="https://static.jyshare.com/images/mix/65F53C2E-D255-4EE9-A675-F0C0F3F69D2B.png" alt="卡片图片"> <div class="px-6 py-4"> <div class="font-bold text-xl mb-2">交互式卡片</div> <p class="text-gray-700 text-base"> 这是一个使用 Tailwind CSS 实现的交互式卡片示例。 </p> </div> <div class="px-6 pt-4 pb-2"> <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-full transition-colors duration-200"> 了解更多 </button> </div> </div> </body> </html>
运行结果：
