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=