Rechercher des composants

Catégories

Colonnes

Mise en page de contenu multi-colonnes

3D_Vibrant_Columns_Component

Un composant de colonnes complexe, dynamique et réactif inspiré de la 3D, adapté à la documentation et aux sites wiki, avec prise en charge du mode sombre, des animations subtiles et du HTML sémantique.

Ouvrir Aperçu

                <section class="py-16 px-4 bg-gradient-to-br from-purple-100 to-pink-100 dark:from-gray-900 dark:to-teal-950 sm:px-6 lg:px-8 overflow-hidden">
  <div class="max-w-7xl mx-auto">
    <h2 class="text-4xl sm:text-5xl lg:text-6xl font-extrabold text-center text-transparent bg-clip-text bg-gradient-to-r from-purple-600 to-pink-600 dark:from-purple-400 dark:to-pink-400 mb-16 relative z-10 animate-fade-in">
      Unleash Your Knowledge
      <span class="block text-lg mt-2 text-purple-700 dark:text-purple-300 font-medium">Dive Deep into Our Comprehensive Documentation</span>
    </h2>

    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">

      <!-- Column 1: Getting Started -->
      <article class="relative group perspective-1000">
        <div class="relative transform-style-preserve-3d transition-transform duration-700 group-hover:rotateY-10 group-hover:scale-105 active:rotateY-20 active:scale-110 shadow-2xl rounded-3xl overflow-hidden bg-white dark:bg-gray-800 p-8 pt-20 border-t-8 border-purple-500 dark:border-purple-600 animate-slide-up">
          <div class="absolute top-0 left-0 w-full h-full bg-gradient-to-br from-purple-500 to-pink-500 dark:from-purple-700 dark:to-pink-700 opacity-20 dark:opacity-30 blur-xl z-0"></div>
          <div class="absolute -top-6 left-1/2 -ml-12 w-24 h-24 bg-purple-600 dark:bg-purple-500 rounded-full flex items-center justify-center shadow-lg transform translateZ-40 group-hover:scale-110 transition-transform duration-300">
            <svg class="w-12 h-12 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m1.636 6.364l.707-.707M6 21v-1m-4.636-1.636l.707-.707M12 10.5V19m-7.954-1-1.603-2.264M15.954 18l1.603-2.264M5.462 14.5L7.72 16.634C7.882 16.71 8 16.75 8 17s-.118.29-.28.366L5.462 19.5"></path>
            </svg>
          </div>
          <div class="relative z-10">
            <h3 class="text-3xl font-bold text-gray-900 dark:text-white mb-4 transform translateZ-20">Getting Started</h3>
            <p class="text-gray-700 dark:text-gray-300 leading-relaxed mb-6 transform translateZ-10">Kickstart your journey with our easy-to-follow setup guides and basic concepts. Perfect for beginners!</p>
            <ul class="space-y-3 mb-8">
              <li><a href="#" class="flex items-center text-purple-600 dark:text-purple-400 hover:text-purple-800 dark:hover:text-purple-200 transition duration-200 transform translateZ-5 hover:translate-x-1">
                <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01"></path></svg>
                Installation Guide
              </a></li>
              <li><a href="#" class="flex items-center text-purple-600 dark:text-purple-400 hover:text-purple-800 dark:hover:text-purple-200 transition duration-200 transform translateZ-5 hover:translate-x-1">
                <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 14v3m4-3v3m4-3v3M3 21h18M3 10V7a2 2 0 012-2h14a2 2 0 012 2v3m-2 10h.01M5 10h.01"></path></svg>
                Core Concepts
              </a></li>
            </ul>
            <a href="#" class="inline-flex items-center px-6 py-3 bg-gradient-to-r from-purple-600 to-pink-600 text-white font-semibold rounded-full shadow-lg hover:from-purple-700 hover:to-pink-700 transform translateZ-30 transition-all duration-300 group-hover:scale-105 active:scale-95">
              Explore Guides
              <svg class="ml-2 w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"></path></svg>
            </a>
          </div>
        </div>
      </article>

      <!-- Column 2: Advanced Topics -->
      <article class="relative group perspective-1000">
        <div class="relative transform-style-preserve-3d transition-transform duration-700 group-hover:rotateY-10 group-hover:scale-105 active:rotateY-20 active:scale-110 shadow-2xl rounded-3xl overflow-hidden bg-white dark:bg-gray-800 p-8 pt-20 border-t-8 border-teal-500 dark:border-teal-600 animate-slide-up animation-delay-200">
          <div class="absolute top-0 left-0 w-full h-full bg-gradient-to-br from-teal-500 to-blue-500 dark:from-teal-700 dark:to-blue-700 opacity-20 dark:opacity-30 blur-xl z-0"></div>
          <div class="absolute -top-6 left-1/2 -ml-12 w-24 h-24 bg-teal-600 dark:bg-teal-500 rounded-full flex items-center justify-center shadow-lg transform translateZ-40 group-hover:scale-110 transition-transform duration-300">
            <svg class="w-12 h-12 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.75 17L9 20l-1 1h8l-1-1-1.25-3M15 10V7a3 3 0 00-3-3m-4 10H8m4 0h4m-4 0c1.333-1 2.5-4 2.5-4S13 9 12 8s-2.5 4-2.5 4S9 9 10 8c1.333-1 2.5-4 2.5-4z"></path>
            </svg>
          </div>
          <div class="relative z-10">
            <h3 class="text-3xl font-bold text-gray-900 dark:text-white mb-4 transform translateZ-20">Advanced Topics</h3>
            <p class="text-gray-700 dark:text-gray-300 leading-relaxed mb-6 transform translateZ-10">Deep dive into complex features, optimization, and specific use cases for experienced users.</p>
            <ul class="space-y-3 mb-8">
              <li><a href="#" class="flex items-center text-teal-600 dark:text-teal-400 hover:text-teal-800 dark:hover:text-teal-200 transition duration-200 transform translateZ-5 hover:translate-x-1">
                <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4M7.835 4.697A3.42 3.42 0 007 9.111v3.089L8.104 21H15.896L17 12.2V9.111a3.42 3.42 0 00-.835-4.414C14.456 2.012 11.917 1 9.5 1S4.544 2.012 2.835 4.697z"></path></svg>
                API Reference
              </a></li>
              <li><a href="#" class="flex items-center text-teal-600 dark:text-teal-400 hover:text-teal-800 dark:hover:text-teal-200 transition duration-200 transform translateZ-5 hover:translate-x-1">
                <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4"></path></svg>
                Performance Optimization
              </a></li>
            </ul>
            <a href="#" class="inline-flex items-center px-6 py-3 bg-gradient-to-r from-teal-600 to-blue-600 text-white font-semibold rounded-full shadow-lg hover:from-teal-700 hover:to-blue-700 transform translateZ-30 transition-all duration-300 group-hover:scale-105 active:scale-95">
              View Advanced Docs
              <svg class="ml-2 w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"></path></svg>
            </a>
          </div>
        </div>
      </article>

      <!-- Column 3: Community & Support -->
      <article class="relative group perspective-1000">
        <div class="relative transform-style-preserve-3d transition-transform duration-700 group-hover:rotateY-10 group-hover:scale-105 active:rotateY-20 active:scale-110 shadow-2xl rounded-3xl overflow-hidden bg-white dark:bg-gray-800 p-8 pt-20 border-t-8 border-orange-500 dark:border-orange-600 animate-slide-up animation-delay-400">
          <div class="absolute top-0 left-0 w-full h-full bg-gradient-to-br from-orange-500 to-red-500 dark:from-orange-700 dark:to-red-700 opacity-20 dark:opacity-30 blur-xl z-0"></div>
          <div class="absolute -top-6 left-1/2 -ml-12 w-24 h-24 bg-orange-600 dark:bg-orange-500 rounded-full flex items-center justify-center shadow-lg transform translateZ-40 group-hover:scale-110 transition-transform duration-300">
            <svg class="w-12 h-12 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h2a2 2 0 002-2V9.667a1 1 0 00-.5-.866l-6-3.75a2 2 0 00-2 0l-6 3.75a1 1 0 00-.5.866V18a2 2 0 002 2h2m0 0v-2a3 3 0 013-3h2a3 3 0 013 3v2m-6 0h6m-7 2l-1 1H4a2 2 0 01-2-2v-4a2 2 0 012-2h16c1.105 0 2 .895 2 2v4a2 2 0 01-2 2h-1l-1-1m-10-8h.01M16 12h.01"></path>
            </svg>
          </div>
          <div class="relative z-10">
            <h3 class="text-3xl font-bold text-gray-900 dark:text-white mb-4 transform translateZ-20">Community & Support</h3>
            <p class="text-gray-700 dark:text-gray-300 leading-relaxed mb-6 transform translateZ-10">Connect with fellow users, get help from experts, and contribute to the knowledge base.</p>
            <ul class="space-y-3 mb-8">
              <li><a href="#" class="flex items-center text-orange-600 dark:text-orange-400 hover:text-orange-800 dark:hover:text-orange-200 transition duration-200 transform translateZ-5 hover:translate-x-1">
                <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"></path></svg>
                Forums & Discord
              </a></li>
              <li><a href="#" class="flex items-center text-orange-600 dark:text-orange-400 hover:text-orange-800 dark:hover:text-orange-200 transition duration-200 transform translateZ-5 hover:translate-x-1">
                <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4"></path></svg>
                Report an Issue
              </a></li>
            </ul>
            <a href="#" class="inline-flex items-center px-6 py-3 bg-gradient-to-r from-orange-600 to-red-600 text-white font-semibold rounded-full shadow-lg hover:from-orange-700 hover:to-red-700 transform translateZ-30 transition-all duration-300 group-hover:scale-105 active:scale-95">
              Join the Community
              <svg class="ml-2 w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"></path></svg>
            </a>
          </div>
        </div>
      </article>

    </div>
  </div>
</section>

<style>
/* Define perspective for 3D effect */
.perspective-1000 {
  perspective: 1000px;
}

/* Common 3D transforms */
.transform-style-preserve-3d {
  transform-style: preserve-3d;
}

.rotateY-10 {
  transform: rotateY(10deg);
}

.rotateY-20 {
  transform: rotateY(20deg);
}

/* z-axis translations for layering */
.translateZ-40 {
  transform: translateZ(40px);
}
.translateZ-30 {
  transform: translateZ(30px);
}
.translateZ-20 {
  transform: translateZ(20px);
}
.translateZ-10 {
  transform: translateZ(10px);
}
.translateZ-5 {
  transform: translateZ(5px);
}

/* Keyframes for animations */
@keyframes fade-in {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes slide-up {
  from { opacity: 0; transform: translateY(50px) rotateX(-5deg); }
  to { opacity: 1; transform: translateY(0) rotateX(0deg); }
}

.animate-fade-in {
  animation: fade-in 1s ease-out forwards;
}

.animate-slide-up {
  animation: slide-up 0.7s ease-out forwards;
  opacity: 0;
}

.animation-delay-200 {
  animation-delay: 0.2s;
}

.animation-delay-400 {
  animation-delay: 0.4s;
}

/* Ensure animations are paused if prefers-reduced-motion is enabled */
@media (prefers-reduced-motion: reduce) {
  .animate-fade-in,
  .animate-slide-up,
  .animation-delay-200,
  .animation-delay-400,
  .group-hover\:rotateY-10,
  .group-hover\:scale-105,
  .active\:rotateY-20,
  .active\:scale-110,
  .group-hover\:scale-110,
  .group-hover\:scale-105,
  .active\:scale-95
  {
    animation: none !important;
    transition: none !important;
    transform: none !important;
  }
}
</style>

Playful_Documentation_Columns_Component

Un composant de documentation/colonnes wiki ludique et coloré avec des tons ensoleillés/chauds, des éléments arrondis et la prise en charge du mode sombre. Conçu pour être réactif sur tous les appareils.

Ouvrir Aperçu

                <div class="font-sans antialiased bg-orange-50 dark:bg-gray-900 transition-colors duration-300 py-12 sm:py-16 lg:py-20">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <div class="text-center mb-12 sm:mb-16 lg:mb-20">
      <h2 class="text-4xl sm:text-5xl lg:text-6xl font-extrabold text-orange-700 dark:text-orange-300 mb-4 tracking-tight leading-tight">
        Explore Our Sunny Guides!
      </h2>
      <p class="text-lg sm:text-xl text-orange-600 dark:text-orange-400 max-w-2xl mx-auto">
        Dive into our vibrant collection of helpful articles and fun insights to brighten your day.
      </p>
    </div>

    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 sm:gap-10 lg:gap-12">
      <!-- Column 1 -->
      <div class="bg-white dark:bg-gray-800 rounded-3xl shadow-xl hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-2 p-6 sm:p-8 border-4 border-orange-200 dark:border-yellow-700">
        <div class="flex justify-center mb-6">
          <img src="https://picsum.photos/seed/docs1/300/200" alt="Getting Started" class="rounded-2xl w-full h-48 object-cover shadow-lg border-2 border-orange-300 dark:border-orange-500">
        </div>
        <h3 class="text-2xl sm:text-3xl font-bold text-orange-700 dark:text-orange-300 mb-3 text-center">
          Quick Start Guide
        </h3>
        <p class="text-orange-600 dark:text-orange-400 text-base sm:text-lg mb-6 text-center">
          Jump right in with our easy-to-follow guide for new adventurers.
        </p>
        <div class="flex justify-center">
          <a href="#" class="inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-full shadow-sm text-white bg-orange-500 hover:bg-orange-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-orange-500 dark:focus:ring-offset-gray-900 transition-colors duration-200 group">
            Explore Now
            <svg class="ml-2 -mr-1 w-5 h-5 transform group-hover:translate-x-1 transition-transform duration-200" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L12.586 11H5a1 1 0 110-2h7.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
          </a>
        </div>
      </div>

      <!-- Column 2 -->
      <div class="bg-white dark:bg-gray-800 rounded-3xl shadow-xl hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-2 p-6 sm:p-8 border-4 border-yellow-200 dark:border-orange-700">
        <div class="flex justify-center mb-6">
          <img src="https://picsum.photos/seed/docs2/300/200" alt="Advanced Features" class="rounded-2xl w-full h-48 object-cover shadow-lg border-2 border-yellow-300 dark:border-yellow-500">
        </div>
        <h3 class="text-2xl sm:text-3xl font-bold text-yellow-700 dark:text-yellow-300 mb-3 text-center">
          Advanced Tricks
        </h3>
        <p class="text-yellow-600 dark:text-yellow-400 text-base sm:text-lg mb-6 text-center">
          Uncover the hidden gems and master the advanced functionalities.
        </p>
        <div class="flex justify-center">
          <a href="#" class="inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-full shadow-sm text-white bg-yellow-500 hover:bg-yellow-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-yellow-500 dark:focus:ring-offset-gray-900 transition-colors duration-200 group">
            Learn More
            <svg class="ml-2 -mr-1 w-5 h-5 transform group-hover:translate-x-1 transition-transform duration-200" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L12.586 11H5a1 1 0 110-2h7.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
          </a>
        </div>
      </div>

      <!-- Column 3 -->
      <div class="bg-white dark:bg-gray-800 rounded-3xl shadow-xl hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-2 p-6 sm:p-8 border-4 border-red-200 dark:border-red-700">
        <div class="flex justify-center mb-6">
          <img src="https://picsum.photos/seed/docs3/300/200" alt="Support & FAQs" class="rounded-2xl w-full h-48 object-cover shadow-lg border-2 border-red-300 dark:border-red-500">
        </div>
        <h3 class="text-2xl sm:text-3xl font-bold text-red-700 dark:text-red-300 mb-3 text-center">
          Support & Smiles
        </h3>
        <p class="text-red-600 dark:text-red-400 text-base sm:text-lg mb-6 text-center">
          Find answers to common questions and get a helping hand when you need it.
        </p>
        <div class="flex justify-center">
          <a href="#" class="inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-full shadow-sm text-white bg-red-500 hover:bg-red-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 dark:focus:ring-offset-gray-900 transition-colors duration-200 group">
            Get Help
            <svg class="ml-2 -mr-1 w-5 h-5 transform group-hover:translate-x-1 transition-transform duration-200" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L12.586 11H5a1 1 0 110-2h7.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
          </a>
        </div>
      </div>
    </div>
  </div>
</div>

Luxury_Job_Board_Columns_Component

Un composant de colonne monochromatique de luxe / premium pour les sites d’emploi et les plateformes de développement de carrière. Il présente un design sophistiqué avec une typographie élégante, des éléments d’interface riches, une réactivité totale et une prise en charge du mode sombre.

Ouvrir Aperçu

                <div class="font-sans bg-gray-100 dark:bg-gray-900 text-gray-800 dark:text-gray-200 py-16 px-4 sm:px-6 lg:px-8">
  <div class="max-w-7xl mx-auto">
    <div class="text-center mb-16">
      <h2 class="text-4xl font-extrabold tracking-tight text-gray-900 dark:text-gray-100 sm:text-5xl lg:text-6xl mb-4">
        Elevate Your Career Path
      </h2>
      <p class="mt-4 text-xl text-gray-600 dark:text-gray-400 max-w-2xl mx-auto">
        Discover exclusive opportunities and resources tailored for ambitious professionals seeking unparalleled growth.
      </p>
    </div>

    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-10">
      <!-- Column 1: Featured Jobs -->
      <div class="bg-white dark:bg-gray-800 rounded-3xl shadow-xl hover:shadow-2xl transition-all duration-300 overflow-hidden group">
        <div class="p-8 sm:p-10">
          <div class="flex items-center mb-6">
            <svg class="h-10 w-10 text-purple-600 dark:text-purple-400 mr-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 13.255A23.931 23.931 0 0112 15c-3.183 0-6.22-1.28-8.452-3.527m16.904 0C18.66 11.66 16.142 10 13.5 10c-1.802 0-3.487 0.605-4.872 1.637m.005-2.196A23.931 23.931 0 0112 15c-3.183 0-6.22-1.28-8.452-3.527m16.904 0A25.105 25.105 0 0112 8c-3.183 0-6.22-1.28-8.452-3.527m16.904 0C18.66 11.66 16.142 10 13.5 10c-1.802 0-3.487 0.605-4.872 1.637m.005-2.196L12 21l-7.755-4.851a.625.625 0 01-.247-.484V13.5L12 21l7.755-4.851a.625.625 0 01.247-.484V13.5z" />
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 13.255A23.931 23.931 0 0112 15c-3.183 0-6.22-1.28-8.452-3.527m16.904 0C18.66 11.66 16.142 10 13.5 10c-1.802 0-3.487 0.605-4.872 1.637m.005-2.196A23.931 23.931 0 0112 15c-3.183 0-6.22-1.28-8.452-3.527m16.904 0A25.105 25.105 0 0112 8c-3.183 0-6.22-1.28-8.452-3.527m16.904 0C18.66 11.66 16.142 10 13.5 10c-1.802 0-3.487 0.605-4.872 1.637m.005-2.196L12 21l-7.755-4.851a.625.625 0 01-.247-.484V13.5L12 21l7.755-4.851a.625.625 0 01.247-.484V13.5z" />
            </svg>
            <h3 class="text-2xl font-bold text-gray-900 dark:text-gray-100">Featured Opportunities</h3>
          </div>
          <ul class="space-y-4 text-gray-600 dark:text-gray-300">
            <li class="flex items-center group-hover:text-purple-700 dark:group-hover:text-purple-300 transition-colors duration-200">
              <svg class="h-5 w-5 mr-3 text-purple-500 dark:text-purple-400" fill="currentColor" viewBox="0 0 20 20">
                <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path>
              </svg>
              <a href="#" class="font-medium">Senior AI/ML Engineer <span class="text-sm text-gray-500 dark:text-gray-400 ml-2">@ TechCorp</span></a>
            </li>
            <li class="flex items-center group-hover:text-purple-700 dark:group-hover:text-purple-300 transition-colors duration-200">
              <svg class="h-5 w-5 mr-3 text-purple-500 dark:text-purple-400" fill="currentColor" viewBox="0 0 20 20">
                <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path>
              </svg>
              <a href="#" class="font-medium">Director of Product Management <span class="text-sm text-gray-500 dark:text-gray-400 ml-2">@ InnovateX</span></a>
            </li>
            <li class="flex items-center group-hover:text-purple-700 dark:group-hover:text-purple-300 transition-colors duration-200">
              <svg class="h-5 w-5 mr-3 text-purple-500 dark:text-purple-400" fill="currentColor" viewBox="0 0 20 20">
                <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path>
              </svg>
              <a href="#" class="font-medium">Lead UX/UI Designer <span class="text-sm text-gray-500 dark:text-gray-400 ml-2">@ Creative Labs</span></a>
            </li>
            <li class="flex items-center group-hover:text-purple-700 dark:group-hover:text-purple-300 transition-colors duration-200">
              <svg class="h-5 w-5 mr-3 text-purple-500 dark:text-purple-400" fill="currentColor" viewBox="0 0 20 20">
                <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path>
              </svg>
              <a href="#" class="font-medium">Quant Research Analyst <span class="text-sm text-gray-500 dark:text-gray-400 ml-2">@ FinancePrime</span></a>
            </li>
          </ul>
          <div class="mt-8 text-center">
            <a href="#" class="inline-flex items-center justify-center px-6 py-3 border border-transparent text-base font-medium rounded-full shadow-sm text-white bg-purple-600 hover:bg-purple-700 dark:bg-purple-700 dark:hover:bg-purple-600 transition-all duration-300">
              View All Jobs
              <svg class="ml-3 -mr-1 h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
                <path fill-rule="evenodd" d="M10.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L12.586 11H5a1 1 0 110-2h7.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path>
              </svg>
            </a>
          </div>
        </div>
      </div>

      <!-- Column 2: Career Resources -->
      <div class="bg-white dark:bg-gray-800 rounded-3xl shadow-xl hover:shadow-2xl transition-all duration-300 overflow-hidden group">
        <div class="p-8 sm:p-10">
          <div class="flex items-center mb-6">
            <svg class="h-10 w-10 text-purple-600 dark:text-purple-400 mr-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13.006m0-13.006a4.501 4.501 0 014.118 6.002L12 21l-4.118-8.74c.23-.974.223-1.996.002-3.003-.22-.988-.636-1.921-1.228-2.739l-.427-.61h.01M12 6.253V1h0c0 2.21-1.79 4-4 4S4 3.21 4 1h0m8 5.253a4.501 4.501 0 00-4.118 6.002L12 21l4.118-8.74c-.23-.974-.223-1.996-.002-3.003.22-.988.636-1.921 1.228-2.739l.427-.61h-.01" />
            </svg>
            <h3 class="text-2xl font-bold text-gray-900 dark:text-gray-100">Career Evolution Hub</h3>
          </div>
          <div class="space-y-6">
            <div class="flex items-start">
              <img class="h-16 w-16 flex-shrink-0 rounded-lg object-cover mr-4 shadow-sm" src="https://picsum.photos/id/1018/100/100" alt="Resume Building Guide">
              <div>
                <h4 class="text-lg font-semibold text-gray-900 dark:text-gray-100">Mastering Your Executive Resume</h4>
                <p class="text-gray-600 dark:text-gray-400 text-sm">Download our comprehensive guide to craft a resume that stands out.</p>
                <a href="#" class="text-purple-600 dark:text-purple-400 hover:text-purple-700 dark:hover:text-purple-300 text-sm font-medium transition-colors duration-200 mt-2 inline-block">Read More &rarr;</a>
              </div>
            </div>
            <div class="flex items-start">
              <img class="h-16 w-16 flex-shrink-0 rounded-lg object-cover mr-4 shadow-sm" src="https://picsum.photos/id/1015/100/100" alt="Interview Prep">
              <div>
                <h4 class="text-lg font-semibold text-gray-900 dark:text-gray-100">Acing the Leadership Interview</h4>
                <p class="text-gray-600 dark:text-gray-400 text-sm">Tips and strategies for navigating complex executive interviews.</p>
                <a href="#" class="text-purple-600 dark:text-purple-400 hover:text-purple-700 dark:hover:text-purple-300 text-sm font-medium transition-colors duration-200 mt-2 inline-block">Access Now &rarr;</a>
              </div>
            </div>
            <div class="flex items-start">
              <img class="h-16 w-16 flex-shrink-0 rounded-lg object-cover mr-4 shadow-sm" src="https://picsum.photos/id/1016/100/100" alt="Networking Strategies">
              <div>
                <h4 class="text-lg font-semibold text-gray-900 dark:text-gray-100">Elite Networking Strategies</h4>
                <p class="text-gray-600 dark:text-gray-400 text-sm">Build a powerful professional network in your industry.</p>
                <a href="#" class="text-purple-600 dark:text-purple-400 hover:text-purple-700 dark:hover:text-purple-300 text-sm font-medium transition-colors duration-200 mt-2 inline-block">Discover &rarr;</a>
              </div>
            </div>
          </div>
          <div class="mt-8 text-center">
            <a href="#" class="inline-flex items-center justify-center px-6 py-3 border border-purple-600 dark:border-purple-500 text-base font-medium rounded-full text-purple-600 dark:text-purple-400 hover:bg-purple-50 dark:hover:bg-gray-700 transition-all duration-300">
              Explore All Resources
            </a>
          </div>
        </div>
      </div>

      <!-- Column 3: Executive Coaching & Mentorship -->
      <div class="bg-white dark:bg-gray-800 rounded-3xl shadow-xl hover:shadow-2xl transition-all duration-300 overflow-hidden group">
        <div class="p-8 sm:p-10">
          <div class="flex items-center mb-6">
            <svg class="h-10 w-10 text-purple-600 dark:text-purple-400 mr-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 13.5l3 3m0 0l3-3m-3 3v-6.75M9 20.25h14.25a2.25 2.25 0 002.25-2.25V6.75a2.25 2.25 0 00-2.25-2.25H9C6.709 4.5 4.5 6.709 4.5 9v9A2.25 2.25 0 006.75 20.25H9m-6.75-9.75h-.375c-1.077 0-1.95.873-1.95 1.95V20.25a2.25 2.25 0 002.25 2.25h4.5c.983 0 1.838-.415 2.455-1.072M7.5 7.5a.75.75 0 100-1.5.75.75 0 000 1.5zm-3 0a.75.75 0 100-1.5.75.75 0 000 1.5z" />
            </svg>
            <h3 class="text-2xl font-bold text-gray-900 dark:text-gray-100">Executive Coaching & Mentorship</h3>
          </div>
          <p class="text-gray-600 dark:text-gray-400 mb-6">Gain personalized guidance from industry leaders and certified executive coaches.</p>
          <div class="grid grid-cols-1 sm:grid-cols-2 gap-4 mb-6">
            <div class="flex items-center space-x-3">
              <img class="h-12 w-12 rounded-full object-cover shadow-md" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Coach John Doe">
              <div>
                <p class="font-medium text-gray-900 dark:text-gray-100">John Doe</p>
                <p class="text-sm text-gray-500 dark:text-gray-400">Leadership Coach</p>
              </div>
            </div>
            <div class="flex items-center space-x-3">
              <img class="h-12 w-12 rounded-full object-cover shadow-md" src="https://randomuser.me/api/portraits/women/44.jpg" alt="Mentor Jane Smith">
              <div>
                <p class="font-medium text-gray-900 dark:text-gray-100">Jane Smith</p>
                <p class="text-sm text-gray-500 dark:text-gray-400">Tech CEO Mentor</p>
              </div>
            </div>
            <div class="flex items-center space-x-3">
              <img class="h-12 w-12 rounded-full object-cover shadow-md" src="https://randomuser.me/api/portraits/men/51.jpg" alt="Advisor Michael Brown">
              <div>
                <p class="font-medium text-gray-900 dark:text-gray-100">Michael Brown</p>
                <p class="text-sm text-gray-500 dark:text-gray-400">Strategy Advisor</p>
              </div>
            </div>
            <div class="flex items-center space-x-3">
              <img class="h-12 w-12 rounded-full object-cover shadow-md" src="https://randomuser.me/api/portraits/women/66.jpg" alt="Trainer Emily White">
              <div>
                <p class="font-medium text-gray-900 dark:text-gray-100">Emily White</p>
                <p class="text-sm text-gray-500 dark:text-gray-400">Career Trainer</p>
              </div>
            </div>
          </div>
          <div class="mt-8 text-center">
            <a href="#" class="inline-flex items-center justify-center px-6 py-3 border border-transparent text-base font-medium rounded-full shadow-sm text-white bg-purple-600 hover:bg-purple-700 dark:bg-purple-700 dark:hover:bg-purple-600 transition-all duration-300">
              Find Your Mentor
              <svg class="ml-3 -mr-1 h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
                <path fill-rule="evenodd" d="M10.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L12.586 11H5a1 1 0 110-2h7.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path>
              </svg>
            </a>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Retro_Industrial_Columns_Component

Un composant de colonnes complexe, vibrant, de style rétro/vintage pour les entreprises manufacturières/industrielles, présentant une esthétique des années 80/90 avec prise en charge du mode sombre et une réactivité totale.

Ouvrir Aperçu

                <section class="bg-gradient-to-br from-gray-200 to-gray-50 dark:from-zinc-900 dark:to-zinc-950 py-16 px-4 sm:px-6 lg:px-8 font-mono overflow-hidden relative">
  <div class="absolute inset-0 bg-[url('https://www.transparenttextures.com/patterns/stardust.png')] opacity-10 dark:opacity-5"></div>
  <div class="max-w-7xl mx-auto relative z-10">
    <div class="text-center mb-16">
      <h2 class="text-4xl sm:text-5xl lg:text-6xl font-extrabold text-indigo-700 dark:text-cyan-400 drop-shadow-lg mb-4 uppercase tracking-wider leading-tight animate-pulse-fast">
        <span class="block transform -skew-x-6 inline-block bg-gradient-to-r from-red-500 to-yellow-500 dark:from-red-600 dark:to-yellow-600 px-4 py-2 rounded-lg shadow-xl mb-2">Advanced Industrial Solutions</span>
        <span class="block text-gray-800 dark:text-gray-100 mt-2">for the Modern Age</span>
      </h2>
      <p class="text-lg sm:text-xl text-gray-700 dark:text-gray-300 max-w-3xl mx-auto shadow-sm p-4 rounded-md bg-gray-100/70 dark:bg-zinc-800/70 backdrop-blur-sm border border-gray-300 dark:border-zinc-700">
        Revolutionizing manufacturing with cutting-edge technology and unparalleled precision. Explore our robust capabilities.
      </p>
    </div>

    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 lg:gap-12">
      <!-- Column 1: Precision Engineering -->
      <div class="group perspective h-full">
        <div class="relative preserve-3d transition-transform duration-700 group-hover:rotateY-180 bg-gradient-to-br from-red-500 to-red-600 dark:from-red-600 dark:to-red-700 p-6 rounded-xl shadow-2xl border-4 border-red-400 dark:border-red-500 box-border text-gray-900">
          <!-- Front Side -->
          <div class="absolute inset-0 backface-hidden flex flex-col justify-between p-6">
            <div class="text-center flex-grow flex flex-col justify-center items-center">
              <div class="text-6xl text-yellow-300 mb-4 animate-spin-slow-reverse"><span class="material-icons-outlined">&#xe90f;</span></div>
              <h3 class="text-3xl font-extrabold text-yellow-200 mb-3 drop-shadow-md text-glow capitalize">Precision Engineering</h3>
              <p class="text-yellow-100 text-lg sm:text-xl">Unmatched accuracy for complex industrial demands.</p>
            </div>
            <button class="mt-8 px-6 py-3 bg-yellow-300 hover:bg-yellow-400 text-red-800 font-bold uppercase rounded-lg shadow-lg transform hover:scale-105 transition-transform duration-300 self-center border-2 border-yellow-200 focus:outline-none focus:ring-4 focus:ring-yellow-500 focus:ring-opacity-70">Discover More</button>
          </div>

          <!-- Back Side -->
          <div class="absolute inset-0 rotateY-180 backface-hidden flex flex-col p-6">
            <h3 class="text-2xl font-bold text-yellow-200 mb-3 border-b-2 border-yellow-300 pb-2">Key Features</h3>
            <ul class="list-disc list-inside text-yellow-100 space-y-2 flex-grow text-lg">
              <li><span class="text-yellow-300 pr-1">&gt;</span> CNC Machining</li>
              <li><span class="text-yellow-300 pr-1">&gt;</span> CAD/CAM Integration</li>
              <li><span class="text-yellow-300 pr-1">&gt;</span> Quality Control Systems</li>
              <li><span class="text-yellow-300 pr-1">&gt;</span> Rapid Prototyping</li>
            </ul>
            <div class="text-center mt-6">
              <img src="https://picsum.photos/id/160/300/200" alt="Precision Engineering" class="w-full h-32 object-cover rounded-lg shadow-inner border-2 border-yellow-300 mb-4">
              <a href="#" class="text-yellow-300 hover:underline transition-colors duration-300 text-lg">View Case Studies &rarr;</a>
            </div>
          </div>
        </div>
      </div>

      <!-- Column 2: Automated Systems -->
      <div class="group perspective h-full">
        <div class="relative preserve-3d transition-transform duration-700 group-hover:rotateY-180 bg-gradient-to-br from-green-500 to-green-600 dark:from-green-600 dark:to-green-700 p-6 rounded-xl shadow-2xl border-4 border-green-400 dark:border-green-500 box-border text-gray-900">
          <!-- Front Side -->
          <div class="absolute inset-0 backface-hidden flex flex-col justify-between p-6">
            <div class="text-center flex-grow flex flex-col justify-center items-center">
              <div class="text-6xl text-cyan-300 mb-4 animate-[spin_5s_linear_infinite]"><span class="material-icons-outlined">&#xe322;</span></div>
              <h3 class="text-3xl font-extrabold text-cyan-200 mb-3 drop-shadow-md text-glow capitalize">Automated Systems</h3>
              <p class="text-cyan-100 text-lg sm:text-xl">Smart solutions for peak operational efficiency.</p>
            </div>
            <button class="mt-8 px-6 py-3 bg-cyan-300 hover:bg-cyan-400 text-green-800 font-bold uppercase rounded-lg shadow-lg transform hover:scale-105 transition-transform duration-300 self-center border-2 border-cyan-200 focus:outline-none focus:ring-4 focus:ring-cyan-500 focus:ring-opacity-70">Explore Robotics</button>
          </div>

          <!-- Back Side -->
          <div class="absolute inset-0 rotateY-180 backface-hidden flex flex-col p-6">
            <h3 class="text-2xl font-bold text-cyan-200 mb-3 border-b-2 border-cyan-300 pb-2">Key Technologies</h3>
            <ul class="list-disc list-inside text-cyan-100 space-y-2 flex-grow text-lg">
              <li><span class="text-cyan-300 pr-1">&gt;</span> Robotic Integration</li>
              <li><span class="text-cyan-300 pr-1">&gt;</span> IoT &amp; Sensors</li>
              <li><span class="text-cyan-300 pr-1">&gt;</span> Predictive Maintenance</li>
              <li><span class="text-cyan-300 pr-1">&gt;</span> AI-Driven Optimization</li>
            </ul>
            <div class="text-center mt-6">
              <img src="https://picsum.photos/id/356/300/200" alt="Automated Systems" class="w-full h-32 object-cover rounded-lg shadow-inner border-2 border-cyan-300 mb-4">
              <a href="#" class="text-cyan-300 hover:underline transition-colors duration-300 text-lg">See Automation In Action &rarr;</a>
            </div>
          </div>
        </div>
      </div>

      <!-- Column 3: Global Supply Chain -->
      <div class="group perspective h-full">
        <div class="relative preserve-3d transition-transform duration-700 group-hover:rotateY-180 bg-gradient-to-br from-purple-500 to-purple-600 dark:from-purple-600 dark:to-purple-700 p-6 rounded-xl shadow-2xl border-4 border-purple-400 dark:border-purple-500 box-border text-gray-900">
          <!-- Front Side -->
          <div class="absolute inset-0 backface-hidden flex flex-col justify-between p-6">
            <div class="text-center flex-grow flex flex-col justify-center items-center">
              <div class="text-6xl text-pink-300 mb-4 animate-[heartbeat_1.5s_infinite]"><span class="material-icons-outlined">&#xe540;</span></div>
              <h3 class="text-3xl font-extrabold text-pink-200 mb-3 drop-shadow-md text-glow capitalize">Global Supply Chain</h3>
              <p class="text-pink-100 text-lg sm:text-xl">Seamless logistics from raw material to finished product.</p>
            </div>
            <button class="mt-8 px-6 py-3 bg-pink-300 hover:bg-pink-400 text-purple-800 font-bold uppercase rounded-lg shadow-lg transform hover:scale-105 transition-transform duration-300 self-center border-2 border-pink-200 focus:outline-none focus:ring-4 focus:ring-pink-500 focus:ring-opacity-70">View Our Network</button>
          </div>

          <!-- Back Side -->
          <div class="absolute inset-0 rotateY-180 backface-hidden flex flex-col p-6">
            <h3 class="text-2xl font-bold text-pink-200 mb-3 border-b-2 border-pink-300 pb-2">Logistics &amp; Tracking</h3>
            <ul class="list-disc list-inside text-pink-100 space-y-2 flex-grow text-lg">
              <li><span class="text-pink-300 pr-1">&gt;</span> Real-time Tracking</li>
              <li><span class="text-pink-300 pr-1">&gt;</span> Warehousing Solutions</li>
              <li><span class="text-pink-300 pr-1">&gt;</span> Global Distribution</li>
              <li><span class="text-pink-300 pr-1">&gt;</span> Compliance Management</li>
            </ul>
            <div class="text-center mt-6">
              <img src="https://picsum.photos/id/1084/300/200" alt="Global Supply Chain" class="w-full h-32 object-cover rounded-lg shadow-inner border-2 border-pink-300 mb-4">
              <a href="#" class="text-pink-300 hover:underline transition-colors duration-300 text-lg">Explore Our Reach &rarr;</a>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="text-center mt-16">
      <div class="text-2xl font-bold text-gray-800 dark:text-gray-200 mb-6 uppercase tracking-wide">Trusted By Industry Leaders</div>
      <div class="grid grid-cols-2 md:grid-cols-4 gap-8 items-center max-w-4xl mx-auto opacity-80">
        <img src="https://picsum.photos/id/237/100/50?grayscale" alt="Client Logo 1" class="filter grayscale blend-multiply dark:invert mix-blend-lighten opacity-80 hover:opacity-100 transition-opacity duration-300 mx-auto">
        <img src="https://picsum.photos/id/238/100/50?grayscale" alt="Client Logo 2" class="filter grayscale blend-multiply dark:invert mix-blend-lighten opacity-80 hover:opacity-100 transition-opacity duration-300 mx-auto">
        <img src="https://picsum.photos/id/239/100/50?grayscale" alt="Client Logo 3" class="filter grayscale blend-multiply dark:invert mix-blend-lighten opacity-80 hover:opacity-100 transition-opacity duration-300 mx-auto">
        <img src="https://picsum.photos/id/240/100/50?grayscale" alt="Client Logo 4" class="filter grayscale blend-multiply dark:invert mix-blend-lighten opacity-80 hover:opacity-100 transition-opacity duration-300 mx-auto">
      </div>
      <div class="mt-12">
        <a href="#contact" class="inline-flex items-center px-8 py-4 bg-yellow-400 dark:bg-yellow-500 text-gray-900 border-4 border-yellow-300 dark:border-yellow-400 rounded-full text-xl font-bold uppercase shadow-2xl transition-all duration-300 transform hover:scale-105 hover:rotate-2 group focus:outline-none focus:ring-4 focus:ring-yellow-500 focus:ring-opacity-70 animate-bounce-slow">
          <span class="material-icons-outlined text-3xl mr-3 group-hover:-rotate-12 transition-transform duration-300">&#xe0cd;</span>
          Get a Quote Today!
        </a>
      </div>
    </div>

  </div>

  <!-- Global Styles/Animations - Add to your main CSS or use a style tag for demo -->
  <style>
    @import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=VT323&display=swap');

    .font-mono {
        font-family: 'VT323', monospace;
    }

    h2, h3, button {
        font-family: 'Press Start 2P', cursive;
    }

    .text-glow {
        text-shadow: 0 0 5px currentColor, 0 0 10px currentColor, 0 0 15px currentColor;
    }

    .perspective {
      perspective: 1000px;
      /* height: 400px; /* Adjust as needed */
    }

    .preserve-3d {
      transform-style: preserve-3d;
    }

    .backface-hidden {
      backface-visibility: hidden;
    }

    .rotateY-180 {
      transform: rotateY(180deg);
    }

    @keyframes pulse-fast {
      0%, 100% { transform: scale(1); opacity: 1; }
      50% { transform: scale(1.03); opacity: 0.9; }
    }
    .animate-pulse-fast {
      animation: pulse-fast 2s infinite ease-in-out;
    }

    @keyframes spin-slow-reverse {
      from { transform: rotate(0deg); }
      to { transform: rotate(-360deg); }
    }

    @keyframes spin-slow {
      from { transform: rotate(0deg); }
      to { transform: rotate(360deg); }
    }

    .animate-spin-slow-reverse {
        animation: spin-slow-reverse 15s linear infinite;
    }

    .animate-spin-slow {
        animation: spin-slow 15s linear infinite;
    }

    @keyframes heartbeat {
      0% { transform: scale(1); }
      14% { transform: scale(1.15); }
      28% { transform: scale(1); }
      42% { transform: scale(1.15); }
      70% { transform: scale(1); }
    }
    .animate-heartbeat {
      animation: heartbeat 1.5s infinite;
    }

    @keyframes bounce-slow {
      0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
      40% { transform: translateY(-10px); }
      60% { transform: translateY(-5px); }
    }
    .animate-bounce-slow {
      animation: bounce-slow 4s infinite;
    }

  </style>
</section>

Luxury_Dating_Columns_Component

Un composant de mise en page simple et élégant à trois colonnes pour les plateformes de rencontres/sociales, doté d’une esthétique luxueuse avec une palette de couleurs noires, blanches et d’accentuation, une réactivité totale et une prise en charge du mode sombre.

Ouvrir Aperçu

                <section class="py-12 md:py-20 lg:py-28 bg-white dark:bg-gray-950 text-gray-900 dark:text-gray-50 font-serif overflow-hidden">
  <div class="container mx-auto px-4 sm:px-6 lg:px-8 max-w-7xl">
    <div class="text-center mb-12 md:mb-16 lg:mb-20">
      <h2 class="text-4xl sm:text-5xl lg:text-6xl font-bold tracking-tight mb-4 dark:text-gray-50">
        Find Your Perfect Match
      </h2>
      <p class="text-lg sm:text-xl lg:text-2xl text-gray-600 dark:text-gray-300 max-w-3xl mx-auto leading-relaxed">
        Discover meaningful connections in a refined and exclusive environment.
      </p>
    </div>

    <div class="grid grid-cols-1 md:grid-cols-3 gap-8 md:gap-12 lg:gap-16">

      <!-- Column 1: Discover -->
      <div class="flex flex-col items-center text-center p-6 rounded-lg transition-all duration-300 hover:shadow-xl dark:hover:shadow-gray-700/50 hover:scale-105">
        <div class="mb-6 w-32 h-32 rounded-full overflow-hidden border-4 border-rose-500 dark:border-rose-400 shadow-lg">
          <img src="https://picsum.photos/300/300?random=1" alt="Discover Profiles" class="w-full h-full object-cover">
        </div>
        <h3 class="text-2xl sm:text-3xl font-bold mb-3 dark:text-gray-50">
          Explore Profiles
        </h3>
        <p class="text-base sm:text-lg text-gray-700 dark:text-gray-300 leading-relaxed">
          Browse through a curated selection of sophisticated individuals looking for genuine connections.
        </p>
      </div>

      <!-- Column 2: Connect -->
      <div class="flex flex-col items-center text-center p-6 rounded-lg transition-all duration-300 hover:shadow-xl dark:hover:shadow-gray-700/50 hover:scale-105">
        <div class="mb-6 w-32 h-32 rounded-full overflow-hidden border-4 border-rose-500 dark:border-rose-400 shadow-lg">
          <img src="https://randomuser.me/api/portraits/women/68.jpg" alt="Connect Seamlessly" class="w-full h-full object-cover">
        </div>
        <h3 class="text-2xl sm:text-3xl font-bold mb-3 dark:text-gray-50">
          Connect Seamlessly
        </h3>
        <p class="text-base sm:text-lg text-gray-700 dark:text-gray-300 leading-relaxed">
          Initiate conversations with ease using our intuitive messaging system and elegant interface.
        </p>
      </div>

      <!-- Column 3: Thrive -->
      <div class="flex flex-col items-center text-center p-6 rounded-lg transition-all duration-300 hover:shadow-xl dark:hover:shadow-gray-700/50 hover:scale-105">
        <div class="mb-6 w-32 h-32 rounded-full overflow-hidden border-4 border-rose-500 dark:border-rose-400 shadow-lg">
          <img src="https://picsum.photos/300/300?random=2" alt="Build Relationships" class="w-full h-full object-cover">
        </div>
        <h3 class="text-2xl sm:text-3xl font-bold mb-3 dark:text-gray-50">
          Build Lasting Bonds
        </h3>
        <p class="text-base sm:text-lg text-gray-700 dark:text-gray-300 leading-relaxed">
          Foster meaningful relationships that enrich your life and lead to a brighter future.
        </p>
      </div>

    </div>
  </div>
</section>

Brutalism_Portfolio_Columns_Component

Un composant de portfolio multi-colonnes d’inspiration brutaliste avec des couleurs sourdes, avec une grande typographie, des bordures à contraste élevé et des mises en page asymétriques. Inclut la prise en charge du mode sombre et présente des projets avec des titres, des descriptions et des images.

Ouvrir Aperçu

                <section class="p-4 md:p-8 lg:p-12 min-h-screen bg-gray-100 dark:bg-gray-900 font-mono text-gray-900 dark:text-gray-100 transition-colors duration-300">
  <div class="max-w-7xl mx-auto border-4 border-gray-900 dark:border-gray-100 p-4 lg:p-8 space-y-8 lg:space-y-0 lg:grid lg:grid-cols-3 lg:gap-8">

    <!-- Left Column - Main Title & Intro -->
    <div class="lg:col-span-1 border-b-4 lg:border-b-0 lg:border-r-4 border-gray-900 dark:border-gray-100 pb-4 lg:pb-0 lg:pr-4">
      <h1 class="text-4xl sm:text-5xl lg:text-6xl uppercase leading-none mb-4 tracking-tighter text-gray-900 dark:text-gray-100">
        <span class="block">My</span>
        <span class="block text-red-700 dark:text-red-300">Work</span>
        <span class="block">Showcase</span>
      </h1>
      <p class="text-lg md:text-xl leading-snug tracking-tight max-w-sm mb-4">
        A raw collection of creations, defying norms and embracing the unexpected.
      </p>
      <div class="flex space-x-2">
        <button class="px-4 py-2 border-2 border-gray-900 dark:border-gray-100 bg-gray-900 text-gray-100 dark:bg-gray-100 dark:text-gray-900 uppercase text-sm font-bold hover:bg-gray-700 dark:hover:bg-gray-300 transition-colors duration-200">
          See All
        </button>
        <button class="px-4 py-2 border-2 text-gray-900 dark:text-gray-100 border-gray-900 dark:border-gray-100 uppercase text-sm font-bold hover:bg-gray-200 dark:hover:bg-gray-800 transition-colors duration-200">
          About Me
        </button>
      </div>
    </div>

    <!-- Right Columns - Projects -->
    <div class="lg:col-span-2 space-y-8">
      
      <!-- Project 1 -->
      <div class="grid grid-cols-1 md:grid-cols-2 gap-4 border-b-4 border-gray-900 dark:border-gray-100 pb-8">
        <div class="md:col-span-1">
          <img src="https://picsum.photos/seed/brutalim_proj1/600/400" alt="Project 1 Image" class="w-full h-auto object-cover border-4 border-gray-900 dark:border-gray-100 mb-4">
        </div>
        <div class="md:col-span-1 space-y-2">
          <h2 class="text-3xl lg:text-4xl uppercase leading-none tracking-tighter text-blue-700 dark:text-blue-300 mb-2">The Grid Disjunction</h2>
          <p class="text-base leading-snug">
            An experimental web interface exploring fragmented layouts and stark contrasts. Built with raw HTML and CSS. 
          </p>
          <ul class="flex flex-wrap text-sm gap-2 mt-4">
            <li class="px-2 py-1 border border-gray-900 dark:border-gray-100">UI/UX</li>
            <li class="px-2 py-1 border border-gray-900 dark:border-gray-100">Web Design</li>
            <li class="px-2 py-1 border border-gray-900 dark:border-gray-100">Brutalism</li>
          </ul>
          <a href="#" class="inline-block mt-4 text-gray-900 dark:text-gray-100 underline text-sm uppercase font-bold hover:text-red-700 dark:hover:text-red-300 transition-colors duration-200">View Project &rarr;</a>
        </div>
      </div>

      <!-- Project 2 -->
      <div class="grid grid-cols-1 md:grid-cols-2 gap-4 border-b-4 border-gray-900 dark:border-gray-100 pb-8">
        <div class="md:col-span-1 order-2 md:order-1 space-y-2">
          <h2 class="text-3xl lg:text-4xl uppercase leading-none tracking-tighter text-blue-700 dark:text-blue-300 mb-2">Echoes of Form</h2>
          <p class="text-base leading-snug">
            A series of digital art pieces focusing on deconstructed shapes and desaturated palettes.
          </p>
          <ul class="flex flex-wrap text-sm gap-2 mt-4">
            <li class="px-2 py-1 border border-gray-900 dark:border-gray-100">Generative Art</li>
            <li class="px-2 py-1 border border-gray-900 dark:border-gray-100">Digital Painting</li>
          </ul>
          <a href="#" class="inline-block mt-4 text-gray-900 dark:text-gray-100 underline text-sm uppercase font-bold hover:text-red-700 dark:hover:text-red-300 transition-colors duration-200">View Project &rarr;</a>
        </div>
        <div class="md:col-span-1 order-1 md:order-2">
          <img src="https://picsum.photos/seed/brutalim_proj2/600/400" alt="Project 2 Image" class="w-full h-auto object-cover border-4 border-gray-900 dark:border-gray-100 mb-4">
        </div>
      </div>

      <!-- Project 3 -->
      <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
        <div class="md:col-span-1">
          <img src="https://picsum.photos/seed/brutalim_proj3/600/400" alt="Project 3 Image" class="w-full h-auto object-cover border-4 border-gray-900 dark:border-gray-100 mb-4">
        </div>
        <div class="md:col-span-1 space-y-2">
          <h2 class="text-3xl lg:text-4xl uppercase leading-none tracking-tighter text-blue-700 dark:text-blue-300 mb-2">Concrete Dreams</h2>
          <p class="text-base leading-snug">
            Architectural visualizations with harsh lighting and exposed structures.
          </p>
          <ul class="flex flex-wrap text-sm gap-2 mt-4">
            <li class="px-2 py-1 border border-gray-900 dark:border-gray-100">3D Modeling</li>
            <li class="px-2 py-1 border border-gray-900 dark:border-gray-100">Rendering</li>
            <li class="px-2 py-1 border border-gray-900 dark:border-gray-100">Architecture</li>
          </ul>
          <a href="#" class="inline-block mt-4 text-gray-900 dark:text-gray-100 underline text-sm uppercase font-bold hover:text-red-700 dark:hover:text-red-300 transition-colors duration-200">View Project &rarr;</a>
        </div>
      </div>

    </div>

  </div>
</section>

Composant de colonnes de fabrication d’entreprise/professionnel

Un composant de colonnes complexe et réactif conçu pour les entreprises manufacturières/industrielles avec une esthétique d’entreprise/professionnelle et une palette de couleurs automnale. Inclut la prise en charge du mode sombre et du HTML sémantique.

Ouvrir Aperçu

                <section class="py-12 bg-orange-50 dark:bg-gray-900 text-gray-800 dark:text-gray-100">
  <div class="container mx-auto px-4 sm:px-6 lg:px-8">
    <div class="text-center mb-12">
      <h2 class="text-3xl sm:text-4xl lg:text-5xl font-extrabold text-orange-800 dark:text-orange-300 mb-4 tracking-tight">
        Driving Industrial Innovation
      </h2>
      <p class="text-lg sm:text-xl text-brown-700 dark:text-gray-300 max-w-3xl mx-auto leading-relaxed">
        Leading the future of manufacturing with precision, efficiency, and unwavering commitment to quality.
      </p>
    </div>

    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 xl:gap-12">
      <!-- Column 1: Advanced Automation -->
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-xl hover:shadow-2xl transition-all duration-300 ease-in-out transform hover:-translate-y-1 p-6 relative group border-t-4 border-orange-600 dark:border-orange-500">
        <div class="absolute top-0 left-1/2 -translate-x-1/2 -mt-6 p-4 bg-orange-600 dark:bg-orange-500 rounded-full shadow-lg">
          <svg class="h-8 w-8 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.75 17L9 20l-1.5-1.5M15 17l.75 3L17 18.5M2.25 10.5l1.5 5.25L5.75 10.5M9 6h6M19.5 10.5l-1.5 5.25L16.25 10.5M12 21a9 9 0 100-18 9 9 0 000 18z" />
          </svg>
        </div>
        <div class="pt-8">
          <h3 class="text-2xl font-bold text-orange-800 dark:text-orange-200 mb-3 group-hover:text-orange-600 dark:group-hover:text-orange-400 transition-colors duration-300">
            Advanced Automation
          </h3>
          <p class="text-brown-700 dark:text-gray-300 mb-5 leading-relaxed">
            Leveraging cutting-edge robotics and AI to optimize production workflows and reduce operational costs.
          </p>
          <img src="https://picsum.photos/400/250?random=1" alt="Industrial robots" class="rounded-md mb-5 shadow-md group-hover:shadow-lg transition-shadow duration-300 object-cover w-full h-40">
          <ul class="list-disc list-inside text-gray-700 dark:text-gray-300 mb-6 space-y-2">
            <li>Robotic Process Automation (RPA)</li>
            <li>Machine Learning for Predictive Maintenance</li>
            <li>Automated Quality Control Systems</li>
          </ul>
          <a href="#" class="inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-md text-white bg-orange-700 hover:bg-orange-800 dark:bg-orange-600 dark:hover:bg-orange-700 transition-colors duration-300 shadow-md">
            Learn More
            <svg class="ml-2 -mr-1 h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
              <path fill-rule="evenodd" d="M10.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L12.586 11H5a1 1 0 110-2h7.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd" />
            </svg>
          </a>
        </div>
      </div>

      <!-- Column 2: Sustainable Manufacturing -->
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-xl hover:shadow-2xl transition-all duration-300 ease-in-out transform hover:-translate-y-1 p-6 relative group border-t-4 border-burgundy-700 dark:border-burgundy-600">
        <div class="absolute top-0 left-1/2 -translate-x-1/2 -mt-6 p-4 bg-burgundy-700 dark:bg-burgundy-600 rounded-full shadow-lg">
          <svg class="h-8 w-8 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 13.5l4 4L19.5 6" />
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
          </svg>
        </div>
        <div class="pt-8">
          <h3 class="text-2xl font-bold text-burgundy-800 dark:text-burgundy-200 mb-3 group-hover:text-burgundy-600 dark:group-hover:text-burgundy-400 transition-colors duration-300">
            Sustainable Manufacturing
          </h3>
          <p class="text-brown-700 dark:text-gray-300 mb-5 leading-relaxed">
            Pioneering eco-friendly production methods to minimize environmental impact and foster a greener future.
          </p>
          <img src="https://picsum.photos/400/250?random=2" alt="Eco-friendly factory" class="rounded-md mb-5 shadow-md group-hover:shadow-lg transition-shadow duration-300 object-cover w-full h-40">
          <ul class="list-disc list-inside text-gray-700 dark:text-gray-300 mb-6 space-y-2">
            <li>Renewable Energy Integration</li>
            <li>Waste Reduction & Recycling Programs</li>
            <li>Carbon Footprint Optimization</li>
          </ul>
          <a href="#" class="inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-md text-white bg-burgundy-700 hover:bg-burgundy-800 dark:bg-burgundy-600 dark:hover:bg-burgundy-700 transition-colors duration-300 shadow-md">
            Explore Initiatives
            <svg class="ml-2 -mr-1 h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
              <path fill-rule="evenodd" d="M10.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L12.586 11H5a1 1 0 110-2h7.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd" />
            </svg>
          </a>
        </div>
      </div>

      <!-- Column 3: Global Supply Chain Excellence -->
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-xl hover:shadow-2xl transition-all duration-300 ease-in-out transform hover:-translate-y-1 p-6 relative group border-t-4 border-brown-700 dark:border-brown-600">
        <div class="absolute top-0 left-1/2 -translate-x-1/2 -mt-6 p-4 bg-brown-700 dark:bg-brown-600 rounded-full shadow-lg">
          <svg class="h-8 w-8 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
          </svg>
        </div>
        <div class="pt-8">
          <h3 class="text-2xl font-bold text-brown-800 dark:text-brown-200 mb-3 group-hover:text-brown-600 dark:group-hover:text-brown-400 transition-colors duration-300">
            Global Supply Chain Excellence
          </h3>
          <p class="text-brown-700 dark:text-gray-300 mb-5 leading-relaxed">
            Building resilient and efficient supply networks to ensure timely delivery and consistent product availability.
          </p>
          <img src="https://picsum.photos/400/250?random=3" alt="Global logistics network" class="rounded-md mb-5 shadow-md group-hover:shadow-lg transition-shadow duration-300 object-cover w-full h-40">
          <ul class="list-disc list-inside text-gray-700 dark:text-gray-300 mb-6 space-y-2">
            <li>Real-time Logistics Tracking</li>
            <li>Supplier Relationship Management</li>
            <li>Risk Mitigation Strategies</li>
          </ul>
          <a href="#" class="inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-md text-white bg-brown-700 hover:bg-brown-800 dark:bg-brown-600 dark:hover:bg-brown-700 transition-colors duration-300 shadow-md">
            Discover Our Reach
            <svg class="ml-2 -mr-1 h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
              <path fill-rule="evenodd" d="M10.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L12.586 11H5a1 1 0 110-2h7.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd" />
            </svg>
          </a>
        </div>
      </div>
    </div>

    <div class="text-center mt-12">
      <a href="#" class="inline-flex items-center justify-center px-8 py-4 border border-transparent text-base font-medium rounded-md text-white bg-burgundy-800 hover:bg-burgundy-900 dark:bg-burgundy-700 dark:hover:bg-burgundy-800 transition-colors duration-300 shadow-lg sm:text-xl">
        Contact Our Experts
        <svg class="ml-3 -mr-1 h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8H8a2 2 0 00-2 2v6a2 2 0 002 2h9a2 2 0 002-2v-6a2 2 0 00-2-2zM9 11a1 1 0 100 2h6a1 1 0 100-2H9z" />
        </svg>
      </a>
    </div>
  </div>
</section>

<style>
  /* Custom colors for autumn palette */
  .text-brown-700 { color: #8B4513; } /* SaddleBrown */
  .dark\:text-brown-200 { color: #D2B48C; } /* Tan light for dark mode */
  .dark\:text-brown-400 { color: #A0522D; } /* Sienna light for dark mode hover */
  .bg-brown-700 { background-color: #A0522D; } /* Sienna */
  .hover\:bg-brown-800:hover { background-color: #8B4513; } /* SaddleBrown for hover */
  .dark\:bg-brown-600 { background-color: #D2B48C; } /* Tan */
  .dark\:hover\:bg-brown-700:hover { background-color: #A0522D; } /* Sienna for dark hover */

  .text-burgundy-700 { color: #800020; } /* Burgundy */
  .text-burgundy-800 { color: #6A0527; } /* slightly darker burgundy */
  .dark\:text-burgundy-200 { color: #EDC1C1; } /* light pink for dark mode */
  .dark\:text-burgundy-400 { color: #EC2E5F; } /* medium pink for dark hover */
  .bg-burgundy-700 { background-color: #800020; } /* Burgundy */
  .hover\:bg-burgundy-800:hover { background-color: #6A0527; } /* slightly darker burgundy for hover */
  .dark\:bg-burgundy-600 { background-color: #C04000; } /* Burnt Orange */
  .dark\:hover\:bg-burgundy-700:hover { background-color: #800020; } /* Burgundy for dark hover */

  .text-orange-800 { color: #CC5500; } /* Dark Orange */
  .dark\:text-orange-200 { color: #FFDAB9; } /* PeachPuff for dark */
  .dark\:text-orange-300 { color: #FFC0CB; } /* LightPink for dark heading */
  .dark\:text-orange-400 { color: #FFB347; } /* Light Orange for dark hover */
  .bg-orange-700 { background-color: #FF8c00; } /* DarkOrange */
  .hover\:bg-orange-800:hover { background-color: #CC5500; } /* Darker Orange for hover */
  .dark\:bg-orange-600 { background-color: #FFA07A; } /* LightSalmon light for dark */
  .dark\:hover\:bg-orange-700:hover { background-color: #FF8c00; } /* DarkOrange light for dark hover */

  .border-orange-600 { border-color: #FF8c00; }
  .dark\:border-orange-500 { border-color: #FFA07A; }
  .border-burgundy-700 { border-color: #800020; }
  .dark\:border-burgundy-600 { border-color: #C04000; }
  .border-brown-700 { border-color: #A0522D; }
  .dark\:border-brown-600 { border-color: #D2B48C; }
<\/style>

Composant Colonnes

Il s’agit d’un composant de colonne simple et réactif pour le commerce électronique, avec des influences de Material Design, des couleurs en niveaux de gris et une prise en charge du mode sombre.

Ouvrir Aperçu

                 কাপড়<div class="container mx-auto p-4 bg-white dark:bg-gray-800 text-gray-900 dark:text-white shadow-md rounded-lg"> <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4"> <div class="p-4 bg-gray-100 dark:bg-gray-700 rounded-lg shadow-sm"> <img class="w-full h-48 object-cover mb-4 rounded-md" src="https://picsum.photos/seed/picsum1/400/300" alt="Product Image 1"> <h3 class="text-lg font-semibold mb-2">Product Title 1</h3> <p class="text-gray-600 dark:text-gray-300 mb-4">Short description of product 1. This is a very appealing product.</p> <span class="block text-xl font-bold text-gray-800 dark:text-gray-100 mb-4">$19.99</span> <button class="w-full bg-gray-800 dark:bg-gray-500 text-white py-2 px-4 rounded-md hover:bg-gray-900 dark:hover:bg-gray-600 transition duration-300">Add to Cart</button> </div> <div class="p-4 bg-gray-100 dark:bg-gray-700 rounded-lg shadow-sm"> <img class="w-full h-48 object-cover mb-4 rounded-md" src="https://picsum.photos/seed/picsum2/400/300" alt="Product Image 2"> <h3 class="text-lg font-semibold mb-2">Product Title 2</h3> <p class="text-gray-600 dark:text-gray-300 mb-4">Short description of product 2. Another great item for your needs.</p> <span class="block text-xl font-bold text-gray-800 dark:text-gray-100 mb-4">$29.99</span> <button class="w-full bg-gray-800 dark:bg-gray-500 text-white py-2 px-4 rounded-md hover:bg-gray-900 dark:hover:bg-gray-600 transition duration-300">Add to Cart</button> </div> <div class="p-4 bg-gray-100 dark:bg-gray-700 rounded-lg shadow-sm"> <img class="w-full h-48 object-cover mb-4 rounded-md" src="https://picsum.photos/seed/picsum3/400/300" alt="Product Image 3"> <h3 class="text-lg font-semibold mb-2">Product Title 3</h3> <p class="text-gray-600 dark:text-gray-300 mb-4">Short description of product 3. You definitely want this one!</p> <span class="block text-xl font-bold text-gray-800 dark:text-gray-100 mb-4">$39.99</span> <button class="w-full bg-gray-800 dark:bg-gray-500 text-white py-2 px-4 rounded-md hover:bg-gray-900 dark:hover:bg-gray-600 transition duration-300">Add to Cart</button> </div> </div></div>

Composant Colonnes

Une mise en page simple à trois colonnes pour un tableau de bord, avec des cartes de type 3D avec des couleurs vives et la prise en charge du mode sombre.

Ouvrir Aperçu

                
<div class="min-h-screen bg-gray-100 dark:bg-gray-900 p-8 flex items-center justify-center">
  <div class="container mx-auto grid grid-cols-1 md:grid-cols-3 gap-8">

    <!-- Column 1 -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6 transform transition-all duration-300 hover:scale-105
                border-b-4 border-l-2 border-r-4 border-t-2 border-purple-500 dark:border-purple-700
                hover:border-purple-600 dark:hover:border-purple-800
                relative overflow-hidden">
      <div class="absolute inset-0 bg-gradient-to-br from-purple-400/30 via-pink-500/30 to-red-500/30 opacity-20 dark:opacity-10 pointer-events-none"></div>
      <h2 class="text-2xl font-bold text-purple-700 dark:text-purple-400 mb-4 tracking-wide relative z-10">Sales Overview</h2>
      <p class="text-gray-700 dark:text-gray-300 relative z-10">Total sales increased by <span class="font-semibold text-green-500">+15%</span> this quarter. Dive into the details.</p>
      <div class="mt-6 p-4 rounded-md bg-purple-50 dark:bg-gray-700/50 relative z-10">
        <p class="text-sm text-purple-600 dark:text-purple-300">Revenue: <span class="font-bold">$1.2M</span></p>
        <p class="text-sm text-purple-600 dark:text-purple-300">Units Sold: <span class="font-bold">8,500</span></p>
      </div>
    </div>

    <!-- Column 2 -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6 transform transition-all duration-300 hover:scale-105
                border-b-4 border-l-2 border-r-4 border-t-2 border-indigo-500 dark:border-indigo-700
                hover:border-indigo-600 dark:hover:border-indigo-800
                relative overflow-hidden">
      <div class="absolute inset-0 bg-gradient-to-br from-indigo-400/30 via-blue-500/30 to-cyan-500/30 opacity-20 dark:opacity-10 pointer-events-none"></div>
      <h2 class="text-2xl font-bold text-indigo-700 dark:text-indigo-400 mb-4 tracking-wide relative z-10">User Engagement</h2>
      <p class="text-gray-700 dark:text-gray-300 relative z-10">New users are up <span class="font-semibold text-blue-500">+8%</span>. See active user statistics.</p>
      <div class="mt-6 p-4 rounded-md bg-indigo-50 dark:bg-gray-700/50 relative z-10">
        <p class="text-sm text-indigo-600 dark:text-indigo-300">Active Users: <span class="font-bold">25,000</span></p>
        <p class="text-sm text-indigo-600 dark:text-indigo-300">Bounce Rate: <span class="font-bold">35%</span></p>
      </div>
    </div>

    <!-- Column 3 -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6 transform transition-all duration-300 hover:scale-105
                border-b-4 border-l-2 border-r-4 border-t-2 border-green-500 dark:border-green-700
                hover:border-green-600 dark:hover:border-green-800
                relative overflow-hidden">
      <div class="absolute inset-0 bg-gradient-to-br from-green-400/30 via-lime-500/30 to-yellow-500/30 opacity-20 dark:opacity-10 pointer-events-none"></div>
      <h2 class="text-2xl font-bold text-green-700 dark:text-green-400 mb-4 tracking-wide relative z-10">Revenue Projections</h2>
      <p class="text-gray-700 dark:text-gray-300 relative z-10">Projected growth of <span class="font-semibold text-orange-500">+12%</span> for the next quarter.</p>
      <div class="mt-6 p-4 rounded-md bg-green-50 dark:bg-gray-700/50 relative z-10">
        <p class="text-sm text-green-600 dark:text-green-300">Q3 Target: <span class="font-bold">$1.5M</span></p>
        <p class="text-sm text-green-600 dark:text-green-300">Confidence: <span class="font-bold">High</span></p>
      </div>
    </div>

  </div>
</div>

Composant Colonnes

Un composant de colonne simple et réactif avec un thème monochrome sombre, adapté à la présentation de portfolios.

Ouvrir Aperçu

                <div class="dark:bg-gray-900 dark:text-gray-200 min-h-screen p-8">
  <div class="container mx-auto grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
    <div class="bg-gray-800 rounded-lg shadow-lg p-6">
      <img class="w-full h-48 object-cover rounded-md mb-4" src="https://picsum.photos/seed/picsum1/400/300" alt="Project 1">
      <h3 class="text-xl font-semibold mb-2">Project One</h3>
      <p class="text-gray-400 text-sm">A brief description of project one, highlighting its key features and technologies used.</p>
    </div>
    <div class="bg-gray-800 rounded-lg shadow-lg p-6">
      <img class="w-full h-48 object-cover rounded-md mb-4" src="https://picsum.photos/seed/picsum2/400/300" alt="Project 2">
      <h3 class="text-xl font-semibold mb-2">Project Two</h3>
      <p class="text-gray-400 text-sm">Another project description, focusing on the impact and results of the work.</p>
    </div>
    <div class="bg-gray-800 rounded-lg shadow-lg p-6">
      <img class="w-full h-48 object-cover rounded-md mb-4" src="https://picsum.photos/seed/picsum3/400/300" alt="Project 3">
      <h3 class="text-xl font-semibold mb-2">Project Three</h3>
      <p class="text-gray-400 text-sm">Description for the third project, detailing the creative process and solutions.</p>
    </div>
  </div>
</div>