Composants d’affichage du contenu
Un composant d’affichage de contenu réactif pour la consommation de blog ou de contenu avec un style de conception 3D et la prise en charge du thème sombre.
HTML Code
<div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-lg transition-transform transform hover:scale-105">
<div class="flex items-center mb-4">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-12 h-12 rounded-full border-2 border-gray-300 dark:border-gray-600 mr-3" />
<div class="flex flex-col">
<span class="text-gray-800 dark:text-gray-200 font-semibold">John Doe</span>
<span class="text-gray-500 dark:text-gray-400 text-sm">March 10, 2023</span>
</div>
</div>
<h2 class="text-gray-900 dark:text-gray-100 text-xl font-bold mb-2">Exploring the Depths of 3D Design</h2>
<p class="text-gray-700 dark:text-gray-300 mb-4">Incorporating three-dimensional elements into design can create an engaging experience for users, making the content more appealing and enjoyable to consume. In this post, we explore various techniques...</p>
<img src="https://picsum.photos/400/200?random=1" alt="3D Design Example" class="rounded-lg mb-4 shadow-md">
<button class="bg-gray-800 dark:bg-gray-300 text-white dark:text-gray-800 px-4 py-2 rounded-md transition duration-300 hover:bg-gray-700 dark:hover:bg-gray-400">Read More</button>
</div>Composants associés
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.
Composant Composants d’affichage de contenu
Un composant d’affichage de contenu avec des microinteractions, une conception réactive et la prise en charge du thème sombre à l’aide de Tailwind CSS. Propose des effets de survol subtils et des animations de concentration sur des éléments interactifs.
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.