用tailwindcss写了一个基础的card layout：
其实，tailwindcss还是蛮简单的，直接把源代码奉上：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.tailwindcss.com"></script>
<title>Card Gallery</title>
</head>
<body class="bg-gray-100 p-8">
<!-- 容器 -->
<div class="max-w-7xl mx-auto">
<!-- 标题 -->
<h1 class="text-3xl font-bold text-center mb-8">Card Gallery</h1>
<!-- 卡片网格 -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<!-- 卡片 1 -->
<div class="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-xl transition-shadow duration-300">
<img src="https://picsum.photos/400/300?random=1" alt="Random image" class="w-full h-48 object-cover">
<div class="p-6">
<h2 class="text-xl font-semibold mb-2">Card Title 1</h2>
<p class="text-gray-600 mb-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore.</p>
<button class="bg-blue-500 text-white px-4 py-2 rounded-lg hover:bg-blue-600 transition-colors">Read More</button>
</div>
</div>
<!-- 卡片 2 -->
<div class="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-xl transition-shadow duration-300">
<img src="https://picsum.photos/400/300?random=2" alt="Random image" class="w-full h-48 object-cover">
<div class="p-6">
<h2 class="text-xl font-semibold mb-2">Card Title 2</h2>
<p class="text-gray-600 mb-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore.</p>
<button class="bg-blue-500 text-white px-4 py-2 rounded-lg hover:bg-blue-600 transition-colors">Read More</button>
</div>
</div>
<!-- 卡片 3 -->
<div class="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-xl transition-shadow duration-300">
<img src="https://picsum.photos/400/300?random=3" alt="Random image" class="w-full h-48 object-cover">
<div class="p-6">
<h2 class="text-xl font-semibold mb-2">Card Title 3</h2>
<p class="text-gray-600 mb-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore.</p>
<button class="bg-blue-500 text-white px-4 py-2 rounded-lg hover:bg-blue-600 transition-colors">Read More</button>
</div>
</div>
<!-- 卡片 4 -->
<div class="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-xl transition-shadow duration-300">
<img src="https://picsum.photos/400/300?random=4" alt="Random image" class="w-full h-48 object-cover">
<div class="p-6">
<h2 class="text-xl font-semibold mb-2">Card Title 4</h2>
<p class="text-gray-600 mb-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore.</p>
<button class="bg-blue-500 text-white px-4 py-2 rounded-lg hover:bg-blue-600 transition-colors">Read More</button>
</div>
</div>
<!-- 卡片 5 -->
<div class="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-xl transition-shadow duration-300">
<img src="https://picsum.photos/400/300?random=5" alt="Random image" class="w-full h-48 object-cover">
<div class="p-6">
<h2 class="text-xl font-semibold mb-2">Card Title 5</h2>
<p class="text-gray-600 mb-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore.</p>
<button class="bg-blue-500 text-white px-4 py-2 rounded-lg hover:bg-blue-600 transition-colors">Read More</button>
</div>
</div>
<!-- 卡片 6 -->
<div class="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-xl transition-shadow duration-300">
<img src="https://picsum.photos/400/300?random=6" alt="Random image" class="w-full h-48 object-cover">
<div class="p-6">
<h2 class="text-xl font-semibold mb-2">Card Title 6</h2>
<p class="text-gray-600 mb-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore.</p>
<button class="bg-blue-500 text-white px-4 py-2 rounded-lg hover:bg-blue-600 transition-colors">Read More</button>
</div>
</div>
</div>
</div>
</body>
</html>
要善于找规律，tailwind同bootstrap还是有点类似
bootstrap：使用的是预定义组件
tailwind：使用原子类
学习曲线：
bootstrap：学习组件名和修饰符
tailwind：学习工具类和组合，自由的组合类
页:
[1]