Composant de chronologie de neumorphisme
Un composant de chronologie réactif stylisé avec Neumorphism à l’aide de Tailwind CSS, avec prise en charge du mode sombre.
HTML Code
<div class="flex flex-col items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-800">
<div class="w-full max-w-3xl space-y-8">
<div class="relative flex flex-col items-start bg-white dark:bg-gray-700 rounded-xl shadow-neumorphism p-6">
<div class="absolute left-0 w-3 h-3 bg-blue-500 rounded-full transform -translate-x-1/2"></div>
<h2 class="mb-1 text-lg font-semibold text-gray-800 dark:text-gray-100">Event Title 1</h2>
<p class="text-gray-600 dark:text-gray-300">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus lacinia odio vitae vestibulum.</p>
<img class="mt-4 rounded-lg shadow-lg" src="https://picsum.photos/600/300?random=1" alt="Random Image" />
</div>
<div class="relative flex flex-col items-start bg-white dark:bg-gray-700 rounded-xl shadow-neumorphism p-6">
<div class="absolute left-0 w-3 h-3 bg-blue-500 rounded-full transform -translate-x-1/2"></div>
<h2 class="mb-1 text-lg font-semibold text-gray-800 dark:text-gray-100">Event Title 2</h2>
<p class="text-gray-600 dark:text-gray-300">Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
<img class="mt-4 rounded-lg shadow-lg" src="https://picsum.photos/600/300?random=2" alt="Random Image" />
</div>
<div class="relative flex flex-col items-start bg-white dark:bg-gray-700 rounded-xl shadow-neumorphism p-6">
<div class="absolute left-0 w-3 h-3 bg-blue-500 rounded-full transform -translate-x-1/2"></div>
<h2 class="mb-1 text-lg font-semibold text-gray-800 dark:text-gray-100">Event Title 3</h2>
<p class="text-gray-600 dark:text-gray-300">Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur.</p>
<img class="mt-4 rounded-lg shadow-lg" src="https://picsum.photos/600/300?random=3" alt="Random Image" />
</div>
</div>
</div>
<style>
@layer components {
.shadow-neumorphism {
box-shadow: 8px 8px 15px rgba(0, 0, 0, 0.2),
-8px -8px 15px rgba(255, 255, 255, 0.3);
}
}
</style>Composants associés
Chronologie des médias sociaux en niveaux de gris
Un composant de chronologie de médias sociaux réactif et prêt pour le mode sombre, construit avec Tailwind CSS. Il présente un schéma de couleurs strict en niveaux de gris et des cartes postales complexes avec des avatars d’utilisateurs, du contenu de publication (texte et images), des statistiques d’engagement et des boutons d’action. Conçu pour les interfaces de réseaux sociaux avec plusieurs éléments interactifs sur chaque publication. La conception prend en charge les arrière-plans sombres pour réduire la fatigue oculaire. Aucun JavaScript n’est utilisé.
Composant de chronologie
Composant de chronologie avec conception 3D, effets réactifs et prise en charge du thème sombre
Composant de chronologie avec Glassmorphism
Composant de chronologie avec style Glassmorphism, réactif et avec prise en charge du thème sombre