Composants fonctionnels
Un composant de portefeuille minimaliste conçu avec Tailwind CSS, avec une palette de couleurs vives et prenant en charge le mode sombre. Ce composant est destiné à présenter des travaux ou des produits et comprend des images et des espaces réservés d’avatar.
HTML Code
<div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-lg transition duration-300 ease-in-out">
<h1 class="text-2xl font-bold text-gray-800 dark:text-white mb-4">My Portfolio</h1>
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
<div class="bg-gray-100 dark:bg-gray-900 p-4 rounded-lg">
<img src="https://picsum.photos/300/200?random=1" alt="Portfolio Item 1" class="w-full h-40 object-cover rounded-lg mb-2">
<h2 class="text-lg font-semibold text-gray-800 dark:text-white">Project Title 1</h2>
<p class="text-gray-600 dark:text-gray-400">Short description of project 1.</p>
</div>
<div class="bg-gray-100 dark:bg-gray-900 p-4 rounded-lg">
<img src="https://picsum.photos/300/200?random=2" alt="Portfolio Item 2" class="w-full h-40 object-cover rounded-lg mb-2">
<h2 class="text-lg font-semibold text-gray-800 dark:text-white">Project Title 2</h2>
<p class="text-gray-600 dark:text-gray-400">Short description of project 2.</p>
</div>
<div class="bg-gray-100 dark:bg-gray-900 p-4 rounded-lg">
<img src="https://picsum.photos/300/200?random=3" alt="Portfolio Item 3" class="w-full h-40 object-cover rounded-lg mb-2">
<h2 class="text-lg font-semibold text-gray-800 dark:text-white">Project Title 3</h2>
<p class="text-gray-600 dark:text-gray-400">Short description of project 3.</p>
</div>
<div class="bg-gray-100 dark:bg-gray-900 p-4 rounded-lg">
<img src="https://picsum.photos/300/200?random=4" alt="Portfolio Item 4" class="w-full h-40 object-cover rounded-lg mb-2">
<h2 class="text-lg font-semibold text-gray-800 dark:text-white">Project Title 4</h2>
<p class="text-gray-600 dark:text-gray-400">Short description of project 4.</p>
</div>
<div class="bg-gray-100 dark:bg-gray-900 p-4 rounded-lg">
<img src="https://picsum.photos/300/200?random=5" alt="Portfolio Item 5" class="w-full h-40 object-cover rounded-lg mb-2">
<h2 class="text-lg font-semibold text-gray-800 dark:text-white">Project Title 5</h2>
<p class="text-gray-600 dark:text-gray-400">Short description of project 5.</p>
</div>
<div class="bg-gray-100 dark:bg-gray-900 p-4 rounded-lg">
<img src="https://picsum.photos/300/200?random=6" alt="Portfolio Item 6" class="w-full h-40 object-cover rounded-lg mb-2">
<h2 class="text-lg font-semibold text-gray-800 dark:text-white">Project Title 6</h2>
<p class="text-gray-600 dark:text-gray-400">Short description of project 6.</p>
</div>
</div>
<div class="mt-6">
<h2 class="text-lg font-bold text-gray-800 dark:text-white">About Me</h2>
<div class="flex items-center mt-2">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-3">
<p class="text-gray-600 dark:text-gray-400">Hello! I'm a passionate developer who loves to create. Check out my work above and connect with me for collaboration!</p>
</div>
</div>
</div>Composants associés
Composants fonctionnels
Un composant de tableau de bord complexe et réactif avec une esthétique monospace/développeur, utilisant des neutres froids. Comprend des éléments de visualisation de données, des sections de type terminal et la prise en charge du mode sombre.
Neon_Glow_Marketplace_Component
Un composant de marché complexe avec des éléments lumineux et lumineux et une palette de couleurs triadique, conçu pour les plates-formes multifournisseurs. Les fonctionnalités incluent des cartes de produits, des catégories, des recherches et des profils d’utilisateurs, tous réactifs et avec prise en charge du mode sombre.
Composant Composants fonctionnels - Interface utilisateur en mode sombre
Un composant de médias sociaux réactif conçu avec le mode sombre et les tons de terre, adapté aux interfaces de réseaux sociaux. Comprend des avatars d’utilisateurs, du contenu de publication et des boutons d’interaction.