搜索组件

类别

组件列

列

多列内容布局

3D_Vibrant_Columns_Component

一个复杂、充满活力且响应式 3D 风格的列组件，适用于文档和 Wiki 站点，具有深色模式支持、微妙的动画和语义 HTML。

                <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

一个俏皮而多彩的文档/wiki 列组件，具有日落/暖色调、圆润元素和深色模式支持。专为跨所有设备的响应能力而设计。

打开预览

                <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

用于工作板和职业发展平台的豪华/高级单色色谱柱组件。它具有精致的设计、优雅的排版、丰富的界面元素、完全响应能力和深色模式支持。

打开预览

                <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

一个复杂、充满活力、复古/复古风格的柱组件，适用于制造/工业公司，具有 80 年代/90 年代的美学，支持深色模式和完全响应能力。

打开预览

                <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

一个简单、优雅的三列布局组件，适用于约会/社交平台，具有黑色、白色和强调色调色板的奢华美感、完全响应能力和深色模式支持。

打开预览

                <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

一个受野兽派启发的多列投资组合组件，具有柔和的色彩，具有大版式、高对比度边框和不对称布局。包括深色模式支持，并展示带有标题、描述和图像的项目。

打开预览

                <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>

Corporate/Professional Manufacturing Columns 组件

一个复杂的响应式立柱组件，专为具有企业/专业美学和秋季配色方案的制造/工业公司而设计。包括深色模式支持和语义 HTML。

打开预览

                <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>

列组件

一个用于电子商务的简单响应式列组件，具有 Material Design 影响、灰度颜色和深色模式支持。

打开预览

                 কাপড়<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>

列组件

仪表板的简单三列布局，具有类似 3D 的卡片，具有鲜艳的色彩和深色模式支持。

打开预览

                
<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>

列组件

一个简单的响应式列组件，具有深色单色主题，适合展示投资组合。

打开预览

                <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>