Pastel3DBlogContentCard (Пастель3DBlogContentCard)
Адаптивный компонент отображения контента для блогов или разделов контента, разработанный с помощью 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=Связанные компоненты
Компонент отображения содержимого
Простой адаптивный компонент отображения контента для интерфейсов социальных сетей, разработанный с использованием принципов Material Design и триадической цветовой схемы.
Простой ContentDisplay (Простой ContentDisplay)
Простой компонент отображения контента с адаптивным дизайном и поддержкой темной темы с использованием Tailwind CSS.
Компонент отображения содержимого
Компонент отображения контента, выполненный в скевоморфном стиле для электронной коммерции с темной темой. Он демонстрирует продукты с минимальным количеством элементов, используя аналогичную цветовую гамму для приятной эстетики.