구성 요소 콘텐츠 표시 구성 요소 Pastel3DBlogContentCard

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=

Pastel3DBlogContentCard

미리 보기

HTML 코드

관련 구성 요소

콘텐츠 표시 구성 요소

콘텐츠 표시 구성 요소

Content Display Components 컴포넌트