Pastel3DBlogContentCard
用于博客或内容部分的响应式内容显示组件，使用 Tailwind CSS 设计。它具有简单的布局，具有 3D 风格的美感，使用阴影和悬停效果。配色方案是浅色模式的柔和粉彩，具有兼容的深色模式主题。该组件包括图像、标题、元数据（作者/日期）、摘录和“阅读更多”按钮。占位符图像使用 picsum.photos 和 randomuser.me。
HTML 代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pastel 3D Blog Content Card</title>
<script src="https://cdn.tailwindcss.com"></script>
<script>
tailwind.config = {
darkMode: 'class',
theme: {
extend: {
colors: {
// You can define specific pastel colors here if needed,
// but for this example, we primarily use Tailwind's default palette
// that offers pastel-like shades (e.g., sky-50, sky-100, sky-200).
}
}
}
}
</script>
</head>
<body class="bg-sky-50 dark:bg-slate-900 font-sans">
<div class="min-h-screen flex flex-col justify-center items-center p-4 sm:p-8">
<div class="text-center mb-8">
<h1 class="text-3xl sm:text-4xl font-bold text-slate-800 dark:text-white">Content Display Component</h1>
<p class="text-slate-600 dark:text-slate-400">3D Design, Pastel Colors, Simple Complexity</p>
</div>
<article class="bg-white dark:bg-slate-800 rounded-xl shadow-2xl overflow-hidden transform hover:scale-[1.02] transition-transform duration-300 ease-out max-w-2xl w-full group">
<!-- Image Section -->
<div class="relative aspect-video overflow-hidden">
<img src="https://picsum.photos/seed/contentcard3d/800/450" alt="Abstract tech background" class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110">
<div class="absolute inset-0 bg-gradient-to-t from-black/40 via-black/10 to-transparent"></div>
</div>
<!-- Content Section -->
<div class="p-6 sm:p-8">
<!-- Title -->
<h2 class="text-2xl sm:text-3xl font-bold text-sky-600 dark:text-sky-300 mb-3 group-hover:text-sky-500 dark:group-hover:text-sky-200 transition-colors duration-300">
Exploring the Depths of 3D Web Design
</h2>
<!-- Meta Information -->
<div class=