Watercolor_Artistic_Grid_Layout_Consulting
Un composant de mise en page de grille simple et réactif pour le conseil/les services, avec un design aquarelle/artistique doux avec des neutres froids et la prise en charge du mode sombre.
HTML Code
<div class="font-sans bg-gradient-to-br from-blue-50 to-indigo-100 text-gray-800 dark:from-gray-900 dark:to-gray-800 dark:text-gray-200 p-6 md:p-12 lg:p-16
relative overflow-hidden group">
<!-- Background artistic overlay for light mode -->
<div class="absolute inset-0 z-0 opacity-40 dark:opacity-0 pointer-events-none"
style="background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2020/svg" viewBox="0 0 1000 1000"><filter id="blur" x="-50%" y="-50%" width="200%" height="200%"><feGaussianBlur stdDeviation="40" /></filter><circle cx="200" cy="300" r="150" fill="rgb(199, 210, 254)" filter="url(%23blur)" /><circle cx="700" cy="500" r="200" fill="rgb(224, 231, 255)" filter="url(%23blur)" /><circle cx="400" cy="750" r="100" fill="rgb(165, 180, 252)" filter="url(%23blur)" /></svg>'); background-repeat: no-repeat; background-size: cover; background-position: center;"></div>
<!-- Background artistic overlay for dark mode -->
<div class="absolute inset-0 z-0 opacity-0 dark:opacity-30 pointer-events-none"
style="background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000"><filter id="blur" x="-50%" y="-50%" width="200%" height="200%"><feGaussianBlur stdDeviation="40" /></filter><circle cx="200" cy="300" r="150" fill="rgb(31, 41, 55)" filter="url(%23blur)" /><circle cx="700" cy="500" r="200" fill="rgb(55, 65, 81)" filter="url(%23blur)" /><circle cx="400" cy="750" r="100" fill="rgb(17, 24, 39)" filter="url(%23blur)" /></svg>'); background-repeat: no-repeat; background-size: cover; background-position: center;"></div>
<div class="relative z-10 max-w-7xl mx-auto py-8 lg:py-12">
<header class="text-center mb-12">
<h2 class="text-3xl sm:text-4xl lg:text-5xl font-extrabold mb-4
text-gray-900 dark:text-gray-50 drop-shadow-lg leading-tight">
Our Consulting Expertise
</h2>
<p class="text-lg sm:text-xl text-gray-600 dark:text-gray-300 max-w-3xl mx-auto">
Empowering your business with strategic insights and tailored solutions.
</p>
</header>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
<!-- Service Card 1 -->
<article class="bg-white dark:bg-gray-800 rounded-xl shadow-lg hover:shadow-xl transition-shadow duration-300
overflow-hidden border border-gray-200 dark:border-gray-700
transform hover:-translate-y-1 group-hover:scale-[0.99] group-hover:first:scale-100
relative pb-6">
<div class="absolute inset-0 pointer-events-none"
style="background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" opacity="0.1">
<rect x="0" y="0" width="100" height="100" fill="lightgray"/><circle cx="50" cy="50" r="40" fill="lightgray" stroke="white" stroke-width="2"/></svg>');
background-size: 150px; background-repeat: no-repeat; background-position: center top;">
</div>
<div class="relative p-6 flex flex-col items-center text-center">
<img src="https://picsum.photos/id/1015/300/200" alt="Strategy Development" class="rounded-lg mb-4 w-full h-48 object-cover object-center border border-gray-100 dark:border-gray-600 shadow-sm">
<h3 class="text-xl font-semibold mb-2 text-gray-900 dark:text-gray-100">Strategy Development</h3>
<p class="text-gray-600 dark:text-gray-400 mb-4 flex-grow">
Crafting innovative strategies to navigate complex markets and achieve sustainable growth.
</p>
<a href="#" class="text-blue-600 dark:text-blue-400 hover:underline font-medium">
Learn More <span aria-hidden="true">→</span>
</a>
</div>
</article>
<!-- Service Card 2 -->
<article class="bg-white dark:bg-gray-800 rounded-xl shadow-lg hover:shadow-xl transition-shadow duration-300
overflow-hidden border border-gray-200 dark:border-gray-700
transform hover:-translate-y-1 group-hover:scale-[0.99] group-hover:first:scale-100
relative pb-6">
<div class="absolute inset-0 pointer-events-none"
style="background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" opacity="0.1">
<rect x="0" y="0" width="100" height="100" fill="lightgray"/><path d="M20 50 L80 50 M50 20 L50 80" stroke="white" stroke-width="2"/></svg>');
background-size: 150px; background-repeat: no-repeat; background-position: center top;">
</div>
<div class="relative p-6 flex flex-col items-center text-center">
<img src="https://picsum.photos/id/1041/300/200" alt="Operations Optimization" class="rounded-lg mb-4 w-full h-48 object-cover object-center border border-gray-100 dark:border-gray-600 shadow-sm">
<h3 class="text-xl font-semibold mb-2 text-gray-900 dark:text-gray-100">Operations Optimization</h3>
<p class="text-gray-600 dark:text-gray-400 mb-4 flex-grow">
Streamlining processes and enhancing efficiency to maximize your operational performance.
</p>
<a href="#" class="text-blue-600 dark:text-blue-400 hover:underline font-medium">
Learn More <span aria-hidden="true">→</span>
</a>
</div>
</article>
<!-- Service Card 3 -->
<article class="bg-white dark:bg-gray-800 rounded-xl shadow-lg hover:shadow-xl transition-shadow duration-300
overflow-hidden border border-gray-200 dark:border-gray-700
transform hover:-translate-y-1 group-hover:scale-[0.99] group-hover:first:scale-100
relative pb-6">
<div class="absolute inset-0 pointer-events-none"
style="background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" opacity="0.1">
<rect x="0" y="0" width="100" height="100" fill="lightgray"/><path d="M10 90 L90 10 L80 90 L10 90 Z" fill="lightgray" stroke="white" stroke-width="2"/></svg>');
background-size: 150px; background-repeat: no-repeat; background-position: center top;">
</div>
<div class="relative p-6 flex flex-col items-center text-center">
<img src="https://picsum.photos/id/1060/300/200" alt="Digital Transformation" class="rounded-lg mb-4 w-full h-48 object-cover object-center border border-gray-100 dark:border-gray-600 shadow-sm">
<h3 class="text-xl font-semibold mb-2 text-gray-900 dark:text-gray-100">Digital Transformation</h3>
<p class="text-gray-600 dark:text-gray-400 mb-4 flex-grow">
Guiding your journey through digital innovation, from adoption to full integration.
</p>
<a href="#" class="text-blue-600 dark:text-blue-400 hover:underline font-medium">
Learn More <span aria-hidden="true">→</span>
</a>
</div>
</article>
</div>
</div>
</div>Composants associés
Skeuomorphism Disposition en grille vibrante
Composant de mise en page de grille réactif avec prise en charge du mode sombre, conception Skeuomorphism, Couleurs vives, Complexité modérée, adapté aux portefeuilles.
Composant de disposition de grille 29
Un composant de mise en page de grille réactif conçu dans un style brutaliste avec un contraste élevé et des mises en page inhabituelles, prenant en charge le mode sombre avec Tailwind CSS.
Composant de mise en page de grille
Un composant de mise en page de grille minimaliste avec un design simple et épuré avec des effets réactifs et la prise en charge du thème sombre. Utilise des images de substitution et des avatars de picsum.photos et randomuser.me.