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 de contenu Art Déco
Un composant d’affichage de contenu complexe et réactif inspiré de l’Art déco pour les sites Web d’entreprise, avec des motifs géométriques, des tons de bijoux riches et la prise en charge du mode sombre. Comprend plusieurs sections pour des articles, des témoignages et des appels à l’action.
Carte de tableau de bord triadique de conception matérielle
Un composant d’affichage de contenu de tableau de bord simple et réactif avec l’esthétique du Material Design, utilisant une palette de couleurs triadique et la prise en charge du mode sombre. Convient pour afficher des mesures ou des informations clés.
Memphis_Content_Display_Component
Composant d’affichage de contenu complexe et réactif pour les plateformes de divertissement/médias, avec un style Memphis Design avec une palette de couleurs noir et blanc et une couleur d’accentuation vive (fuchsia). Inclut la prise en charge du mode sombre et des images de repère d’emplacement.