Corporate_Portfolio_Showcase_Simple
Un composant de présentation de portefeuille simple, propre et fiable, conçu pour les environnements d’entreprise professionnels, utilisant une palette de couleurs triadique et prenant en charge le mode sombre.
HTML Code
<section class="py-12 bg-white dark:bg-gray-900 transition-colors duration-300">
<div class="container mx-auto px-4 max-w-6xl">
<div class="text-center mb-12">
<h2 class="text-3xl sm:text-4xl font-extrabold text-gray-800 dark:text-white mb-4">
Our Latest Innovations
</h2>
<p class="text-lg text-gray-600 dark:text-gray-300 leading-relaxed max-w-2xl mx-auto">
Discover the impactful projects we've delivered, showcasing our expertise and commitment to excellence.
</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
<!-- Project Card 1 -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden group hover:shadow-xl transition-all duration-300 border border-gray-200 dark:border-gray-700">
<img src="https://picsum.photos/id/1015/600/400" alt="Project Image 1" class="w-full h-48 object-cover group-hover:scale-105 transition-transform duration-300">
<div class="p-6">
<h3 class="text-xl font-semibold text-gray-900 dark:text-white mb-2">
Enterprise Solution X
</h3>
<p class="text-gray-600 dark:text-gray-400 text-sm mb-4">
A robust cloud-based platform designed to streamline operations for large enterprises.
</p>
<a href="#" class="inline-flex items-center px-4 py-2 bg-indigo-600 text-white font-medium rounded-md hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 dark:focus:ring-offset-gray-900 transition-colors duration-300">
View Case Study
<svg class="ml-2 -mr-1 w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10.293 15.707a1 1 0 010-1.414L14.586 10l-4.293-4.293a1 1 0 111.414-1.414l5 5a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0z" clip-rule="evenodd"></path><path fill-rule="evenodd" d="M4.293 15.707a1 1 0 010-1.414L8.586 10l-4.293-4.293a1 1 0 111.414-1.414l5 5a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0z" clip-rule="evenodd"></path></svg>
</a>
</div>
</div>
<!-- Project Card 2 -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden group hover:shadow-xl transition-all duration-300 border border-gray-200 dark:border-gray-700">
<img src="https://picsum.photos/id/1018/600/400" alt="Project Image 2" class="w-full h-48 object-cover group-hover:scale-105 transition-transform duration-300">
<div class="p-6">
<h3 class="text-xl font-semibold text-gray-900 dark:text-white mb-2">
Dynamic Data Dashboard
</h3>
<p class="text-gray-600 dark:text-gray-400 text-sm mb-4">
An intuitive analytics dashboard providing real-time insights for decision-makers.
</p>
<a href="#" class="inline-flex items-center px-4 py-2 bg-teal-600 text-white font-medium rounded-md hover:bg-teal-700 focus:outline-none focus:ring-2 focus:ring-teal-500 focus:ring-offset-2 dark:focus:ring-offset-gray-900 transition-colors duration-300">
View Case Study
<svg class="ml-2 -mr-1 w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10.293 15.707a1 1 0 010-1.414L14.586 10l-4.293-4.293a1 1 0 111.414-1.414l5 5a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0z" clip-rule="evenodd"></path><path fill-rule="evenodd" d="M4.293 15.707a1 1 0 010-1.414L8.586 10l-4.293-4.293a1 1 0 111.414-1.414l5 5a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0z" clip-rule="evenodd"></path></svg>
</a>
</div>
</div>
<!-- Project Card 3 -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden group hover:shadow-xl transition-all duration-300 border border-gray-200 dark:border-gray-700">
<img src="https://picsum.photos/id/1020/600/400" alt="Project Image 3" class="w-full h-48 object-cover group-hover:scale-105 transition-transform duration-300">
<div class="p-6">
<h3 class="text-xl font-semibold text-gray-900 dark:text-white mb-2">
AI-Powered Customer Support
</h3>
<p class="text-gray-600 dark:text-gray-400 text-sm mb-4">
An intelligent chatbot and knowledge base for enhanced customer experiences.
</p>
<a href="#" class="inline-flex items-center px-4 py-2 bg-fuchsia-600 text-white font-medium rounded-md hover:bg-fuchsia-700 focus:outline-none focus:ring-2 focus:ring-fuchsia-500 focus:ring-offset-2 dark:focus:ring-offset-gray-900 transition-colors duration-300">
View Case Study
<svg class="ml-2 -mr-1 w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10.293 15.707a1 1 0 010-1.414L14.586 10l-4.293-4.293a1 1 0 111.414-1.414l5 5a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0z" clip-rule="evenodd"></path><path fill-rule="evenodd" d="M4.293 15.707a1 1 0 010-1.414L8.586 10l-4.293-4.293a1 1 0 111.414-1.414l5 5a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0z" clip-rule="evenodd"></path></svg>
</a>
</div>
</div>
</div>
</div>
</section>Composants associés
Composants fonctionnels
Un composant fonctionnel avec une conception 3D, des effets réactifs et la prise en charge du mode sombre, implémenté à l’aide de Tailwind CSS.
Carte de réservation inspirée du papier/de l’impression
Un composant de carte de réservation/réservation simple et réactif avec un design inspiré du papier/de l’impression et une palette de couleurs terre, avec prise en charge du mode sombre. Convient pour afficher les créneaux de rendez-vous ou les détails de la réservation.
Composant fonctionnel du neumorphisme
Un composant web suivant le style de conception Neumorphism, construit avec Tailwind CSS. Il prend en charge le responsive design et le mode sombre uniquement via CSS.