Search Components

All Components

Browse all available Tailwind CSS components

Watercolor_Artistic_Dashboard_Grid_Layout

A responsive dashboard grid layout component with a watercolor/artistic aesthetic, using a monochromatic color scheme. Features include cards with soft backgrounds, subtle shadows, and dark mode support for data visualization and control panels.

Open Preview

                <div class="min-h-screen bg-gradient-to-br from-purple-100 via-pink-100 to-indigo-100 dark:from-gray-900 dark:via-purple-950 dark:to-indigo-950 p-4 sm:p-6 font-sans">
  <div class="max-w-7xl mx-auto">
    <h1 class="text-4xl sm:text-5xl font-extrabold text-purple-800 dark:text-purple-300 mb-8 sm:mb-12 text-center drop-shadow-lg leading-tight">
      <span class="block">Artistic Dashboard</span>
      <span class="block text-2xl sm:text-3xl font-light text-purple-600 dark:text-purple-400 mt-2">Creative Insights</span>
    </h1>

    <div class="grid gap-6 sm:gap-8 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">

      <!-- Card 1: Sales Overview -->
      <div class="col-span-full md:col-span-2 lg:col-span-2 xl:col-span-2 relative bg-purple-50/70 dark:bg-purple-900/70 backdrop-blur-sm rounded-3xl p-6 sm:p-8 overflow-hidden shadow-xl dark:shadow-purple-700/20 group transform transition-all duration-300 hover:scale-[1.02] hover:shadow-2xl dark:hover:shadow-purple-700/40 border border-purple-100 dark:border-purple-800">
        <div class="absolute inset-0 bg-gradient-to-br from-fuchsia-200/50 via-purple-300/50 to-indigo-200/50 dark:from-fuchsia-950/20 dark:via-purple-950/20 dark:to-indigo-950/20 opacity-80 z-0 rounded-3xl -m-1 animate-pulse-background"></div>
        <div class="relative z-10 flex flex-col h-full">
          <h2 class="text-2xl sm:text-3xl font-bold text-purple-800 dark:text-purple-300 mb-4">Global Sales Performance</h2>
          <p class="text-purple-600 dark:text-purple-400 mb-6 text-lg">Interactive sales data across all regions.</p>
          <div class="flex-grow min-h-[150px] sm:min-h-[200px] bg-purple-100/50 dark:bg-purple-800/50 rounded-xl flex items-center justify-center text-purple-500 dark:text-purple-400 text-sm italic overflow-hidden shadow-inner">
            <img src="https://picsum.photos/600/300?random=1" alt="Sales Chart" class="w-full h-full object-cover grayscale opacity-70 group-hover:grayscale-0 group-hover:opacity-100 transition-all duration-500 rounded-xl">
          </div>
          <div class="mt-6 flex justify-between items-center">
            <span class="text-4xl font-extrabold text-purple-900 dark:text-purple-200">$1.2M</span>
            <span class="text-green-600 dark:text-green-400 font-semibold text-lg flex items-center">
              <svg class="w-6 h-6 mr-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M5.293 9.707a1 1 0 010-1.414L10.586 3.707a1 1 0 011.414 0l5.293 5.293a1 1 0 01-1.414 1.414L11 6.414V16a1 1 0 11-2 0V6.414L5.707 9.707a1 1 0 01-1.414 0z" clip-rule="evenodd"></path></svg>
              +12% <span class="hidden sm:inline-block ml-1">this month</span>
            </span>
          </div>
        </div>
      </div>

      <!-- Card 2: User Engagement -->
      <div class="relative bg-purple-50/70 dark:bg-purple-900/70 backdrop-blur-sm rounded-3xl p-6 sm:p-8 overflow-hidden shadow-xl dark:shadow-purple-700/20 group transform transition-all duration-300 hover:scale-[1.02] hover:shadow-2xl dark:hover:shadow-purple-700/40 border border-purple-100 dark:border-purple-800">
        <div class="absolute inset-0 bg-gradient-to-br from-indigo-200/50 via-pink-200/50 to-fuchsia-200/50 dark:from-indigo-950/20 dark:via-pink-950/20 dark:to-fuchsia-950/20 opacity-80 z-0 rounded-3xl -m-1 animate-pulse-background delay-75"></div>
        <div class="relative z-10 flex flex-col h-full">
          <h2 class="text-2xl font-bold text-purple-800 dark:text-purple-300 mb-4">User Engagement</h2>
          <p class="text-purple-600 dark:text-purple-400 mb-6">Metrics for active users and session times.</p>
          <div class="flex-grow min-h-[120px] bg-purple-100/50 dark:bg-purple-800/50 rounded-xl flex items-center justify-center text-purple-500 dark:text-purple-400 text-sm overflow-hidden shadow-inner">
            <img src="https://picsum.photos/300/200?random=2" alt="User Engagement Chart" class="w-full h-full object-cover grayscale opacity-70 group-hover:grayscale-0 group-hover:opacity-100 transition-all duration-500 rounded-xl">
          </div>
          <div class="mt-6 flex justify-between items-center">
            <span class="text-3xl font-extrabold text-purple-900 dark:text-purple-200">50K</span>
            <span class="text-orange-500 dark:text-orange-400 font-semibold text-md flex items-center">
              <svg class="w-5 h-5 mr-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M14.707 10.293a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 111.414-1.414L9 12.586V5a1 1 0 012 0v7.586l2.293-2.293a1 1 0 011.414 0z" clip-rule="evenodd"></path></svg>
              -3% <span class="hidden sm:inline-block ml-1">last week</span>
            </span>
          </div>
        </div>
      </div>

      <!-- Card 3: Project Status -->
      <div class="relative bg-purple-50/70 dark:bg-purple-900/70 backdrop-blur-sm rounded-3xl p-6 sm:p-8 overflow-hidden shadow-xl dark:shadow-purple-700/20 group transform transition-all duration-300 hover:scale-[1.02] hover:shadow-2xl dark:hover:shadow-purple-700/40 border border-purple-100 dark:border-purple-800">
        <div class="absolute inset-0 bg-gradient-to-br from-pink-200/50 via-fuchsia-200/50 to-indigo-200/50 dark:from-pink-950/20 dark:via-fuchsia-950/20 dark:to-indigo-950/20 opacity-80 z-0 rounded-3xl -m-1 animate-pulse-background delay-150"></div>
        <div class="relative z-10 flex flex-col h-full">
          <h2 class="text-2xl font-bold text-purple-800 dark:text-purple-300 mb-4">Project Status</h2>
          <p class="text-purple-600 dark:text-purple-400 mb-6">Overview of current project milestones.</p>
          <ul class="flex-grow space-y-3">
            <li class="flex items-center text-purple-700 dark:text-purple-300 border border-purple-200/50 dark:border-purple-800/50 p-3 rounded-xl bg-purple-100/50 dark:bg-purple-800/50 shadow-inner group-hover:scale-[1.01] transition-transform duration-200">
              <span class="bg-green-400 dark:bg-green-600 w-3 h-3 rounded-full mr-3 border border-green-500 dark:border-green-700"></span>
              <span>Feature X Development <strong class="font-semibold ml-2 text-purple-900 dark:text-purple-100">80%</strong></span>
            </li>
            <li class="flex items-center text-purple-700 dark:text-purple-300 border border-purple-200/50 dark:border-purple-800/50 p-3 rounded-xl bg-purple-100/50 dark:bg-purple-800/50 shadow-inner group-hover:scale-[1.01] transition-transform duration-200">
              <span class="bg-yellow-400 dark:bg-yellow-600 w-3 h-3 rounded-full mr-3 border border-yellow-500 dark:border-yellow-700"></span>
              <span>Marketing Campaign Launch <strong class="font-semibold ml-2 text-purple-900 dark:text-purple-100">45%</strong></span>
            </li>
            <li class="flex items-center text-purple-700 dark:text-purple-300 border border-purple-200/50 dark:border-purple-800/50 p-3 rounded-xl bg-purple-100/50 dark:bg-purple-800/50 shadow-inner group-hover:scale-[1.01] transition-transform duration-200">
              <span class="bg-blue-400 dark:bg-blue-600 w-3 h-3 rounded-full mr-3 border border-blue-500 dark:border-blue-700"></span>
              <span>New User Onboarding Flow <strong class="font-semibold ml-2 text-purple-900 dark:text-purple-100">95%</strong></span>
            </li>
          </ul>
          <button class="mt-6 w-full py-3 px-4 bg-purple-500 dark:bg-purple-600 text-white font-semibold rounded-xl hover:bg-purple-600 dark:hover:bg-purple-700 transition-colors duration-300 shadow-md transform hover:-translate-y-0.5">
            View All Projects
          </button>
        </div>
      </div>

      <!-- Card 4: Recent Activities -->
      <div class="relative bg-purple-50/70 dark:bg-purple-900/70 backdrop-blur-sm rounded-3xl p-6 sm:p-8 overflow-hidden shadow-xl dark:shadow-purple-700/20 group transform transition-all duration-300 hover:scale-[1.02] hover:shadow-2xl dark:hover:shadow-purple-700/40 border border-purple-100 dark:border-purple-800">
        <div class="absolute inset-0 bg-gradient-to-br from-fuchsia-200/50 via-indigo-200/50 to-pink-200/50 dark:from-fuchsia-950/20 dark:via-indigo-950/20 dark:to-pink-950/20 opacity-80 z-0 rounded-3xl -m-1 animate-pulse-background delay-225"></div>
        <div class="relative z-10 flex flex-col h-full">
          <h2 class="text-2xl font-bold text-purple-800 dark:text-purple-300 mb-4">Recent Activities</h2>
          <p class="text-purple-600 dark:text-purple-400 mb-6">Latest updates and notifications.</p>
          <div class="flex-grow space-y-4">
            <div class="flex items-start">
              <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-4 border-2 border-purple-300 dark:border-purple-700 shadow-sm">
              <div>
                <p class="text-purple-800 dark:text-purple-200 font-semibold">John D. <span class="font-normal text-purple-600 dark:text-purple-400">completed task UI Revamp</span></p>
                <p class="text-sm text-purple-500 dark:text-purple-400">2 hours ago</p>
              </div>
            </div>
            <div class="flex items-start">
              <img src="https://randomuser.me/api/portraits/women/2.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-4 border-2 border-purple-300 dark:border-purple-700 shadow-sm">
              <div>
                <p class="text-purple-800 dark:text-purple-200 font-semibold">Jane S. <span class="font-normal text-purple-600 dark:text-purple-400">added 3 new reports</span></p>
                <p class="text-sm text-purple-500 dark:text-purple-400">5 hours ago</p>
              </div>
            </div>
            <div class="flex items-start">
              <img src="https://randomuser.me/api/portraits/men/3.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-4 border-2 border-purple-300 dark:border-purple-700 shadow-sm">
              <div>
                <p class="text-purple-800 dark:text-purple-200 font-semibold">Mike R. <span class="font-normal text-purple-600 dark:text-purple-400">commented on 'Analytics Bug'</span></p>
                <p class="text-sm text-purple-500 dark:text-purple-400">Yesterday</p>
              </div>
            </div>
          </div>
          <button class="mt-6 w-full py-3 px-4 bg-purple-200 dark:bg-purple-700 text-purple-800 dark:text-purple-200 font-semibold rounded-xl hover:bg-purple-300 dark:hover:bg-purple-800 transition-colors duration-300 shadow-md transform hover:-translate-y-0.5">
            View All Activities
          </button>
        </div>
      </div>

      <!-- Card 5: Performance Metrics (Small) -->
      <div class="relative bg-purple-50/70 dark:bg-purple-900/70 backdrop-blur-sm rounded-3xl p-6 sm:p-8 overflow-hidden shadow-xl dark:shadow-purple-700/20 group transform transition-all duration-300 hover:scale-[1.02] hover:shadow-2xl dark:hover:shadow-purple-700/40 border border-purple-100 dark:border-purple-800">
        <div class="absolute inset-0 bg-gradient-to-br from-indigo-200/50 via-pink-200/50 to-fuchsia-200/50 dark:from-indigo-950/20 dark:via-pink-950/20 dark:to-fuchsia-950/20 opacity-80 z-0 rounded-3xl -m-1 animate-pulse-background delay-300"></div>
        <div class="relative z-10 flex flex-col h-full">
          <h2 class="text-2xl font-bold text-purple-800 dark:text-purple-300 mb-4">Load Speed</h2>
          <p class="text-purple-600 dark:text-purple-400 mb-6">Current dashboard load time.</p>
          <div class="flex-grow flex items-center justify-center">
            <p class="text-6xl font-extrabold text-blue-500 dark:text-blue-400 drop-shadow-md">1.8s</p>
          </div>
          <p class="text-sm text-purple-500 dark:text-purple-400 text-center mt-auto">Compared to 2.1s last month</p>
        </div>
      </div>

      <!-- Card 6: Customer Feedback (Small) -->
      <div class="relative bg-purple-50/70 dark:bg-purple-900/70 backdrop-blur-sm rounded-3xl p-6 sm:p-8 overflow-hidden shadow-xl dark:shadow-purple-700/20 group transform transition-all duration-300 hover:scale-[1.02] hover:shadow-2xl dark:hover:shadow-purple-700/40 border border-purple-100 dark:border-purple-800">
        <div class="absolute inset-0 bg-gradient-to-br from-pink-200/50 via-fuchsia-200/50 to-indigo-200/50 dark:from-pink-950/20 dark:via-fuchsia-950/20 dark:to-indigo-950/20 opacity-80 z-0 rounded-3xl -m-1 animate-pulse-background delay-375"></div>
        <div class="relative z-10 flex flex-col h-full">
          <h2 class="text-2xl font-bold text-purple-800 dark:text-purple-300 mb-4">Feedback Score</h2>
          <p class="text-purple-600 dark:text-purple-400 mb-6">Average customer satisfaction.</p>
          <div class="flex-grow flex items-center justify-center">
            <p class="text-6xl font-extrabold text-yellow-500 dark:text-yellow-400 drop-shadow-md">4.7</p>
          </div>
          <p class="text-sm text-purple-500 dark:text-purple-400 text-center mt-auto">Out of 5 stars</p>
        </div>
      </div>

      <!-- Card 7: Resource Utilization (Large) -->
      <div class="col-span-full md:col-span-2 lg:col-span-2 xl:col-span-full relative bg-purple-50/70 dark:bg-purple-900/70 backdrop-blur-sm rounded-3xl p-6 sm:p-8 overflow-hidden shadow-xl dark:shadow-purple-700/20 group transform transition-all duration-300 hover:scale-[1.02] hover:shadow-2xl dark:hover:shadow-purple-700/40 border border-purple-100 dark:border-purple-800">
        <div class="absolute inset-0 bg-gradient-to-br from-purple-200/50 via-indigo-200/50 to-pink-200/50 dark:from-purple-950/20 dark:via-indigo-950/20 dark:to-pink-950/20 opacity-80 z-0 rounded-3xl -m-1 animate-pulse-background delay-450"></div>
        <div class="relative z-10 flex flex-col h-full">
          <h2 class="text-2xl sm:text-3xl font-bold text-purple-800 dark:text-purple-300 mb-4">Server Resource Utilization</h2>
          <p class="text-purple-600 dark:text-purple-400 mb-6 text-lg">Live monitoring of CPU, Memory, and Disk usage.</p>
          <div class="grid grid-cols-1 sm:grid-cols-3 gap-6 flex-grow">
            <div class="bg-purple-100/50 dark:bg-purple-800/50 rounded-xl p-4 shadow-inner">
              <h3 class="text-lg font-semibold text-purple-700 dark:text-purple-300 mb-2">CPU Usage</h3>
              <div class="w-full bg-purple-200 dark:bg-purple-700 rounded-full h-4 mb-2">
                <div class="bg-blue-400 dark:bg-blue-500 h-4 rounded-full" style="width: 65%;"></div>
              </div>
              <p class="text-purple-600 dark:text-purple-400 text-sm">65% Used</p>
            </div>
            <div class="bg-purple-100/50 dark:bg-purple-800/50 rounded-xl p-4 shadow-inner">
              <h3 class="text-lg font-semibold text-purple-700 dark:text-purple-300 mb-2">Memory Usage</h3>
              <div class="w-full bg-purple-200 dark:bg-purple-700 rounded-full h-4 mb-2">
                <div class="bg-green-400 dark:bg-green-500 h-4 rounded-full" style="width: 40%;"></div>
              </div>
              <p class="text-purple-600 dark:text-purple-400 text-sm">40% Used</p>
            </div>
            <div class="bg-purple-100/50 dark:bg-purple-800/50 rounded-xl p-4 shadow-inner">
              <h3 class="text-lg font-semibold text-purple-700 dark:text-purple-300 mb-2">Disk Usage</h3>
              <div class="w-full bg-purple-200 dark:bg-purple-700 rounded-full h-4 mb-2">
                <div class="bg-red-400 dark:bg-red-500 h-4 rounded-full" style="width: 88%;"></div>
              </div>
              <p class="text-purple-600 dark:text-purple-400 text-sm">88% Used</p>
            </div>
          </div>
          <button class="mt-8 py-3 px-6 bg-purple-500 dark:bg-purple-600 text-white font-semibold rounded-xl hover:bg-purple-600 dark:hover:bg-purple-700 transition-colors duration-300 shadow-md transform hover:-translate-y-0.5 self-center">
            Detailed Analytics
          </button>
        </div>
      </div>

    </div>
  </div>

  <style>
    @keyframes pulse-background {
      0% { opacity: 0.8; transform: scale(1); }
      50% { opacity: 0.9; transform: scale(1.01); }
      100% { opacity: 0.8; transform: scale(1); }
    }

    .animate-pulse-background {
      animation: pulse-background 8s ease-in-out infinite alternate;
    }

    .delay-75 { animation-delay: 0.75s; }
    .delay-150 { animation-delay: 1.5s; }
    .delay-225 { animation-delay: 2.25s; }
    .delay-300 { animation-delay: 3s; }
    .delay-375 { animation-delay: 3.75s; }
    .delay-450 { animation-delay: 4.5s; }
  </style>
</div>

Paper_Print_Inspired_Autumn_Modal_Component

A complex, responsive modal component inspired by paper and print materials, featuring autumn colors. Designed for educational platforms, it includes dark mode support and semantic HTML.

Open Preview

                <div class="fixed inset-0 z-50 overflow-y-auto bg-gray-500 bg-opacity-75 dark:bg-gray-900 dark:bg-opacity-75 flex items-center justify-center p-4 sm:p-6 lg:p-8">
  <div class="relative w-full max-w-3xl bg-amber-50 dark:bg-gray-800 rounded-lg shadow-2xl transform transition-all duration-300 scale-100 opacity-100 border border-amber-200 dark:border-gray-700 overflow-hidden print:shadow-none print:border-none print:transform-none print:flex-initial print:block">
    <!-- Paper textured background (can be achieved via CSS classes if needed, or just color) -->
    <div class="absolute inset-0 bg-[url('https://www.transparenttextures.com/patterns/paper-fibers.png')] opacity-10 dark:opacity-[0.03] pointer-events-none"></div>

    <!-- Header - mimics a book/journal cover -->
    <div class="relative p-6 sm:p-8 lg:p-10 bg-gradient-to-r from-red-800 to-amber-900 dark:from-red-900 dark:to-orange-950 text-white border-b-4 border-amber-950 dark:border-red-950 shadow-md flex items-center justify-between">
      <h2 class="text-2xl sm:text-3xl lg:text-4xl font-serif tracking-wide text-amber-100 dark:text-orange-200 drop-shadow-lg">Course Syllabus: Ancient Civilizations</h2>
      <button class="text-orange-100 hover:text-white dark:text-orange-200 dark:hover:text-white text-3xl font-bold p-2 transition-transform transform hover:rotate-3 focus:outline-none focus:ring-2 focus:ring-orange-300 dark:focus:ring-orange-500 rounded-full aria-label="Close modal">
        &times;
      </button>
    </div>

    <!-- Content - resembles printed pages -->
    <div class="relative p-6 sm:p-8 lg:p-10 text-gray-800 dark:text-gray-200 flex flex-col lg:flex-row gap-6 sm:gap-8 overflow-y-auto max-h-[70vh]">
      <div class="lg:w-2/3 space-y-6">
        <section class="mb-6 pb-4 border-b border-orange-200 dark:border-gray-700 print:border-b-0">
          <h3 class="text-xl sm:text-2xl font-serif text-red-800 dark:text-orange-400 mb-3">Course Overview</h3>
          <p class="text-base leading-relaxed font-sans text-gray-700 dark:text-gray-300 indent-8">This course offers a comprehensive exploration of major ancient civilizations, from Mesopotamia and Egypt to Greece and Rome. We will delve into their political structures, social hierarchies, cultural achievements, and lasting legacies, examining primary sources and archaeological evidence.</p>
        </section>

        <section class="mb-6 pb-4 border-b border-orange-200 dark:border-gray-700 print:border-b-0">
          <h3 class="text-xl sm:text-2xl font-serif text-red-800 dark:text-orange-400 mb-3">Learning Objectives</h3>
          <ul class="list-disc list-inside space-y-2 text-base font-sans text-gray-700 dark:text-gray-300">
            <li>Identify key characteristics of ancient civilizations.</li>
            <li>Analyze the impact of geography on historical development.</li>
            <li>Evaluate primary sources for historical interpretation.</li>
            <li>Discuss the contributions of ancient societies to modern culture.</li>
          </ul>
        </section>

        <section class="mb-6">
          <h3 class="text-xl sm:text-2xl font-serif text-red-800 dark:text-orange-400 mb-3">Instructor Information</h3>
          <div class="flex items-center space-x-4 mb-4 bg-orange-100 dark:bg-gray-700 p-3 rounded-lg shadow-inner">
            <img class="w-16 h-16 rounded-full border-2 border-orange-400 dark:border-orange-500 object-cover" src="https://randomuser.me/api/portraits/men/45.jpg" alt="Instructor Avatar">
            <div>
              <p class="font-semibold text-lg font-serif text-red-900 dark:text-gray-100">Prof. Alistair Finch</p>
              <p class="text-sm text-gray-600 dark:text-gray-400">Department of History</p>
              <p class="text-sm text-gray-600 dark:text-gray-400">[email protected]</p>
            </div>
          </div>
          <div class="flex justify-around flex-wrap gap-3">
            <button class="flex-1 min-w-[120px] px-4 py-2 bg-orange-700 hover:bg-orange-800 dark:bg-orange-800 dark:hover:bg-orange-900 text-white rounded-md font-sans text-sm tracking-wide shadow-md transition-all duration-200 transform hover:-translate-y-0.5 focus:outline-none focus:ring-2 focus:ring-orange-300 dark:focus:ring-orange-500">Message Instructor</button>
            <button class="flex-1 min-w-[120px] px-4 py-2 bg-red-700 hover:bg-red-800 dark:bg-red-800 dark:hover:bg-red-900 text-white rounded-md font-sans text-sm tracking-wide shadow-md transition-all duration-200 transform hover:-translate-y-0.5 focus:outline-none focus:ring-2 focus:ring-red-300 dark:focus:ring-red-500">Schedule Office Hours</button>
          </div>
        </section>
      </div>

      <aside class="lg:w-1/3 p-4 bg-orange-100 dark:bg-gray-700 rounded-lg shadow-inner border border-orange-200 dark:border-gray-600 space-y-4">
        <h3 class="text-xl font-serif text-red-800 dark:text-orange-400 mb-3">Resource Links</h3>
        <ul class="space-y-3">
          <li>
            <a href="#" class="block p-3 bg-white dark:bg-gray-800 rounded-md shadow-sm hover:shadow-md transition-shadow font-sans text-base text-gray-900 dark:text-gray-100 flex items-center space-x-3 group">
              <svg class="w-5 h-5 text-red-600 dark:text-orange-500 group-hover:text-red-700 dark:group-hover:text-orange-600" 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 1h-5a1 1 0 01-1-1v-1a1 1 0 011-1h4a1 1 0 001-1v-4a1 1 0 00-1-1h-4a1 1 0 01-1-1V5a1 1 0 011-1h5a1 1 0 011-1v1a1 1 0 001 1h4a1 1 0 011 1v4a1 1 0 01-1 1h-4a1 1 0 00-1 1z"></path></svg>
              <span class="block">Recommended Readings</span>
            </a>
          </li>
          <li>
            <a href="#" class="block p-3 bg-white dark:bg-gray-800 rounded-md shadow-sm hover:shadow-md transition-shadow font-sans text-base text-gray-900 dark:text-gray-100 flex items-center space-x-3 group">
              <svg class="w-5 h-5 text-red-600 dark:text-orange-500 group-hover:text-red-700 dark:group-hover:text-orange-600" 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="M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z"></path></svg>
              <span class="block">Lecture Slides</span>
            </a>
          </li>
          <li>
            <a href="#" class="block p-3 bg-white dark:bg-gray-800 rounded-md shadow-sm hover:shadow-md transition-shadow font-sans text-base text-gray-900 dark:text-gray-100 flex items-center space-x-3 group">
              <svg class="w-5 h-5 text-red-600 dark:text-orange-500 group-hover:text-red-700 dark:group-hover:text-orange-600" 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="M15 10l4.553-2.276A1 1 0 0121 8.618v6.764a1 1 0 01-1.447.894L15 14M5 18h8a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z"></path></svg>
              <span class="block">Video Archive</span>
            </a>
          </li>
          <li>
            <a href="#" class="block p-3 bg-white dark:bg-gray-800 rounded-md shadow-sm hover:shadow-md transition-shadow font-sans text-base text-gray-900 dark:text-gray-100 flex items-center space-x-3 group">
              <svg class="w-5 h-5 text-red-600 dark:text-orange-500 group-hover:text-red-700 dark:group-hover:text-orange-600" 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 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
              <span class="block">Discussion Forums</span>
            </a>
          </li>
        </ul>

        <div class="mt-6">
          <h3 class="text-xl font-serif text-red-800 dark:text-orange-400 mb-3">Upcoming Deadlines</h3>
          <ul class="space-y-3">
            <li class="flex items-center space-x-3 text-sm font-sans text-gray-700 dark:text-gray-300">
              <input type="checkbox" id="assignment1" class="form-checkbox text-red-600 dark:text-orange-500 ring-2 ring-red-300 dark:ring-orange-400 w-4 h-4 rounded-sm">
              <label for="assignment1" class="flex-1">Essay 1: Nile Civilizations <span class="font-medium text-red-700 dark:text-orange-600 ml-1">Oct 20</span></label>
            </li>
            <li class="flex items-center space-x-3 text-sm font-sans text-gray-700 dark:text-gray-300">
              <input type="checkbox" id="quiz1" class="form-checkbox text-red-600 dark:text-orange-500 ring-2 ring-red-300 dark:ring-orange-400 w-4 h-4 rounded-sm">
              <label for="quiz1" class="flex-1">Quiz 1: Mesopotamia <span class="font-medium text-red-700 dark:text-orange-600 ml-1">Oct 25</span></label>
            </li>
             <li class="flex items-center space-x-3 text-sm font-sans text-gray-700 dark:text-gray-300">
              <input type="checkbox" id="project1" class="form-checkbox text-red-600 dark:text-orange-500 ring-2 ring-red-300 dark:ring-orange-400 w-4 h-4 rounded-sm">
              <label for="project1" class="flex-1">Group Project: Greece <span class="font-medium text-red-700 dark:text-orange-600 ml-1">Nov 10</span></label>
            </li>
          </ul>
        </div>
      </aside>
    </div>

    <!-- Footer - like the bottom of a page -->
    <div class="relative p-4 sm:p-6 bg-amber-200 dark:bg-gray-900 border-t-2 border-amber-300 dark:border-gray-700 text-center text-gray-600 dark:text-gray-400 text-sm font-sans flex justify-between items-center">
      <p>&copy; 2023 Ancient Studies Dept.</p>
      <button class="px-5 py-2 bg-orange-700 hover:bg-orange-800 dark:bg-orange-800 dark:hover:bg-orange-900 text-white rounded-lg font-bold shadow-lg transition-transform transform hover:scale-105 focus:outline-none focus:ring-2 focus:ring-orange-300 dark:focus:ring-orange-500">
        Enroll Now
      </button>
    </div>
  </div>
</div>

LuxuryCheckoutForm

A luxury/premium style checkout form component with a multi-color gradient background, sophisticated typography, and refined elements. Designed for documentation/wiki sites, it's fully responsive and supports dark mode.

Open Preview

                <div class="p-4 sm:p-6 lg:p-8 min-h-screen flex items-center justify-center bg-gradient-to-br from-purple-400 via-pink-500 to-red-500 dark:from-gray-900 dark:via-gray-800 dark:to-black">
  <div class="w-full max-w-4xl bg-white/90 dark:bg-gray-800/90 backdrop-blur-md rounded-2xl shadow-xl p-6 sm:p-8 lg:p-10 border border-gray-200 dark:border-gray-700">
    <h2 class="text-3xl sm:text-4xl font-extrabold text-transparent bg-clip-text bg-gradient-to-r from-indigo-600 via-purple-600 to-pink-600 dark:from-indigo-400 dark:via-purple-400 dark:to-pink-400 mb-6 text-center tracking-tight">
      Secure Checkout
    </h2>
    <p class="text-center text-gray-700 dark:text-gray-300 mb-8 max-w-md mx-auto text-lg leading-relaxed">
      Complete your premium experience. Your information is safe with us.
    </p>

    <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
      <!-- Billing Information -->
      <div>
        <h3 class="text-2xl font-semibold text-gray-800 dark:text-gray-100 mb-5 border-b pb-3 border-gray-300 dark:border-gray-600">
          Billing Information
        </h3>
        <form class="space-y-6">
          <div>
            <label for="fullName" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Full Name</label>
            <input type="text" id="fullName" class="mt-1 block w-full px-4 py-3 border border-gray-300 rounded-lg shadow-sm focus:ring-purple-500 focus:border-purple-500 text-base bg-white dark:bg-gray-700 dark:border-gray-600 dark:text-gray-100 placeholder-gray-500 dark:placeholder-gray-400 transition duration-300 ease-in-out" placeholder="John Doe">
          </div>
          <div>
            <label for="email" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Email Address</label>
            <input type="email" id="email" class="mt-1 block w-full px-4 py-3 border border-gray-300 rounded-lg shadow-sm focus:ring-purple-500 focus:border-purple-500 text-base bg-white dark:bg-gray-700 dark:border-gray-600 dark:text-gray-100 placeholder-gray-500 dark:placeholder-gray-400 transition duration-300 ease-in-out" placeholder="[email protected]">
          </div>
          <div>
            <label for="address" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Address</label>
            <input type="text" id="address" class="mt-1 block w-full px-4 py-3 border border-gray-300 rounded-lg shadow-sm focus:ring-purple-500 focus:border-purple-500 text-base bg-white dark:bg-gray-700 dark:border-gray-600 dark:text-gray-100 placeholder-gray-500 dark:placeholder-gray-400 transition duration-300 ease-in-out" placeholder="123 Main St">
          </div>
          <div class="grid grid-cols-1 sm:grid-cols-3 gap-4">
            <div>
              <label for="city" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">City</label>
              <input type="text" id="city" class="mt-1 block w-full px-4 py-3 border border-gray-300 rounded-lg shadow-sm focus:ring-purple-500 focus:border-purple-500 text-base bg-white dark:bg-gray-700 dark:border-gray-600 dark:text-gray-100 placeholder-gray-500 dark:placeholder-gray-400 transition duration-300 ease-in-out" placeholder="New York">
            </div>
            <div>
              <label for="zip" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Zip Code</label>
              <input type="text" id="zip" class="mt-1 block w-full px-4 py-3 border border-gray-300 rounded-lg shadow-sm focus:ring-purple-500 focus:border-purple-500 text-base bg-white dark:bg-gray-700 dark:border-gray-600 dark:text-gray-100 placeholder-gray-500 dark:placeholder-gray-400 transition duration-300 ease-in-out" placeholder="10001">
            </div>
            <div>
              <label for="country" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Country</label>
              <select id="country" class="mt-1 block w-full px-4 py-3 border border-gray-300 rounded-lg shadow-sm focus:ring-purple-500 focus:border-purple-500 text-base bg-white dark:bg-gray-700 dark:border-gray-600 dark:text-gray-100 transition duration-300 ease-in-out">
                <option value="US">United States</option>
                <option value="CA">Canada</option>
                <option value="GB">United Kingdom</option>
                <option value="AU">Australia</option>
              </select>
            </div>
          </div>
        </form>
      </div>

      <!-- Payment Information -->
      <div>
        <h3 class="text-2xl font-semibold text-gray-800 dark:text-gray-100 mb-5 border-b pb-3 border-gray-300 dark:border-gray-600">
          Payment Information
        </h3>
        <form class="space-y-6">
          <div>
            <label for="cardName" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Name on Card</label>
            <input type="text" id="cardName" class="mt-1 block w-full px-4 py-3 border border-gray-300 rounded-lg shadow-sm focus:ring-purple-500 focus:border-purple-500 text-base bg-white dark:bg-gray-700 dark:border-gray-600 dark:text-gray-100 placeholder-gray-500 dark:placeholder-gray-400 transition duration-300 ease-in-out" placeholder="John Doe">
          </div>
          <div>
            <label for="cardNumber" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Card Number</label>
            <input type="text" id="cardNumber" class="mt-1 block w-full px-4 py-3 border border-gray-300 rounded-lg shadow-sm focus:ring-purple-500 focus:border-purple-500 text-base bg-white dark:bg-gray-700 dark:border-gray-600 dark:text-gray-100 placeholder-gray-500 dark:placeholder-gray-400 transition duration-300 ease-in-out" placeholder="&#9679;&#9679;&#9679;&#9679; &#9679;&#9679;&#9679;&#9679; &#9679;&#9679;&#9679;&#9679; 1234">
          </div>
          <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
            <div>
              <label for="expDate" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Expiration Date</label>
              <input type="text" id="expDate" class="mt-1 block w-full px-4 py-3 border border-gray-300 rounded-lg shadow-sm focus:ring-purple-500 focus:border-purple-500 text-base bg-white dark:bg-gray-700 dark:border-gray-600 dark:text-gray-100 placeholder-gray-500 dark:placeholder-gray-400 transition duration-300 ease-in-out" placeholder="MM/YY">
            </div>
            <div>
              <label for="cvv" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">CVV</label>
              <input type="text" id="cvv" class="mt-1 block w-full px-4 py-3 border border-gray-300 rounded-lg shadow-sm focus:ring-purple-500 focus:border-purple-500 text-base bg-white dark:bg-gray-700 dark:border-gray-600 dark:text-gray-100 placeholder-gray-500 dark:placeholder-gray-400 transition duration-300 ease-in-out" placeholder="123">
            </div>
          </div>

          <!-- Order Summary (basic version) -->
          <div class="mt-8 pt-6 border-t border-gray-300 dark:border-gray-600">
            <h4 class="text-xl font-semibold text-gray-800 dark:text-gray-100 mb-4">Order Summary</h4>
            <div class="flex justify-between text-gray-700 dark:text-gray-300 mb-2">
              <span>Product Name</span>
              <span>$99.00</span>
            </div>
            <div class="flex justify-between text-gray-700 dark:text-gray-300 mb-2">
              <span>Tax</span>
              <span>$5.00</span>
            </div>
            <div class="flex justify-between font-bold text-lg text-gray-900 dark:text-gray-50 border-t border-gray-300 dark:border-gray-600 pt-3 mt-3">
              <span>Total</span>
              <span class="text-transparent bg-clip-text bg-gradient-to-r from-green-500 to-blue-500 dark:from-green-400 dark:to-blue-400">$104.00</span>
            </div>
          </div>
        </form>
      </div>
    </div>

    <div class="mt-10 pt-6 border-t border-gray-300 dark:border-gray-600 flex justify-center">
      <button type="submit" class="w-full sm:w-auto px-8 py-4 bg-gradient-to-r from-indigo-500 via-purple-500 to-pink-500 text-white rounded-xl shadow-lg hover:shadow-xl transform hover:scale-105 transition duration-300 ease-in-out font-semibold text-lg animate-gradient-xy focus:outline-none focus:ring-4 focus:ring-purple-300 dark:focus:ring-purple-700">
        Place Order
      </button>
    </div>

    <!-- Placeholder for an image in a luxury theme -->
    <div class="mt-10 hidden sm:block">
      <img src="https://picsum.photos/800/200?grayscale&blur=2" alt="Elegant Payment Iconography" class="w-full rounded-xl opacity-80 shadow-md" loading="lazy">
    </div>

  </div>
</div>

<style>
  /* Custom keyframes for the gradient animation */
  @keyframes gradient-xy {
    0% {
      background-position: 0% 50%;
    }
    50% {
      background-position: 100% 50%;
    }
    100% {
      background-position: 0% 50%;
    }
  }

  .animate-gradient-xy {
    background-size: 400% 400%;
    animation: gradient-xy 6s ease infinite;
  }
</style>

Glassmorphism Audio Player Component

A simple, responsive glassmorphism-styled audio player component with a purple/violet color scheme, designed for manufacturing/industrial applications. Includes dark mode support.

Open Preview

                <div class="flex items-center justify-center min-h-screen bg-gradient-to-br from-purple-100 via-purple-300 to-violet-500 dark:from-gray-900 dark:via-purple-950 dark:to-violet-950 p-4 font-sans">
  <div class="relative w-full max-w-sm rounded-2xl p-6 shadow-xl overflow-hidden backdrop-blur-md bg-white/30 dark:bg-gray-800/30 border border-white/10 dark:border-white/5">
    <div class="absolute inset-0 -z-10">
      <div class="absolute top-0 left-0 w-24 h-24 bg-purple-400 rounded-full mix-blend-multiply filter blur-xl opacity-30 animate-blob dark:bg-purple-700"></div>
      <div class="absolute top-0 right-0 w-24 h-24 bg-violet-400 rounded-full mix-blend-multiply filter blur-xl opacity-30 animate-blob animation-delay-2000 dark:bg-violet-700"></div>
      <div class="absolute -bottom-8 left-20 w-24 h-24 bg-fuchsia-400 rounded-full mix-blend-multiply filter blur-xl opacity-30 animate-blob animation-delay-4000 dark:bg-fuchsia-700"></div>
    </div>

    <div class="flex items-center justify-start mb-4">
      <button class="p-2 focus:outline-none text-white/80 transition-transform duration-300 transform hover:scale-110">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
          <path stroke-linecap="round" stroke-linejoin="round" d="M15 19l-7-7 7-7" />
        </svg>
      </button>
      <h3 class="text-lg font-semibold text-white ml-2 drop-shadow-md">Now Playing</h3>
    </div>

    <div class="relative w-48 h-48 mx-auto mb-6 rounded-xl overflow-hidden shadow-lg border border-white/20 dark:border-white/5 transform transition-transform duration-300 hover:scale-105">
      <img src="https://picsum.photos/400/400?random=1" alt="Album Art" class="w-full h-full object-cover" />
      <div class="absolute inset-0 bg-gradient-to-t from-black/40 via-transparent to-transparent"></div>
    </div>

    <div class="text-center mb-6">
      <p class="text-2xl font-bold text-white mb-1 drop-shadow-md">Manufacturing Line 3</p>
      <p class="text-sm text-white/70 tracking-wide">Acoustic Waves for Productivity</p>
    </div>

    <div class="flex items-center mb-6">
      <span class="text-xs text-white/70 w-8 text-left">0:30</span>
      <div class="flex-1 h-1 bg-white/30 rounded-full mx-2 relative">
        <div class="absolute h-full w-1/3 bg-white rounded-full transition-all duration-300 ease-in-out" style="width: 33.33%;"></div>
        <div class="absolute right-2 top-1/2 -mt-1 w-3 h-3 bg-white rounded-full shadow-lg transform -translate-y-1/2"></div>
      </div>
      <span class="text-xs text-white/70 w-8 text-right">3:45</span>
    </div>

    <div class="flex items-center justify-around">
      <button aria-label="Previous Track" class="text-white/80 p-3 rounded-full hover:bg-white/20 transition-colors duration-200 focus:outline-none transform hover:scale-110">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-7 w-7" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
          <path stroke-linecap="round" stroke-linejoin="round" d="M11 19l-7-7 7-7m8 14V5" />
        </svg>
      </button>
      <button aria-label="Play/Pause" class="text-violet-500 bg-white p-4 rounded-full shadow-lg hover:shadow-xl transition-all duration-300 transform hover:scale-110 focus:outline-none group">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-10 w-10 group-hover:text-violet-600" viewBox="0 0 20 20" fill="currentColor">
          <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z" clip-rule="evenodd" />
        </svg>
      </button>
      <button aria-label="Next Track" class="text-white/80 p-3 rounded-full hover:bg-white/20 transition-colors duration-200 focus:outline-none transform hover:scale-110">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-7 w-7" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
          <path stroke-linecap="round" stroke-linejoin="round" d="M13 5l7 7-7 7M6 5v14" />
        </svg>
      </button>
    </div>
  </div>
</div>

<style>
  @keyframes blob {
    0% {
      transform: translate(0px, 0px) scale(1);
    }
    33% {
      transform: translate(30px, -50px) scale(1.1);
    }
    66% {
      transform: translate(-20px, 20px) scale(0.9);
    }
    100% {
      transform: translate(0px, 0px) scale(1);
    }
  }

  .animate-blob {
    animation: blob 7s infinite;
  }

  .animation-delay-2000 {
    animation-delay: 2s;
  }

  .animation-delay-4000 {
    animation-delay: 4s;
  }
</style>

Skeuomorphic_Monochromatic_Progress_Bar

A moderate complexity skeumorphic progress bar component for e-commerce, featuring a monochromatic color scheme, full responsivity, and dark mode support.

Open Preview

                <div class="p-4 sm:p-6 md:p-8 bg-gray-100 dark:bg-gray-900 min-h-screen flex items-center justify-center font-sans">

  <div class="w-full max-w-sm md:max-w-md lg:max-w-lg bg-gray-200 dark:bg-gray-800 rounded-xl p-6 shadow-2xl transition-colors duration-300 transform
              relative
              before:content-[''] before:absolute before:inset-0 before:rounded-xl before:bg-gradient-to-br before:from-gray-300 before:via-gray-200 before:to-gray-100 dark:before:from-gray-900 dark:before:via-gray-800 dark:before:to-gray-700 before:opacity-0 before:transition-opacity before:duration-300
              hover:before:opacity-100">

    <div class="relative z-10">
      <h2 class="text-xl sm:text-2xl font-bold text-gray-800 dark:text-gray-100 mb-4 text-center tracking-tight">
        Order Processing
      </h2>

      <div class="mb-8">
        <p class="text-sm text-gray-600 dark:text-gray-400 text-center mb-2">
          50% Completed - Your order is being prepared.
        </p>

        <div class="relative h-6 sm:h-8 rounded-full bg-gray-300 dark:bg-gray-700 shadow-inner overflow-hidden border border-gray-400 dark:border-gray-600
                    before:content-[''] before:absolute before:inset-0 before:rounded-full before:bg-gradient-to-br before:from-gray-400 before:to-gray-500 dark:before:from-gray-800 dark:before:to-gray-900 before:opacity-50">

          <div class="absolute top-0 left-0 h-full w-1/2 rounded-full bg-blue-600 transition-all duration-700 ease-out
                      shadow-lg
                      before:content-[''] before:absolute before:inset-0 before:rounded-full before:bg-gradient-to-t before:from-blue-700 before:to-blue-500 before:opacity-80
                      after:content-[''] after:absolute after:inset-y-0 after:right-0 after:w-1/4 after:bg-white after:opacity-20 after:blur-sm after:rounded-r-full">
            <div class="h-full flex items-center justify-end pr-2 text-xs sm:text-sm font-semibold text-white tracking-wider animate-pulse-text">
              50%
            </div>
          </div>
        </div>
      </div>

      <div class="grid grid-cols-3 gap-4">
        <!-- Step 1 -->
        <div class="flex flex-col items-center">
          <div class="w-10 h-10 sm:w-12 sm:h-12 rounded-full bg-blue-600 dark:bg-blue-700 flex items-center justify-center text-white text-lg sm:text-xl font-bold mb-2 shadow-md transition-all duration-300
                      relative
                      before:content-[''] before:absolute before:inset-0 before:rounded-full before:bg-gradient-to-br before:from-blue-700 before:to-blue-500 before:opacity-70
                      after:content-[''] after:absolute after:inset-0 after:rounded-full after:bg-white after:opacity-10 after:scale-90">
            ✓
          </div>
          <p class="text-xs sm:text-sm text-gray-700 dark:text-gray-300 text-center font-medium">Confirmed</p>
        </div>

        <!-- Step 2 -->
        <div class="flex flex-col items-center">
          <div class="w-10 h-10 sm:w-12 sm:h-12 rounded-full bg-blue-500 dark:bg-blue-600 flex items-center justify-center text-white text-lg sm:text-xl font-bold mb-2 shadow-inner transition-all duration-300
                      relative
                      before:content-[''] before:absolute before:inset-0 before:rounded-full before:bg-gradient-to-br before:from-blue-600 before:to-blue-400 before:opacity-70
                      after:content-[''] after:absolute after:inset-0 after:rounded-full after:bg-white after:opacity-10 after:scale-90">
            2
          </div>
          <p class="text-xs sm:text-sm text-gray-700 dark:text-gray-300 text-center font-medium">Processing</p>
        </div>

        <!-- Step 3 -->
        <div class="flex flex-col items-center">
          <div class="w-10 h-10 sm:w-12 sm:h-12 rounded-full bg-gray-400 dark:bg-gray-600 flex items-center justify-center
                      text-gray-600 dark:text-gray-400 text-lg sm:text-xl font-bold mb-2 shadow-inner transition-all duration-300
                      relative
                      before:content-[''] before:absolute before:inset-0 before:rounded-full before:bg-gradient-to-br before:from-gray-500 before:to-gray-300 dark:before:from-gray-700 dark:before:to-gray-500 before:opacity-70
                      after:content-[''] after:absolute after:inset-0 after:rounded-full after:bg-gray-200 dark:after:bg-gray-800 after:opacity-20 after:scale-90">
            3
          </div>
          <p class="text-xs sm:text-sm text-gray-500 dark:text-gray-400 text-center">Shipped</p>
        </div>
      </div>
    </div>

  </div>
</div>

<style>
  /* This is just for demonstration if you want a subtle animation effect. */
  /* Tailwind does not have built-in keyframe animation utilities for complex animations without custom config. */
  /* For a pure Tailwind solution, you'd define these in tailwind.config.js */
  @keyframes pulseText {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
  }
  .animate-pulse-text {
    animation: pulseText 2s ease-in-out infinite;
  }
</style>

Cyberpunk Sports Media Embed

A complex, responsive media embed component designed for sports/fitness applications with a cyberpunk aesthetic. Features monochromatic dark backgrounds with bright neon accents, multiple interactive elements, and full dark mode support.

Open Preview

                <div class="font-sans bg-gray-950 text-emerald-300 min-h-screen p-4 sm:p-8 dark:bg-gray-900 overflow-hidden">
  <div class="max-w-7xl mx-auto bg-gray-900 rounded-none shadow-neon-emerald border-t-2 border-l-2 border-emerald-500 overflow-hidden dark:bg-gray-800 dark:border-emerald-700 relative">
    <!-- Glitch effect pseudo-element -->
    <div class="absolute inset-0 z-0 pointer-events-none after:content-[''] after:absolute after:inset-0 after:bg-gradient-to-br after:from-emerald-900/50 after:to-transparent after:animate-flicker">
    </div>
    
    <!-- Header -->
    <div class="relative z-10 px-6 py-4 border-b border-emerald-700/50 flex items-center justify-between">
      <h2 class="text-2xl sm:text-3xl font-bold tracking-wider uppercase text-emerald-400 drop-shadow-md shadow-emerald-500/50">
        <span class="block transform -skew-x-12">Live Stream_</span>
        <span class="block text-xs sm:text-sm text-emerald-500 uppercase ml-2">// Cyber-Arena</span>
      </h2>
      <div class="flex space-x-2">
        <button class="px-3 py-1 bg-emerald-700 hover:bg-emerald-600 text-white text-xs font-semibold uppercase rounded-sm transition-colors duration-200 border border-emerald-500 shadow-sm shadow-emerald-500/30">RECORD</button>
        <button class="px-3 py-1 bg-gray-800 hover:bg-gray-700 text-emerald-300 text-xs font-semibold uppercase rounded-sm border border-emerald-700 shadow-sm shadow-emerald-700/30">VIEW ALL</button>
      </div>
    </div>

    <div class="relative z-10 grid grid-cols-1 lg:grid-cols-3 gap-0">
      <!-- Main Video Player Section -->
      <div class="lg:col-span-2 bg-black overflow-hidden relative group">
        <div class="aspect-video w-full bg-gray-900 flex items-center justify-center">
          <!-- Placeholder for video player -->
          <img src="https://picsum.photos/1280/720?random=1" alt="Live Sports Event" class="w-full h-full object-cover opacity-80 group-hover:scale-105 transition-transform duration-500 ease-in-out">
          <div class="absolute inset-0 flex items-center justify-center p-4">
            <div class="bg-emerald-800/60 backdrop-blur-sm p-4 rounded-lg border border-emerald-600 text-center text-white/90 shadow-lg shadow-emerald-500/40">
              <svg class="w-16 h-16 mx-auto mb-2 text-emerald-300 animate-pulse" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z" clip-rule="evenodd"></path></svg>
              <p class="text-sm sm:text-lg font-bold uppercase tracking-wide">STREAM PENDING: ARENA INITIALIZING...</p>
              <p class="text-xs text-emerald-200 mt-1">Estimated Start: 13:00 GMT+1</p>
            </div>
          </div>
        </div>
        <!-- Player Controls (simple placeholders) -->
        <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-gray-900 to-transparent p-4 flex items-center justify-between text-emerald-300 text-sm opacity-0 group-hover:opacity-100 transition-opacity duration-300">
          <div class="flex items-center space-x-2">
            <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z" clip-rule="evenodd"></path></svg>
            <span>00:15 / 23:45</span>
          </div>
          <div class="flex items-center space-x-2">
            <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M11 5H6a2 2 0 00-2 2v2a2 2 0 002 2h1v4a2 2 0 002 2h2a2 2 0 002-2v-4h1a2 2 0 002-2V7a2 2 0 00-2-2h-3zm-1 9v-3h-3V7h7v4h-3v3z"></path></svg>
            <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M10 12a2 2 0 100-4 2 2 0 000 4z"></path><path fill-rule="evenodd" d="M.458 10C1.732 5.552 6.858 2 12 2c5.142 0 10.268 3.552 11.542 8-.268.587-.542 1.25-.8 1.9-.3-.55-.6-1.127-.9-1.7zm13.197-2.316l-3.3 3.3a1 1 0 01-1.414 0l-3.3-3.3a1 1 0 011.414-1.414L10 8.586l2.096-2.096a1 1 0 011.414 1.414z" clip-rule="evenodd"></path></svg>
          </div>
        </div>
      </div>

      <!-- Information / Chat Sidebar -->
      <div class="lg:col-span-1 border-t-2 border-emerald-700/50 lg:border-t-0 lg:border-l-2 bg-gray-900 flex flex-col dark:bg-gray-800">
        <!-- Tabs for Info / Chat -->
        <div class="flex text-sm sm:text-base border-b-2 border-emerald-700/50">
          <button class="flex-1 py-3 px-2 text-center uppercase tracking-wide font-bold text-emerald-300 border-r border-emerald-700/50 hover:bg-emerald-900/40 dark:hover:bg-emerald-700/40 transition-colors duration-200 active-tab">
            OVERVIEW
          </button>
          <button class="flex-1 py-3 px-2 text-center uppercase tracking-wide font-bold text-emerald-500 hover:bg-emerald-900/40 dark:hover:bg-emerald-700/40 transition-colors duration-200">
            LIVE CHAT
          </button>
        </div>

        <!-- Content Area -->
        <div class="flex-1 p-4 sm:p-6 overflow-y-auto space-y-4 max-h-[400px] lg:max-h-[unset]">
          <!-- Overview Content -->
          <div class="space-y-4">
            <div>
              <h3 class="text-xl font-bold text-emerald-400 mb-2 uppercase border-b border-emerald-700/50 pb-1">Event Details_</h3>
              <p class="text-emerald-200 text-sm leading-relaxed tracking-tight">
                Witness the ultimate showdown: 'Gravity Gauntlet' Season Finals. Teams 'Neon Raptors' and 'Circuit Breakers' clash in a zero-G tactical combat for championship supremacy. 
                Expected duration: 2 hours. High-tension action guaranteed.
              </p>
            </div>

            <div>
              <h3 class="text-xl font-bold text-emerald-400 mb-2 uppercase border-b border-emerald-700/50 pb-1">Key Players_</h3>
              <div class="space-y-3">
                <div class="flex items-center space-x-3 bg-gray-800 p-2 rounded-sm border border-emerald-800/50 shadow-inner shadow-emerald-900/20">
                  <img class="w-10 h-10 rounded-full border-2 border-emerald-500" src="https://randomuser.me/api/portraits/men/75.jpg" alt="Player Avatar">
                  <div>
                    <p class="font-semibold text-emerald-300">SYNTAX_ERROR</p>
                    <p class="text-emerald-400 text-xs">Neon Raptors - Striker</p>
                  </div>
                </div>
                <div class="flex items-center space-x-3 bg-gray-800 p-2 rounded-sm border border-emerald-800/50 shadow-inner shadow-emerald-900/20">
                  <img class="w-10 h-10 rounded-full border-2 border-emerald-500" src="https://randomuser.me/api/portraits/women/67.jpg" alt="Player Avatar">
                  <div>
                    <p class="font-semibold text-emerald-300">GHOST_PRØPHET</p>
                    <p class="text-emerald-400 text-xs">Circuit Breakers - Architect</p>
                  </div>
                </div>
              </div>
            </div>

            <div>
              <h3 class="text-xl font-bold text-emerald-400 mb-2 uppercase border-b border-emerald-700/50 pb-1">Stats & Analytics_</h3>
              <ul class="text-emerald-200 text-sm space-y-1">
                <li class="flex justify-between"><span>AVG. APM:</span> <span class="text-emerald-300">320</span></li>
                <li class="flex justify-between"><span>K/D Ratio:</span> <span class="text-emerald-300">1.87</span></li>
                <li class="flex justify-between"><span>ACCURACY:</span> <span class="text-emerald-300">89.2%</span></li>
              </ul>
            </div>
          </div>
        </div>

        <!-- Ad/Sponsor Section -->
        <div class="p-4 sm:p-6 border-t-2 border-emerald-700/50 bg-gray-950 dark:bg-gray-850">
          <h3 class="text-lg font-bold text-emerald-500 mb-2 uppercase">Sponsored By_</h3>
          <div class="flex items-center justify-center bg-gray-800 h-20 rounded-sm border border-emerald-700/50 shadow-inner shadow-emerald-900/20">
            <span class="text-emerald-600 text-3xl font-mono opacity-80 animate-pulse">NEXUS_TECH</span>
          </div>
        </div>
      </div>
    </div>

    <!-- Footer (simple for status) -->
    <div class="relative z-10 px-6 py-3 bg-gray-950 border-t-2 border-emerald-700/50 text-emerald-500 flex items-center justify-end text-xs sm:text-sm uppercase tracking-wide dark:bg-gray-850">
      <span class="block transform -skew-x-6 text-emerald-400">STATUS: </span>
      <span class="ml-1 text-emerald-300 animate-pulse">_ONLINE</span>
    </div>
  </div>
</div>

<style>
/* Define the flicker animation for the pseudo-element */
@keyframes flicker {
  0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% {
    filter: brightness(1) opacity(0);
  }
  20%, 24%, 55% {
    filter: brightness(1.5) opacity(0.2);
  }
}

.shadow-neon-emerald {
  box-shadow: 0 0 15px rgba(52, 211, 153, 0.6), /* emerald-300 */
              0 0 30px rgba(16, 185, 129, 0.4), /* emerald-500 */
              0 0 45px rgba(5, 150, 105, 0.2);  /* emerald-700 */
}

/* Custom scrollbar for Webkit browsers */
.overflow-y-auto::-webkit-scrollbar {
  width: 8px;
}

.overflow-y-auto::-webkit-scrollbar-track {
  background: #111827; /* gray-900 */
}

.overflow-y-auto::-webkit-scrollbar-thumb {
  background: #065F46; /* emerald-700 */
  border-radius: 4px;
}

.overflow-y-auto::-webkit-scrollbar-thumb:hover {
  background: #047857; /* emerald-600 */
}

/* Specific glitch effect on header for more subtle animation */
.drop-shadow-md {
  text-shadow: 0 0 5px currentColor,
               0 0 10px currentColor,
               0 0 15px currentColor;
  animation: text-glitch 1s infinite alternate;
}

@keyframes text-glitch {
  0% { transform: translate(1px, 1px) skewX(0); }
  20% { transform: translate(-1px, 2px) skewX(-2deg); }
  40% { transform: translate(-2px, -1px) skewX(0); }
  60% { transform: translate(2px, 1px) skewX(2deg); }
  80% { transform: translate(-1px, -2px) skewX(0); }
  100% { transform: translate(1px, 1px) skewX(-1deg); }
}

@media (prefers-color-scheme: dark) {
  .dark\:bg-gray-900 {
    background-color: #111827 !important; /* Tailwind's gray-900 */
  }
  .dark\:border-emerald-700 {
    border-color: #047857 !important; /* Tailwind's emerald-700 */
  }
  .dark\:bg-gray-800 {
    background-color: #1F2937 !important; /* Tailwind's gray-800 */
  }
  .dark\:hover\:bg-emerald-700\/40:hover {
    background-color: rgba(4, 120, 87, 0.4) !important; /* emerald-700/40 */
  }
  .dark\:bg-gray-850 {
    background-color: #18202b !important; /* Slightly lighter than 900 for distinction */
  }
}
</style>

Social Media Site Map Component

A simple, responsive sitemap component for social media interfaces with sepia/brown tones and dark mode support, featuring subtle hover microinteractions.

Open Preview

                <nav aria-label="Social Media Site Map" class="bg-amber-50 dark:bg-stone-900 font-sans p-4 sm:p-6 lg:p-8 min-h-screen flex items-center justify-center">
  <div class="container mx-auto max-w-sm sm:max-w-md md:max-w-lg lg:max-w-xl xl:max-w-2xl bg-amber-100 dark:bg-stone-800 shadow-xl rounded-lg p-6 sm:p-8 md:p-10 border border-amber-200 dark:border-stone-700 animate-fade-in-up">
    <h2 class="text-2xl sm:text-3xl font-bold text-amber-900 dark:text-amber-50 mb-6 text-center tracking-wide">Sitemap</h2>
    <div class="grid grid-cols-1 gap-4 sm:grid-cols-2 md:gap-6">
      
      <a href="#profile" class="group flex items-center p-3 sm:p-4 rounded-md bg-amber-200 dark:bg-stone-700 text-amber-800 dark:text-amber-100 hover:bg-amber-300 dark:hover:bg-stone-600 transition duration-300 ease-in-out transform hover:-translate-y-0.5 hover:shadow-md animate-link-pop">
        <svg class="h-6 w-6 sm:h-7 sm:w-7 mr-3 shrink-0 text-amber-700 dark:text-amber-200 group-hover:text-amber-900 dark:group-hover:text-amber-50 transition-colors duration-300" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
          <path fill-rule="evenodd" d="M7.5 6a4.5 4.5 0 119 0 4.5 4.5 0 01-9 0zM3.751 20.105a8.25 8.25 0 0116.498 0 .75.75 0 01-.437.695A18.683 18.683 0 0112 22.5c-2.786 0-5.433-.608-7.812-1.7a.75.75 0 01-.437-.695z" clip-rule="evenodd" />
        </svg>
        <span class="text-lg sm:text-xl font-medium">Profile</span>
      </a>

      <a href="#feed" class="group flex items-center p-3 sm:p-4 rounded-md bg-amber-200 dark:bg-stone-700 text-amber-800 dark:text-amber-100 hover:bg-amber-300 dark:hover:bg-stone-600 transition duration-300 ease-in-out transform hover:-translate-y-0.5 hover:shadow-md animate-link-pop">
        <svg class="h-6 w-6 sm:h-7 sm:w-7 mr-3 shrink-0 text-amber-700 dark:text-amber-200 group-hover:text-amber-900 dark:group-hover:text-amber-50 transition-colors duration-300" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
          <path d="M12 4.5V19.5M12 4.5c2.756 0 5.466.714 7.07 2.32A7.447 7.447 0 0121 12A7.447 7.447 0 0119.07 17.18c-1.604 1.605-4.314 2.32-7.07 2.32m0-15c-2.756 0-5.466.714-7.07 2.32A7.447 7.447 0 003 12a7.447 7.447 0 001.93 5.18c1.604 1.605 4.314 2.32 7.07 2.32"></path>
        </svg>
        <span class="text-lg sm:text-xl font-medium">Feed</span>
      </a>

      <a href="#messages" class="group flex items-center p-3 sm:p-4 rounded-md bg-amber-200 dark:bg-stone-700 text-amber-800 dark:text-amber-100 hover:bg-amber-300 dark:hover:bg-stone-600 transition duration-300 ease-in-out transform hover:-translate-y-0.5 hover:shadow-md animate-link-pop">
        <svg class="h-6 w-6 sm:h-7 sm:w-7 mr-3 shrink-0 text-amber-700 dark:text-amber-200 group-hover:text-amber-900 dark:group-hover:text-amber-50 transition-colors duration-300" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
           <path fill-rule="evenodd" d="M4.848 2.775C3.902 2.19 2.96 2.592 2.405 3.513l-.583.978c-.354.594-.093 1.354.52 1.67L7.232 9.517 5.918 11.66a1.711 1.711 0 002.414 2.414l2.143-1.314 4.397 2.703a1.75 1.75 0 002.366-1.077l1.785-5.95a1.75 1.75 0 00-.773-1.953L16.29 2.505a1.75 1.75 0 00-1.953-.773l-5.95 1.785a1.75 1.75 0 00-1.077 2.366L6.993 9.404l-2.143-1.314a1.711 1.711 0 00-2.414 2.414L5.918 11.66l-1.066 1.776a1.75 1.75 0 001.077 2.366l5.95 1.785a1.75 1.75 0 001.953-.773l1.785-5.95a1.75 1.75 0 00.773-1.953l-1.314-2.143a1.711 1.711 0 00-2.414-2.414L11.66 5.918 9.517 7.232l-1.776 1.066a1.75 1.75 0 00-2.366-1.077z" clip-rule="evenodd" />
        </svg>
        <span class="text-lg sm:text-xl font-medium">Messages</span>
      </a>

      <a href="#notifications" class="group flex items-center p-3 sm:p-4 rounded-md bg-amber-200 dark:bg-stone-700 text-amber-800 dark:text-amber-100 hover:bg-amber-300 dark:hover:bg-stone-600 transition duration-300 ease-in-out transform hover:-translate-y-0.5 hover:shadow-md animate-link-pop">
        <svg class="h-6 w-6 sm:h-7 sm:w-7 mr-3 shrink-0 text-amber-700 dark:text-amber-200 group-hover:text-amber-900 dark:group-hover:text-amber-50 transition-colors duration-300" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
          <path fill-rule="evenodd" d="M7.5 6v.75H5.513c-.96 0-1.76.75-1.76 1.71v.588l.643 1.623A2.88 2.88 0 0010 12.5v4.5A2.25 2.25 0 0012.25 19h.5A2.25 2.25 0 0015 16.5v-4.5a2.88 2.88 0 00-1.885-2.732l.643-1.623h-.002a2.25 2.25 0 011.76-1.71V6A2.25 2.25 0 0118 3.75h-.254V6h-2.19A2.25 2.25 0 0013.25 8.25h-.5A2.25 2.25 0 0010.5 6v-.75H7.5zm0-3.75C7.5 1.745 8.745 1 10.25 1h.5c1.505 0 2.75.745 2.75 2.75V6H7.5V2.25z" clip-rule="evenodd" />
        </svg>
        <span class="text-lg sm:text-xl font-medium">Notifications</span>
      </a>

      <a href="#friends" class="group flex items-center p-3 sm:p-4 rounded-md bg-amber-200 dark:bg-stone-700 text-amber-800 dark:text-amber-100 hover:bg-amber-300 dark:hover:bg-stone-600 transition duration-300 ease-in-out transform hover:-translate-y-0.5 hover:shadow-md animate-link-pop">
        <svg class="h-6 w-6 sm:h-7 sm:w-7 mr-3 shrink-0 text-amber-700 dark:text-amber-200 group-hover:text-amber-900 dark:group-hover:text-amber-50 transition-colors duration-300" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
          <path d="M15 9.75a3 3 0 10-6 0 3 3 0 006 0zM12 3a2.25 2.25 0 012.25 2.25V6a2.25 2.25 0 01-4.5 0V5.25A2.25 2.25 0 0112 3zM21 12a9 9 0 11-18 0 9 9 0 0118 0zM15 15.75a3 3 0 00-6 0v.75c0 1.35.845 2.5 2.052 3.018A5.976 5.976 0 0012 21.75a5.976 5.976 0 00-2.052-.982A3 3 0 009 16.5v-.75c0-1.35.845-2.5 2.052-3.018A5.976 5.976 0 0012 12a5.976 5.976 0 002.052.982A3 3 0 0015 15.75v.75z" />
        </svg>
        <span class="text-lg sm:text-xl font-medium">Friends</span>
      </a>

      <a href="#settings" class="group flex items-center p-3 sm:p-4 rounded-md bg-amber-200 dark:bg-stone-700 text-amber-800 dark:text-amber-100 hover:bg-amber-300 dark:hover:bg-stone-600 transition duration-300 ease-in-out transform hover:-translate-y-0.5 hover:shadow-md animate-link-pop">
        <svg class="h-6 w-6 sm:h-7 sm:w-7 mr-3 shrink-0 text-amber-700 dark:text-amber-200 group-hover:text-amber-900 dark:group-hover:text-amber-50 transition-colors duration-300" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
          <path fill-rule="evenodd" d="M11.777 2.016a.75.75 0 01.446 0l9.026 2.256c.82.205 1.354.912 1.354 1.76V11.25a9 9 0 01-18 0V6.032c0-.848.534-1.555 1.354-1.76l9.026-2.256zM8.25 7a.75.75 0 01.75-.75h6a.75.75 0 010 1.5H9a.75.75 0 01-.75-.75zM12 12a.75.75 0 00-.75.75v3.5a.75.75 0 001.5 0v-3.5A.75.75 0 0012 12z" clip-rule="evenodd" />
        </svg>
        <span class="text-lg sm:text-xl font-medium">Settings</span>
      </a>
    </div>
    <div class="mt-8 text-center">
      <a href="#help" class="inline-flex items-center text-amber-700 dark:text-amber-200 hover:text-amber-900 dark:hover:text-amber-50 hover:underline transition duration-300 ease-in-out text-base sm:text-lg focus:outline-none focus:ring-2 focus:ring-amber-500 focus:ring-offset-2 focus:ring-offset-amber-100 dark:focus:ring-offset-stone-800">
        <svg class="h-5 w-5 mr-1.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="M8.228 9.247a4.75 4.75 0 017.544 0M15.485 12.012a6.75 6.75 0 01-11.47 0M10 18.25a.75.75 0 100-1.5.75.75 0 000 1.5zM12 19.5h.008v.008H12V19.5zM12 1.5c-5.523 0-10 4.477-10 10s4.477 10 10 10 10-4.477 10-10-4.477-10-10-10zm0 17.5a.75.75 0 100-1.5.75.75 0 000 1.5z"
          ></path>
        </svg>
        Help & Support
      </a>
    </div>
  </div>
</nav>

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

@keyframes link-pop {
  0% { transform: scale(1); }
  50% { transform: scale(1.02); }
  100% { transform: scale(1); }
}

/* Apply animations */
.animate-fade-in-up {
  animation: fade-in-up 0.6s ease-out forwards; 
}

.animate-link-pop:hover {
  animation: link-pop 0.3s ease-in-out;
}
</style>

Retro_Industrial_Columns_Component

A complex, vibrant, retro/vintage-styled columns component for manufacturing/industrial companies, featuring an 80s/90s aesthetic with dark mode support and full responsiveness.

Open Preview

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

Retro_Vintage_Charts_Component

A complex sports/fitness charts component with a retro/vintage aesthetic, using earth tones, designed for responsiveness and dark mode support.

Open Preview

                <div class="font-sans antialiased bg-stone-100 text-stone-900 dark:bg-stone-900 dark:text-stone-100 p-4 sm:p-6 lg:p-8 min-h-screen">
  <div class="max-w-7xl mx-auto bg-stone-200 dark:bg-stone-800 rounded-lg shadow-xl overflow-hidden border-2 border-stone-300 dark:border-stone-700">
    <div class="p-6 sm:p-8 lg:p-10 border-b-2 border-stone-300 dark:border-stone-700">
      <h2 class="text-2xl sm:text-3xl font-bold text-stone-800 dark:text-stone-200 mb-2 font-mono tracking-wider">Athlete Performance Dashboard</h2>
      <p class="text-stone-600 dark:text-stone-400 text-sm sm:text-base">Analyze key metrics over time. Last updated: 2024-07-26</p>
    </div>

    <div class="grid grid-cols-1 md:grid-cols-3 gap-6 p-6 sm:p-8 lg:p-10">

      <!-- Left Sidebar (Athlete Profile) -->
      <div class="md:col-span-1 bg-stone-300 dark:bg-stone-700 p-6 rounded-lg shadow-lg border border-stone-400 dark:border-stone-600">
        <div class="flex flex-col items-center mb-6">
          <img class="w-24 h-24 rounded-full border-4 border-stone-500 dark:border-stone-300 mb-4 object-cover object-center" src="https://randomuser.me/api/portraits/men/52.jpg" alt="Athlete Avatar">
          <h3 class="text-xl font-semibold text-stone-800 dark:text-stone-200">John 'The Beast' Doe</h3>
          <p class="text-stone-600 dark:text-stone-400 text-sm">Basketball Player</p>
        </div>
        <div class="text-stone-700 dark:text-stone-300 text-sm">
          <p class="flex justify-between items-center mb-2"><span class="font-medium">Age:</span> 28</p>
          <p class="flex justify-between items-center mb-2"><span class="font-medium">Height:</span> 6'8" (203 cm)</p>
          <p class="flex justify-between items-center mb-2"><span class="font-medium">Weight:</span> 240 lbs (109 kg)</p>
          <p class="flex justify-between items-center mb-2"><span class="font-medium">Team:</span> City Maulers</p>
          <h4 class="font-bold text-stone-800 dark:text-stone-200 mt-4 mb-2">Recent Achievements:</h4>
          <ul class="list-disc list-inside text-xs space-y-1">
            <li>MVP: Championship Season 2023</li>
            <li>Top Scorer: Last 5 Games</li>
            <li>Improved Vertical Jump by 10%</li>
          </ul>
        </div>
      </div>

      <!-- Main Charts Area -->
      <div class="md:col-span-2 space-y-6">

        <!-- Chart 1: Performance Over Time -->
        <div class="bg-stone-300 dark:bg-stone-700 p-6 rounded-lg shadow-lg border border-stone-400 dark:border-stone-600">
          <h3 class="text-lg sm:text-xl font-bold text-stone-800 dark:text-stone-200 mb-4 font-mono">Peak Performance Timeline</h3>
          <div class="bg-stone-400 dark:bg-stone-600 rounded p-4 border border-stone-500 dark:border-stone-500 overflow-hidden relative" style="height: 250px;">
            <img class="absolute inset-0 w-full h-full object-cover opacity-30 dark:opacity-20" src="https://picsum.photos/600/300?random=1" alt="Chart Background">
            <div class="relative z-10 p-2">
              <p class="text-stone-800 dark:text-stone-200 z-10 bg-stone-300/80 dark:bg-stone-700/80 p-2 inline-block rounded text-sm mb-2">Simulated Chart:</p>
              <div class="flex justify-around items-end h-40 mt-4">
                <div class="w-10 bg-amber-700 dark:bg-orange-600 rounded-t h-3/5 relative group transition-all duration-300 hover:scale-105">
                  <span class="absolute -top-6 left-1/2 -translate-x-1/2 text-xs text-stone-800 dark:text-stone-200 opacity-0 group-hover:opacity-100 transition-opacity">Mar</span>
                </div>
                <div class="w-10 bg-amber-700 dark:bg-orange-600 rounded-t h-4/5 relative group transition-all duration-300 hover:scale-105">
                  <span class="absolute -top-6 left-1/2 -translate-x-1/2 text-xs text-stone-800 dark:text-stone-200 opacity-0 group-hover:opacity-100 transition-opacity">Apr</span>
                </div>
                <div class="w-10 bg-amber-700 dark:bg-orange-600 rounded-t h-[90%] relative group transition-all duration-300 hover:scale-105">
                  <span class="absolute -top-6 left-1/2 -translate-x-1/2 text-xs text-stone-800 dark:text-stone-200 opacity-0 group-hover:opacity-100 transition-opacity">May</span>
                </div>
                <div class="w-10 bg-amber-700 dark:bg-orange-600 rounded-t h-full relative group transition-all duration-300 hover:scale-105">
                  <span class="absolute -top-6 left-1/2 -translate-x-1/2 text-xs text-stone-800 dark:text-stone-200 opacity-0 group-hover:opacity-100 transition-opacity">Jun</span>
                </div>
                <div class="w-10 bg-amber-700 dark:bg-orange-600 rounded-t h-[70%] relative group transition-all duration-300 hover:scale-105">
                  <span class="absolute -top-6 left-1/2 -translate-x-1/2 text-xs text-stone-800 dark:text-stone-200 opacity-0 group-hover:opacity-100 transition-opacity">Jul</span>
                </div>
                <div class="w-10 bg-amber-700 dark:bg-orange-600 rounded-t h-2/3 relative group transition-all duration-300 hover:scale-105">
                  <span class="absolute -top-6 left-1/2 -translate-x-1/2 text-xs text-stone-800 dark:text-stone-200 opacity-0 group-hover:opacity-100 transition-opacity">Aug</span>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- Chart 2: Recent Game Stats -->
        <div class="bg-stone-300 dark:bg-stone-700 p-6 rounded-lg shadow-lg border border-stone-400 dark:border-stone-600">
          <h3 class="text-lg sm:text-xl font-bold text-stone-800 dark:text-stone-200 mb-4 font-mono">Last 5 Games: Key Stats</h3>
          <div class="bg-stone-400 dark:bg-stone-600 rounded p-4 border border-stone-500 dark:border-stone-500 overflow-hidden relative" style="height: 250px;">
            <img class="absolute inset-0 w-full h-full object-cover opacity-30 dark:opacity-20" src="https://picsum.photos/600/300?random=2" alt="Chart Background">
            <div class="relative z-10">
              <p class="text-stone-800 dark:text-stone-200 z-10 bg-stone-300/80 dark:bg-stone-700/80 p-2 inline-block rounded text-sm mb-2">Simulated Bars:</p>
              <div class="flex flex-wrap justify-center sm:justify-between items-end gap-3 h-40 mt-4">
                <div class="flex flex-col items-center w-1/5 sm:w-16">
                  <div class="w-full bg-emerald-700 dark:bg-green-600 rounded-t h-3/4 relative group transition-all duration-300 hover:scale-105">
                    <span class="absolute -top-6 left-1/2 -translate-x-1/2 text-xs text-stone-800 dark:text-stone-200 opacity-0 group-hover:opacity-100 transition-opacity">Pts</span>
                  </div>
                  <span class="block text-xs mt-1 text-stone-700 dark:text-stone-300">28</span>
                </div>
                <div class="flex flex-col items-center w-1/5 sm:w-16">
                  <div class="w-full bg-indigo-700 dark:bg-blue-600 rounded-t h-1/2 relative group transition-all duration-300 hover:scale-105">
                    <span class="absolute -top-6 left-1/2 -translate-x-1/2 text-xs text-stone-800 dark:text-stone-200 opacity-0 group-hover:opacity-100 transition-opacity">Reb</span>
                  </div>
                  <span class="block text-xs mt-1 text-stone-700 dark:text-stone-300">12</span>
                </div>
                <div class="flex flex-col items-center w-1/5 sm:w-16">
                  <div class="w-full bg-amber-700 dark:bg-orange-600 rounded-t h-2/3 relative group transition-all duration-300 hover:scale-105">
                    <span class="absolute -top-6 left-1/2 -translate-x-1/2 text-xs text-stone-800 dark:text-stone-200 opacity-0 group-hover:opacity-100 transition-opacity">Ast</span>
                  </div>
                  <span class="block text-xs mt-1 text-stone-700 dark:text-stone-300">7</span>
                </div>
                <div class="flex flex-col items-center w-1/5 sm:w-16">
                  <div class="w-full bg-red-700 dark:bg-red-600 rounded-t h-1/3 relative group transition-all duration-300 hover:scale-105">
                    <span class="absolute -top-6 left-1/2 -translate-x-1/2 text-xs text-stone-800 dark:text-stone-200 opacity-0 group-hover:opacity-100 transition-opacity">Stl</span>
                  </div>
                  <span class="block text-xs mt-1 text-stone-700 dark:text-stone-300">3</span>
                </div>
                <div class="flex flex-col items-center w-1/5 sm:w-16">
                  <div class="w-full bg-purple-700 dark:bg-purple-600 rounded-t h-1/4 relative group transition-all duration-300 hover:scale-105">
                    <span class="absolute -top-6 left-1/2 -translate-x-1/2 text-xs text-stone-800 dark:text-stone-200 opacity-0 group-hover:opacity-100 transition-opacity">Blk</span>
                  </div>
                  <span class="block text-xs mt-1 text-stone-700 dark:text-stone-300">1</span>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- Stat Cards -->
        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
          <div class="bg-stone-300 dark:bg-stone-700 p-4 rounded-lg shadow-md border border-stone-400 dark:border-stone-600 text-center">
            <p class="text-stone-600 dark:text-stone-400 text-sm mb-1">Average Score</p>
            <p class="text-2xl font-bold text-emerald-700 dark:text-green-500 font-mono">25.7</p>
          </div>
          <div class="bg-stone-300 dark:bg-stone-700 p-4 rounded-lg shadow-md border border-stone-400 dark:border-stone-600 text-center">
            <p class="text-stone-600 dark:text-stone-400 text-sm mb-1">Vertical Jump</p>
            <p class="text-2xl font-bold text-indigo-700 dark:text-blue-500 font-mono">38"</p>
          </div>
          <div class="bg-stone-300 dark:bg-stone-700 p-4 rounded-lg shadow-md border border-stone-400 dark:border-stone-600 text-center">
            <p class="text-stone-600 dark:text-stone-400 text-sm mb-1">Speed (100m)</p>
            <p class="text-2xl font-bold text-amber-700 dark:text-orange-500 font-mono">10.9s</p>
          </div>
        </div>

      </div>
    </div>

    <!-- Calls to Action / Footer -->
    <div class="p-6 sm:p-8 lg:p-10 border-t-2 border-stone-300 dark:border-stone-700 flex flex-col sm:flex-row justify-between items-center gap-4">
      <button class="px-6 py-3 bg-amber-700 hover:bg-amber-800 dark:bg-orange-600 dark:hover:bg-orange-700 text-white font-bold rounded-lg shadow-md transition-all duration-300 transform hover:scale-105 focus:outline-none focus:ring-2 focus:ring-amber-500 focus:ring-opacity-75">
        View Full Report
      </button>
      <div class="text-stone-600 dark:text-stone-400 text-sm">
        <a href="#" class="hover:underline">Export Data</a> | <a href="#" class="hover:underline">Settings</a>
      </div>
    </div>

  </div>
</div>

Retro_Vintage_Earth_Tones_Filters_Component

A moderate complexity filters component with a retro/vintage aesthetic and earth tones, suitable for a dashboard. Features responsive design and dark mode support.

Open Preview

                <div class="flex flex-col p-4 sm:p-6 lg:p-8 bg-amber-50 dark:bg-stone-900 rounded-xl shadow-lg font-mono text-gray-800 dark:text-gray-200 border-2 border-stone-300 dark:border-stone-700">
  <div class="flex flex-col sm:flex-row sm:items-center justify-between mb-6 border-b-2 border-dashed border-stone-400 dark:border-stone-600 pb-4">
    <h2 class="text-2xl sm:text-3xl font-bold text-stone-800 dark:text-stone-200 mb-4 sm:mb-0">Dashboard Filters</h2>
    <div class="flex items-center space-x-2">
      <label class="relative inline-flex items-center cursor-pointer">
        <input type="checkbox" value="" class="sr-only peer">
        <div class="w-11 h-6 bg-stone-300 peer-focus:outline-none peer-focus:ring-2 peer-focus:ring-amber-500 rounded-full peer dark:bg-stone-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-amber-600"></div>
        <span class="ml-3 text-sm font-medium text-stone-700 dark:text-stone-300">Dark Mode</span>
      </label>
    </div>
  </div>

  <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 mb-8">
    <!-- Date Range Filter -->
    <div class="flex flex-col">
      <label for="date-range" class="block text-sm font-medium text-stone-700 dark:text-stone-300 mb-2">Date Range</label>
      <div class="relative">
        <input id="date-range" type="text" placeholder="Select Date Range" class="block w-full py-2 px-3 pl-10 text-stone-800 dark:text-stone-200 bg-white dark:bg-stone-800 border border-stone-400 dark:border-stone-600 rounded-md focus:ring-amber-500 focus:border-amber-500 shadow-sm transition-all duration-200 ease-in-out placeholder-stone-500 dark:placeholder-stone-400"
         onfocus="this.type='date'" onblur="this.type='text'" >
        <div class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
          <svg class="h-5 w-5 text-stone-500 dark:text-stone-400" 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 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
          </svg>
        </div>
      </div>
    </div>

    <!-- Category Filter -->
    <div class="flex flex-col">
      <label for="category" class="block text-sm font-medium text-stone-700 dark:text-stone-300 mb-2">Category</label>
      <div class="relative">
        <select id="category" class="block w-full py-2 px-3 pl-10 text-stone-800 dark:text-stone-200 bg-white dark:bg-stone-800 border border-stone-400 dark:border-stone-600 rounded-md focus:ring-amber-500 focus:border-amber-500 shadow-sm transition-all duration-200 ease-in-out appearance-none">
          <option value="">All Categories</option>
          <option value="revenue">Revenue</option>
          <option value="users">Users</option>
          <option value="products">Products</option>
          <option value="marketing">Marketing</option>
        </select>
        <div class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
          <svg class="h-5 w-5 text-stone-500 dark:text-stone-400" 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="M7 8h10M7 12h10M7 16h10"></path>
          </svg>
        </div>
        <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-stone-500 dark:text-stone-400">
          <svg class="fill-current h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
            <path d="M9.293 12.95l-.707.707L4.586 9.5l4-.707zM10 12.95l4-4-.707-.707L10 11.586l-2.293-2.293-.707.707L10 12.95z"/>
          </svg>
        </div>
      </div>
    </div>

    <!-- Status Filter -->
    <div class="flex flex-col">
      <label for="status" class="block text-sm font-medium text-stone-700 dark:text-stone-300 mb-2">Status</label>
      <div class="relative">
        <select id="status" class="block w-full py-2 px-3 pl-10 text-stone-800 dark:text-stone-200 bg-white dark:bg-stone-800 border border-stone-400 dark:border-stone-600 rounded-md focus:ring-amber-500 focus:border-amber-500 shadow-sm transition-all duration-200 ease-in-out appearance-none">
          <option value="">All Statuses</option>
          <option value="active">Active</option>
          <option value="pending">Pending</option>
          <option value="completed">Completed</option>
          <option value="archived">Archived</option>
        </select>
        <div class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
          <svg class="h-5 w-5 text-stone-500 dark:text-stone-400" 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-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
          </svg>
        </div>
        <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-stone-500 dark:text-stone-400">
          <svg class="fill-current h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
            <path d="M9.293 12.95l-.707.707L4.586 9.5l4-.707zM10 12.95l4-4-.707-.707L10 11.586l-2.293-2.293-.707.707L10 12.95z"/>
          </svg>
        </div>
      </div>
    </div>

    <!-- Search Input -->
    <div class="flex flex-col sm:col-span-2 lg:col-span-1">
      <label for="search" class="block text-sm font-medium text-stone-700 dark:text-stone-300 mb-2">Search</label>
      <div class="relative">
        <input id="search" type="text" placeholder="Search anything..." class="block w-full py-2 px-3 pl-10 text-stone-800 dark:text-stone-200 bg-white dark:bg-stone-800 border border-stone-400 dark:border-stone-600 rounded-md focus:ring-amber-500 focus:border-amber-500 shadow-sm transition-all duration-200 ease-in-out placeholder-stone-500 dark:placeholder-stone-400">
        <div class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
          <svg class="h-5 w-5 text-stone-500 dark:text-stone-400" 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="M21 21l-6-6m2-5a7 7 11-14 0 7 7 0 0114 0z"></path>
          </svg>
        </div>
      </div>
    </div>

    <!-- Slider Filter -->
    <div class="flex flex-col sm:col-span-2 lg:col-span-1">
      <label for="value-range" class="block text-sm font-medium text-stone-700 dark:text-stone-300 mb-2">Value Range: <span id="value-display" class="font-bold text-amber-700 dark:text-amber-400">$50 - $200</span></label>
      <input id="value-range" type="range" min="0" max="500" value="150" class="w-full h-2 bg-stone-300 rounded-lg appearance-none cursor-pointer range-amber-500 dark:bg-stone-700" 
        oninput="document.getElementById('value-display').innerText = '$' + (this.value - 100 < 0 ? 0 : this.value - 100) + ' - $' + this.value">
    </div>

    <!-- User Avatar Filter -->
    <div class="flex flex-col">
      <label for="user-filter" class="block text-sm font-medium text-stone-700 dark:text-stone-300 mb-2">Assigned To</label>
      <div class="flex items-center space-x-2">
        <img class="w-9 h-9 rounded-full border-2 border-stone-400 dark:border-stone-600 object-cover" src="https://randomuser.me/api/portraits/men/45.jpg" alt="User Avatar">
        <img class="w-9 h-9 rounded-full border-2 border-stone-400 dark:border-stone-600 object-cover" src="https://randomuser.me/api/portraits/women/67.jpg" alt="User Avatar">
        <img class="w-9 h-9 rounded-full border-2 border-stone-400 dark:border-stone-600 object-cover" src="https://randomuser.me/api/portraits/men/22.jpg" alt="User Avatar">
        <button class="w-9 h-9 rounded-full bg-stone-200 dark:bg-stone-700 text-stone-600 dark:text-stone-300 flex items-center justify-center border-2 border-stone-400 dark:border-stone-600 hover:bg-stone-300 dark:hover:bg-stone-600 transition-colors duration-200 ease-in-out">
          <svg class="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="M12 6v6m0 0v6m0-6h6m-6 0H6"></path></svg>
        </button>
      </div>
    </div>

  </div>

  <div class="flex flex-col sm:flex-row justify-end space-y-4 sm:space-y-0 sm:space-x-4 pt-6 border-t-2 border-dashed border-stone-400 dark:border-stone-600">
    <button class="px-6 py-2 bg-stone-300 dark:bg-stone-700 text-stone-800 dark:text-stone-200 rounded-md shadow-md hover:bg-stone-400 dark:hover:bg-stone-600 transition-colors duration-200 ease-in-out border border-stone-400 dark:border-stone-600 font-bold uppercase text-sm tracking-wider">
      Reset Filters
    </button>
    <button class="px-6 py-2 bg-amber-600 text-white rounded-md shadow-lg hover:bg-amber-700 transition-colors duration-200 ease-in-out border-2 border-amber-700 font-bold uppercase text-sm tracking-wider">
      Apply Filters
    </button>
  </div>
</div>

1 ... 61 62 63 64 65 ... 335