使用Tailwind CSS实现响应式面板
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tailwind CSS Responsive Accordion Example</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<div class="container mx-auto">
<div class="accordion">
<div class="card">
<div class="card-header">
<button class="btn w-full text-left" aria-expanded="false">
Card Header 1
</button>
</div>
<div class="card-body">
<p>Card content 1...</p>
</div>
</div>
<div class="card">
<div class="card-header">
<button class="btn w-full text-left" aria-expanded="false">
Card Header 2
</button>
</div>
<div class="card-body">
<p>Card content 2...</p>
</div>
</div>
<!-- More cards... -->
</div>
</div>
</body>
</html>这个例子展示了如何使用Tailwind CSS创建一个基本的响应式面板。在这个简化版的代码中，我们定义了一个包含多个卡片（card）的面板，每个卡片都有一个可折叠的标题区域和内容区域。通过Tailwind CSS的实用程序类，我们可以很容易地设置样式并使其在不同的屏幕尺寸下响应。
评论已关闭