Pastel3DBlogContentCard
Un composant d’affichage de contenu réactif pour les blogs ou les sections de contenu, conçu avec Tailwind CSS. Il présente une mise en page simple avec une esthétique inspirée de la 3D utilisant des ombres et des effets de survol. La palette de couleurs est un pastel doux pour le mode clair, avec un thème compatible avec le mode sombre. Le composant comprend une image, un titre, des métadonnées (auteur/date), un extrait et un bouton « Lire la suite ». Les images fictives sont utilisées à partir de picsum.photos et randomuser.me.
HTML Code
<!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=Composants associés
Composant d’affichage du contenu
Un composant d’affichage de contenu simple et réactif conçu dans un style brutaliste avec des couleurs complémentaires. Convient aux sites Web d’entreprise / d’entreprise, prenant en charge le mode sombre.
Composant d’affichage du contenu
Un composant d’affichage de contenu conçu dans un style skeuomorphe pour le commerce électronique avec un thème sombre. Il présente des produits avec un minimum d’éléments, en utilisant une palette de couleurs analogue pour une esthétique agréable.
Composant d’affichage du contenu
Un composant d’affichage nostalgique au design rétro, avec des effets réactifs et une prise en charge du thème sombre.