Composant Colonnes
Un composant de colonnes réactives conçu pour la présentation de portfolios avec prise en charge du mode sombre, à l’aide d’un jeu de couleurs en niveaux de gris et de Tailwind CSS.
HTML Code
<div class="container mx-auto px-4 py-8">
<h2 class="text-3xl font-bold text-white text-center mb-8">Portfolio Showcase</h2>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<div class="bg-gray-800 p-6 rounded-lg shadow-lg transition-transform transform hover:scale-105">
<img src="https://picsum.photos/400/300?random=1" alt="Project 1" class="w-full h-40 object-cover rounded-t-lg">
<h3 class="text-xl font-semibold text-white mt-4">Project Title 1</h3>
<p class="text-gray-400 mt-2">Brief description of the project goes here. Explaining the key features and technologies used.</p>
<div class="flex items-center mt-4">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full border-2 border-gray-700">
<span class="ml-2 text-gray-300">John Doe</span>
</div>
</div>
<div class="bg-gray-800 p-6 rounded-lg shadow-lg transition-transform transform hover:scale-105">
<img src="https://picsum.photos/400/300?random=2" alt="Project 2" class="w-full h-40 object-cover rounded-t-lg">
<h3 class="text-xl font-semibold text-white mt-4">Project Title 2</h3>
<p class="text-gray-400 mt-2">Brief description of the project goes here. Explaining the key features and technologies used.</p>
<div class="flex items-center mt-4">
<img src="https://randomuser.me/api/portraits/men/2.jpg" alt="Avatar" class="w-10 h-10 rounded-full border-2 border-gray-700">
<span class="ml-2 text-gray-300">Jane Smith</span>
</div>
</div>
<div class="bg-gray-800 p-6 rounded-lg shadow-lg transition-transform transform hover:scale-105">
<img src="https://picsum.photos/400/300?random=3" alt="Project 3" class="w-full h-40 object-cover rounded-t-lg">
<h3 class="text-xl font-semibold text-white mt-4">Project Title 3</h3>
<p class="text-gray-400 mt-2">Brief description of the project goes here. Explaining the key features and technologies used.</p>
<div class="flex items-center mt-4">
<img src="https://randomuser.me/api/portraits/men/3.jpg" alt="Avatar" class="w-10 h-10 rounded-full border-2 border-gray-700">
<span class="ml-2 text-gray-300">Alice Johnson</span>
</div>
</div>
<div class="bg-gray-800 p-6 rounded-lg shadow-lg transition-transform transform hover:scale-105">
<img src="https://picsum.photos/400/300?random=4" alt="Project 4" class="w-full h-40 object-cover rounded-t-lg">
<h3 class="text-xl font-semibold text-white mt-4">Project Title 4</h3>
<p class="text-gray-400 mt-2">Brief description of the project goes here. Explaining the key features and technologies used.</p>
<div class="flex items-center mt-4">
<img src="https://randomuser.me/api/portraits/men/4.jpg" alt="Avatar" class="w-10 h-10 rounded-full border-2 border-gray-700">
<span class="ml-2 text-gray-300">Mark Brown</span>
</div>
</div>
<div class="bg-gray-800 p-6 rounded-lg shadow-lg transition-transform transform hover:scale-105">
<img src="https://picsum.photos/400/300?random=5" alt="Project 5" class="w-full h-40 object-cover rounded-t-lg">
<h3 class="text-xl font-semibold text-white mt-4">Project Title 5</h3>
<p class="text-gray-400 mt-2">Brief description of the project goes here. Explaining the key features and technologies used.</p>
<div class="flex items-center mt-4">
<img src="https://randomuser.me/api/portraits/men/5.jpg" alt="Avatar" class="w-10 h-10 rounded-full border-2 border-gray-700">
<span class="ml-2 text-gray-300">Emma Williams</span>
</div>
</div>
<div class="bg-gray-800 p-6 rounded-lg shadow-lg transition-transform transform hover:scale-105">
<img src="https://picsum.photos/400/300?random=6" alt="Project 6" class="w-full h-40 object-cover rounded-t-lg">
<h3 class="text-xl font-semibold text-white mt-4">Project Title 6</h3>
<p class="text-gray-400 mt-2">Brief description of the project goes here. Explaining the key features and technologies used.</p>
<div class="flex items-center mt-4">
<img src="https://randomuser.me/api/portraits/men/6.jpg" alt="Avatar" class="w-10 h-10 rounded-full border-2 border-gray-700">
<span class="ml-2 text-gray-300">Oliver Davis</span>
</div>
</div>
</div>
</div>Composants associés
Composant Colonnes
Un composant de colonnes de style Material Design avec des effets réactifs et une prise en charge du thème sombre à l’aide de Tailwind CSS.
Composant Colonnes
Un composant de colonnes réactives conçu pour le mode sombre à l’aide de Tailwind CSS, avec des espaces réservés d’avatar et d’image.
Colonnes Composant 49
Un composant de colonnes réactif avec un design skeuomorphe imitant les éléments du monde réel, avec la prise en charge du thème sombre et utilisant Tailwind CSS.