Pastel3DBログコンテンツカード
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=