Composant d’affichage du contenu
Un composant de style glassmorphism pour l’affichage du contenu du portefeuille avec des éléments interactifs, prenant en charge le mode sombre.
HTML Code
<div class="flex flex-col items-center justify-center p-5 bg-gray-900 min-h-screen">
<div class="bg-white dark:bg-gray-800 backdrop-blur-lg bg-opacity-30 rounded-lg shadow-lg p-6 max-w-md w-full">
<h2 class="text-2xl font-bold text-gray-800 dark:text-gray-200 mb-4">Portfolio Showcase</h2>
<p class="text-gray-600 dark:text-gray-400 mb-6">Explore my recent work and projects in this beautifully designed portfolio section.</p>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<div class="flex flex-col items-center bg-white dark:bg-gray-700 rounded-lg overflow-hidden shadow-md">
<img class="w-full h-40 object-cover" src="https://picsum.photos/400/200?random=1" alt="Project Image">
<div class="p-4">
<h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Project Title 1</h3>
<p class="text-gray-600 dark:text-gray-400">A brief description of the project.</p>
<div class="mt-2">
<img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar">
</div>
</div>
</div>
<div class="flex flex-col items-center bg-white dark:bg-gray-700 rounded-lg overflow-hidden shadow-md">
<img class="w-full h-40 object-cover" src="https://picsum.photos/400/200?random=2" alt="Project Image">
<div class="p-4">
<h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Project Title 2</h3>
<p class="text-gray-600 dark:text-gray-400">A brief description of the project.</p>
<div class="mt-2">
<img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/women/1.jpg" alt="Avatar">
</div>
</div>
</div>
<div class="flex flex-col items-center bg-white dark:bg-gray-700 rounded-lg overflow-hidden shadow-md">
<img class="w-full h-40 object-cover" src="https://picsum.photos/400/200?random=3" alt="Project Image">
<div class="p-4">
<h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Project Title 3</h3>
<p class="text-gray-600 dark:text-gray-400">A brief description of the project.</p>
<div class="mt-2">
<img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/2.jpg" alt="Avatar">
</div>
</div>
</div>
<div class="flex flex-col items-center bg-white dark:bg-gray-700 rounded-lg overflow-hidden shadow-md">
<img class="w-full h-40 object-cover" src="https://picsum.photos/400/200?random=4" alt="Project Image">
<div class="p-4">
<h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Project Title 4</h3>
<p class="text-gray-600 dark:text-gray-400">A brief description of the project.</p>
<div class="mt-2">
<img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/women/2.jpg" alt="Avatar">
</div>
</div>
</div>
</div>
</div>
</div>Composants associés
Carte d’annonce immobilière - Pastel suisse
Une carte d’annonce immobilière simple, propre et réactive avec un style typographique suisse/international et une palette de couleurs pastel, adaptée aux plateformes immobilières. Inclut la prise en charge du mode sombre.
Composant Composants d’affichage de contenu
Un composant d’affichage de contenu réactif conçu pour les sites Web d’entreprise/d’entreprise avec prise en charge du mode sombre et une palette de couleurs vives. Il comprend des sections pour les avatars des utilisateurs, le contenu textuel et les images.
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.