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
Composant fonctionnel du blog
Composant fonctionnel avec conception 3D, palette de couleurs complémentaire, complexité modérée pour les blogs, réactif avec prise en charge du thème sombre. Pas de JS, juste du HTML et du Tailwind.
Composants fonctionnels
Composant fonctionnel pour le commerce électronique avec un design réactif et la prise en charge du thème sombre.