Search Components

Content Display Components

Components that present and organize content on the website

Skeuomorphic_Fashion_Card

A simple, responsive content display card for fashion/beauty products, designed with a skeuomorphic aesthetic using corporate blue tones. Includes dark mode support.

Open Preview

                <div class="flex justify-center items-center min-h-screen p-4 bg-gradient-to-br from-blue-50 to-blue-200 dark:from-gray-900 dark:to-blue-950">
  <div class="w-full max-w-sm mx-auto rounded-3xl p-6
              bg-gradient-to-br from-blue-100 to-blue-300 shadow-2xl shadow-blue-400/50
              dark:from-blue-900 dark:to-blue-700 dark:shadow-blue-950/80
              transform transition-all duration-300 hover:scale-[1.02] hover:shadow-blue-500/60 dark:hover:shadow-blue-900/90
              relative overflow-hidden border-2 border-blue-200 dark:border-blue-800">

    <!-- Inner Bevel Top-Left -->
    <div class="absolute inset-0 rounded-3xl
                shadow-inner shadow-blue-50/50 dark:shadow-blue-800/50
                pointer-events-none"
         style="box-shadow: inset 5px 5px 10px rgba(255,255,255,0.3), inset -5px -5px 10px rgba(0,0,0,0.1);">
    </div>

    <!-- Inner Bevel Bottom-Right for Dark Mode -->
    <div class="absolute inset-0 rounded-3xl
                dark:shadow-inner dark:shadow-blue-950/50
                pointer-events-none"
         style="box-shadow: inset -5px -5px 10px rgba(0,0,0,0.3), inset 5px 5px 10px rgba(255,255,255,0.1);">
    </div>

    <div class="relative z-10 flex flex-col items-center text-center">
      <div class="w-32 h-32 rounded-full overflow-hidden mb-4
                  border-4 border-blue-300 dark:border-blue-700
                  shadow-xl shadow-blue-400/40 dark:shadow-blue-950/70
                  transform transition-all duration-300 hover:scale-105">
        <img src="https://picsum.photos/id/78/200/200" alt="Product Image" class="w-full h-full object-cover">
      </div>

      <h3 class="text-xl md:text-2xl font-bold mb-2 text-blue-800 dark:text-blue-200 drop-shadow-md">
        AquaBloom Moisturizer
      </h3>
      <p class="text-sm text-blue-700 dark:text-blue-300 mb-4 px-2 tracking-wide">
        Infused with deep-sea minerals for radiant, hydrated skin.
      </p>

      <div class="mb-4">
        <span class="text-2xl font-extrabold text-blue-900 dark:text-blue-100 drop-shadow-lg">$49.99</span>
      </div>

      <button type="button" class="w-full px-6 py-3 rounded-full text-lg font-semibold
                  bg-gradient-to-br from-blue-600 to-blue-800 text-white
                  shadow-xl shadow-blue-700/50 dark:shadow-blue-900/70
                  active:bg-gradient-to-tl active:from-blue-700 active:to-blue-900
                  transform transition-all duration-200
                  hover:scale-[1.02] hover:shadow-blue-800/60 dark:hover:shadow-blue-800/80
                  relative overflow-hidden
                  before:absolute before:inset-0 before:bg-white before:bg-opacity-0 hover:before:bg-opacity-10 before:rounded-full before:transition-all before:duration-300">
        Add to Cart
      </button>
      <div class="mt-4 flex gap-x-2 text-blue-700 dark:text-blue-300">
        <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
          <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.817 2.042a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.538 1.118l-2.817-2.042a1 1 0 00-1.176 0l-2.817 2.042c-.783.565-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.92 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path>
        </svg>
        <span>4.8 (120 reviews)</span>
      </div>
    </div>
  </div>
</div>

Swiss_International_Typography_Content_Display_Component

A clean, minimalist content display component for dashboards, emphasizing typography and grid systems with cool neutral colors and full responsiveness.

Open Preview

                <div class="font-sans antialiased text-gray-800 bg-gray-100 dark:bg-gray-900 dark:text-gray-200 p-4 sm:p-6 lg:p-8">

  <!-- Component Header -->
  <div class="mb-6 lg:mb-8">
    <h1 class="text-2xl sm:text-3xl lg:text-4xl font-light tracking-tight text-gray-900 dark:text-gray-100 mb-2">Dashboard Overview</h1>
    <p class="text-gray-600 dark:text-gray-400 text-lg">A concise summary of key metrics and recent activities.</p>
  </div>

  <!-- Grid Layout for Content Cards -->
  <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4 sm:gap-6 lg:gap-8">

    <!-- Metric Card 1: Sales -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm hover:shadow-md transition-shadow duration-300 overflow-hidden border border-gray-200 dark:border-gray-700">
      <div class="p-5 sm:p-6">
        <div class="flex items-center justify-between mb-4">
          <h2 class="text-base sm:text-lg font-medium text-gray-700 dark:text-gray-300">Total Sales</h2>
          <svg class="w-6 h-6 text-blue-500" 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 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1L21 6m-4 14l2-2m-3-19v5m-1.5-6h.025A20.307 20.307 0 0110 21.886V1.114c3.784-.526 7.427.674 10.59 3.447L21 6m-4 14h.025M21 6l-2 2m-7 1.5.5.5V12M12 8h.01V6M12 11.5l1.5-1.5m-3 0L9 10m-2 2V6"></path></svg>
        </div>
        <p class="text-2xl sm:text-3xl font-bold text-gray-900 dark:text-gray-100 mb-2">$12,345</p>
        <p class="text-sm text-gray-500 dark:text-gray-400">+5.2% from last month</p>
      </div>
    </div>

    <!-- Metric Card 2: New Users -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm hover:shadow-md transition-shadow duration-300 overflow-hidden border border-gray-200 dark:border-gray-700">
      <div class="p-5 sm:p-6">
        <div class="flex items-center justify-between mb-4">
          <h2 class="text-base sm:text-lg font-medium text-gray-700 dark:text-gray-300">New Users</h2>
          <svg class="w-6 h-6 text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H2v-2a3 3 0 015.356-1.857m7.5 0a2.5 2.5 0 11-5 0 2.5 2.5 0 015 0zm-7.5 0a2.5 2.5 0 11-5 0 2.5 2.5 0 015 0z"></path></svg>
        </div>
        <p class="text-2xl sm:text-3xl font-bold text-gray-900 dark:text-gray-100 mb-2">897</p>
        <p class="text-sm text-gray-500 dark:text-gray-400">+12.8% from last week</p>
      </div>
    </div>

    <!-- Metric Card 3: Orders Pending -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm hover:shadow-md transition-shadow duration-300 overflow-hidden border border-gray-200 dark:border-gray-700">
      <div class="p-5 sm:p-6">
        <div class="flex items-center justify-between mb-4">
          <h2 class="text-base sm:text-lg font-medium text-gray-700 dark:text-gray-300">Orders Pending</h2>
          <svg class="w-6 h-6 text-yellow-500" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01"></path></svg>
        </div>
        <p class="text-2xl sm:text-3xl font-bold text-gray-900 dark:text-gray-100 mb-2">42</p>
        <p class="text-sm text-gray-500 dark:text-gray-400">Requires immediate action</p>
      </div>
    </div>

    <!-- Metric Card 4: Retention Rate -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm hover:shadow-md transition-shadow duration-300 overflow-hidden border border-gray-200 dark:border-gray-700">
      <div class="p-5 sm:p-6">
        <div class="flex items-center justify-between mb-4">
          <h2 class="text-base sm:text-lg font-medium text-gray-700 dark:text-gray-300">Retention Rate</h2>
          <svg class="w-6 h-6 text-purple-500" 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 12l3-3 3 3 4-4M18 10h4M3 4h18M3 10h18M3 16h18M3 20h18"></path></svg>
        </div>
        <p class="text-2xl sm:text-3xl font-bold text-gray-900 dark:text-gray-100 mb-2">78.5%</p>
        <p class="text-sm text-gray-500 dark:text-gray-400">Target: 80%</p>
      </div>
    </div>

    <!-- Recent Activity Feed -->
    <div class="lg:col-span-2 xl:col-span-2 bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 overflow-hidden">
      <div class="p-5 sm:p-6">
        <h2 class="text-lg font-medium text-gray-700 dark:text-gray-300 mb-4">Recent Activity</h2>
        <ul class="divide-y divide-gray-200 dark:divide-gray-700">
          <li class="py-3 flex items-center">
            <img class="h-8 w-8 rounded-full mr-3 object-cover" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
            <div>
              <p class="text-sm font-medium text-gray-800 dark:text-gray-200">John Doe <span class="font-normal text-gray-500 dark:text-gray-400">updated profile.</span></p>
              <p class="text-xs text-gray-500 dark:text-gray-400">15 minutes ago</p>
            </div>
          </li>
          <li class="py-3 flex items-center">
            <img class="h-8 w-8 rounded-full mr-3 object-cover" src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar">
            <div>
              <p class="text-sm font-medium text-gray-800 dark:text-gray-200">Jane Smith <span class="font-normal text-gray-500 dark:text-gray-400">completed an order #1023.</span></p>
              <p class="text-xs text-gray-500 dark:text-gray-400">1 hour ago</p>
            </div>
          </li>
          <li class="py-3 flex items-center">
            <img class="h-8 w-8 rounded-full mr-3 object-cover" src="https://randomuser.me/api/portraits/men/76.jpg" alt="User Avatar">
            <div>
              <p class="text-sm font-medium text-gray-800 dark:text-gray-200">Robert Johnson <span class="font-normal text-gray-500 dark:text-gray-400">added a new product.</span></p>
              <p class="text-xs text-gray-500 dark:text-gray-400">3 hours ago</p>
            </div>
          </li>
          <li class="py-3 flex items-center">
            <img class="h-8 w-8 rounded-full mr-3 object-cover" src="https://randomuser.me/api/portraits/women/21.jpg" alt="User Avatar">
            <div>
              <p class="text-sm font-medium text-gray-800 dark:text-gray-200">Emily White <span class="font-normal text-gray-500 dark:text-gray-400">replied to a support ticket.</span></p>
              <p class="text-xs text-gray-500 dark:text-gray-400">Yesterday</p>
            </div>
          </li>
        </ul>
      </div>
    </div>

    <!-- Quick Stats Breakdown -->
    <div class="lg:col-span-1 xl:col-span-2 bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 overflow-hidden">
      <div class="p-5 sm:p-6">
        <h2 class="text-lg font-medium text-gray-700 dark:text-gray-300 mb-4">Quick Stats</h2>
        <div class="space-y-4">
          <div class="flex items-center justify-between">
            <span class="text-sm font-medium text-gray-600 dark:text-gray-300">Monthly Revenue</span>
            <span class="text-base font-semibold text-gray-900 dark:text-gray-100">$5,800</span>
          </div>
          <div class="flex items-center justify-between">
            <span class="text-sm font-medium text-gray-600 dark:text-gray-300">Active Subscriptions</span>
            <span class="text-base font-semibold text-gray-900 dark:text-gray-100">2,100</span>
          </div>
          <div class="flex items-center justify-between">
            <span class="text-sm font-medium text-gray-600 dark:text-gray-300">Customer Satisfaction</span>
            <span class="text-base font-semibold text-gray-900 dark:text-gray-100">92%</span>
          </div>
          <div class="flex items-center justify-between">
            <span class="text-sm font-medium text-gray-600 dark:text-gray-300">Website Visitors (Today)</span>
            <span class="text-base font-semibold text-gray-900 dark:text-gray-100">1,450</span>
          </div>
        </div>
      </div>
    </div>

    <!-- Generic Information Card with Image -->
    <div class="lg:col-span-1 xl:col-span-1 bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 overflow-hidden">
      <img class="w-full h-32 object-cover object-center" src="https://picsum.photos/400/200?random=1" alt="Placeholder Image">
      <div class="p-5 sm:p-6">
        <h2 class="text-lg font-medium text-gray-700 dark:text-gray-300 mb-2">Project Progress</h2>
        <p class="text-gray-600 dark:text-gray-400 text-sm mb-4">Monitor the status of your ongoing projects and milestones.</p>
        <div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2.5">
          <div class="bg-blue-500 h-2.5 rounded-full" style="width: 70%"></div>
        </div>
        <p class="text-right text-xs mt-2 text-gray-500 dark:text-gray-400">70% Completed</p>
      </div>
    </div>

    <!-- Generic Information Card without Image -->
    <div class="lg:col-span-1 xl:col-span-1 bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 overflow-hidden">
      <div class="p-5 sm:p-6">
        <h2 class="text-lg font-medium text-gray-700 dark:text-gray-300 mb-2">System Health</h2>
        <p class="text-gray-600 dark:text-gray-400 text-sm mb-4">All systems are operational. No critical issues detected.</p>
        <div class="bg-green-100 dark:bg-green-900 text-green-700 dark:text-green-300 text-xs font-semibold px-2.5 py-0.5 rounded-full inline-flex items-center">
          <span class="h-2 w-2 rounded-full bg-green-500 mr-1"></span> Operational
        </div>
        <p class="text-xs mt-3 text-gray-500 dark:text-gray-400">Last checked: 2 minutes ago</p>
      </div>
    </div>

  </div>
</div>

Memphis_Content_Display_Component

A complex, responsive content display component for entertainment/media platforms, featuring a Memphis Design style with a black and white color scheme and one bright accent color (fuchsia). Includes dark mode support and placeholder images.

Open Preview

                <div class="font-sans p-4 sm:p-6 lg:p-8 bg-white text-gray-900 dark:bg-gray-900 dark:text-gray-50">

  <!-- Component Title (Optional) -->
  <h2 class="text-3xl sm:text-4xl lg:text-5xl font-extrabold text-gray-900 dark:text-gray-50 mb-8 sm:mb-12 text-center">
    <span class="relative inline-block">
      <span class="relative z-10">Today's Hot Picks</span>
      <span class="absolute inset-x-0 bottom-0 h-3 sm:h-4 lg:h-5 bg-fuchsia-500 transform -skew-x-12"></span>
    </span>
  </h2>

  <!-- Main Grid Container -->
  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6 sm:gap-8 lg:gap-10">

    <!-- Featured Card 1 (Larger, more prominent) -->
    <div class="md:col-span-2 lg:col-span-2 xl:col-span-2 relative overflow-hidden rounded-xl shadow-xl dark:shadow-2xl group transition-all duration-300 ease-in-out transform hover:-translate-y-1 hover:scale-[1.01]">
      <div class="absolute inset-0 bg-gray-900 transform -skew-y-6 scale-125 dark:bg-gray-800 opacity-70 group-hover:opacity-80 transition-opacity duration-300"></div>
      <div class="absolute top-4 left-4 p-2 bg-fuchsia-500 text-white text-xs font-bold rounded-br-lg transform -rotate-6 z-20">TRENDING</div>

      <img src="https://picsum.photos/800/450?random=1" alt="Featured Content Image" class="relative w-full h-64 sm:h-80 md:h-96 object-cover object-center rounded-t-xl z-10 group-hover:opacity-80 transition-opacity duration-300">

      <div class="relative p-5 sm:p-6 bg-white dark:bg-gray-950 z-10 rounded-b-xl">
        <h3 class="text-xl sm:text-2xl font-bold mb-2 text-gray-900 dark:text-gray-50">The Midnight Chronicles</h3>
        <p class="text-sm text-gray-600 dark:text-gray-400 mb-4 line-clamp-2">Unravel the secrets of a forgotten city in this gripping new sci-fi epic. Prepare for mind-bending twists!</p>

        <div class="flex items-center text-sm text-gray-500 dark:text-gray-400 mb-4">
          <svg class="w-4 h-4 mr-1 text-fuchsia-500" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.539 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.565-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.924 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
          <span class="mr-2">4.8</span> (1.2K Reviews)
          <span class="mx-2">•</span>
          <span>Action, Sci-Fi</span>
        </div>

        <button class="relative flex items-center justify-center px-6 py-2 rounded-lg bg-fuchsia-500 text-white font-bold overflow-hidden group hover:bg-fuchsia-600 transition-all duration-300 ease-in-out transform hover:scale-105">
          <span class="absolute w-0 h-0 transition-all duration-300 ease-out bg-black rounded-full group-hover:w-32 group-hover:h-32 opacity-10"></span>
          <span class="relative z-10">Watch Now</span>
          <svg class="w-5 h-5 ml-2 -mr-1 relative z-10" fill="currentColor" viewBox="0 0 20 20"><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>
        </button>
      </div>
    </div>

    <!-- Content Cards (Smaller, repeatable) -->
    <!-- Card 1 -->
    <div class="relative overflow-hidden rounded-xl shadow-lg dark:shadow-xl dark:bg-gray-950 group transition-all duration-300 ease-in-out transform hover:-translate-y-1 hover:scale-[1.01]">
      <div class="absolute inset-0 bg-gray-900 transform -skew-y-6 scale-125 dark:bg-gray-800 opacity-70 group-hover:opacity-80 transition-opacity duration-300"></div>
      <img src="https://picsum.photos/400/225?random=2" alt="Content Image" class="relative w-full h-48 object-cover object-center rounded-t-xl z-10 group-hover:opacity-80 transition-opacity duration-300">
      <div class="relative p-4 bg-white dark:bg-gray-950 z-10 rounded-b-xl">
        <h3 class="text-lg font-bold mb-1 text-gray-900 dark:text-gray-50">Echoes of the Past</h3>
        <p class="text-xs text-gray-600 dark:text-gray-400 mb-3 line-clamp-2">A chilling mystery unfolds in a secluded mountain town. Can they uncover the truth?</p>
        <div class="flex items-center justify-between text-sm">
          <span class="flex items-center text-gray-500 dark:text-gray-400">
            <svg class="w-4 h-4 mr-1 text-fuchsia-500" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.539 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.565-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.924 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
            4.5
          </span>
          <button class="px-3 py-1 text-xs bg-fuchsia-500 text-white rounded-md hover:bg-fuchsia-600 transition-colors duration-200">Details</button>
        </div>
      </div>
    </div>

    <!-- Card 2 -->
    <div class="relative overflow-hidden rounded-xl shadow-lg dark:shadow-xl dark:bg-gray-950 group transition-all duration-300 ease-in-out transform hover:-translate-y-1 hover:scale-[1.01]">
      <div class="absolute inset-0 bg-gray-900 transform -skew-y-6 scale-125 dark:bg-gray-800 opacity-70 group-hover:opacity-80 transition-opacity duration-300"></div>
      <img src="https://picsum.photos/400/225?random=3" alt="Content Image" class="relative w-full h-48 object-cover object-center rounded-t-xl z-10 group-hover:opacity-80 transition-opacity duration-300">
      <div class="relative p-4 bg-white dark:bg-gray-950 z-10 rounded-b-xl">
        <h3 class="text-lg font-bold mb-1 text-gray-900 dark:text-gray-50">Cosmic Voyage</h3>
        <p class="text-xs text-gray-600 dark:text-gray-400 mb-3 line-clamp-2">Journey through distant galaxies in this visually stunning animated series.</p>
        <div class="flex items-center justify-between text-sm">
          <span class="flex items-center text-gray-500 dark:text-gray-400">
            <svg class="w-4 h-4 mr-1 text-fuchsia-500" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.539 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.565-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.924 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
            4.9
          </span>
          <button class="px-3 py-1 text-xs bg-fuchsia-500 text-white rounded-md hover:bg-fuchsia-600 transition-colors duration-200">Details</button>
        </div>
      </div>
    </div>

    <!-- Card 3 -->
    <div class="relative overflow-hidden rounded-xl shadow-lg dark:shadow-xl dark:bg-gray-950 group transition-all duration-300 ease-in-out transform hover:-translate-y-1 hover:scale-[1.01]">
      <div class="absolute inset-0 bg-gray-900 transform -skew-y-6 scale-125 dark:bg-gray-800 opacity-70 group-hover:opacity-80 transition-opacity duration-300"></div>
      <img src="https://picsum.photos/400/225?random=4" alt="Content Image" class="relative w-full h-48 object-cover object-center rounded-t-xl z-10 group-hover:opacity-80 transition-opacity duration-300">
      <div class="relative p-4 bg-white dark:bg-gray-950 z-10 rounded-b-xl">
        <h3 class="text-lg font-bold mb-1 text-gray-900 dark:text-gray-50">The Last Pixel</h3>
        <p class="text-xs text-gray-600 dark:text-gray-400 mb-3 line-clamp-2">A classic console game comes to life, but something is wrong with the code...</p>
        <div class="flex items-center justify-between text-sm">
          <span class="flex items-center text-gray-500 dark:text-gray-400">
            <svg class="w-4 h-4 mr-1 text-fuchsia-500" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.539 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.565-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.924 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
            4.6
          </span>
          <button class="px-3 py-1 text-xs bg-fuchsia-500 text-white rounded-md hover:bg-fuchsia-600 transition-colors duration-200">Details</button>
        </div>
      </div>
    </div>

    <!-- Card 4 -->
    <div class="relative overflow-hidden rounded-xl shadow-lg dark:shadow-xl dark:bg-gray-950 group transition-all duration-300 ease-in-out transform hover:-translate-y-1 hover:scale-[1.01]">
      <div class="absolute inset-0 bg-gray-900 transform -skew-y-6 scale-125 dark:bg-gray-800 opacity-70 group-hover:opacity-80 transition-opacity duration-300"></div>
      <img src="https://picsum.photos/400/225?random=5" alt="Content Image" class="relative w-full h-48 object-cover object-center rounded-t-xl z-10 group-hover:opacity-80 transition-opacity duration-300">
      <div class="relative p-4 bg-white dark:bg-gray-950 z-10 rounded-b-xl">
        <h3 class="text-lg font-bold mb-1 text-gray-900 dark:text-gray-50">Rhythm City Beats</h3>
        <p class="text-xs text-gray-600 dark:text-gray-400 mb-3 line-clamp-2">Follow the rise of a street dance crew in this vibrant musical drama.</p>
        <div class="flex items-center justify-between text-sm">
          <span class="flex items-center text-gray-500 dark:text-gray-400">
            <svg class="w-4 h-4 mr-1 text-fuchsia-500" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.539 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.565-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.924 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
            4.7
          </span>
          <button class="px-3 py-1 text-xs bg-fuchsia-500 text-white rounded-md hover:bg-fuchsia-600 transition-colors duration-200">Details</button>
        </div>
      </div>
    </div>

    <!-- Card 5 -->
    <div class="relative overflow-hidden rounded-xl shadow-lg dark:shadow-xl dark:bg-gray-950 group transition-all duration-300 ease-in-out transform hover:-translate-y-1 hover:scale-[1.01]">
      <div class="absolute inset-0 bg-gray-900 transform -skew-y-6 scale-125 dark:bg-gray-800 opacity-70 group-hover:opacity-80 transition-opacity duration-300"></div>
      <img src="https://picsum.photos/400/225?random=6" alt="Content Image" class="relative w-full h-48 object-cover object-center rounded-t-xl z-10 group-hover:opacity-80 transition-opacity duration-300">
      <div class="relative p-4 bg-white dark:bg-gray-950 z-10 rounded-b-xl">
        <h3 class="text-lg font-bold mb-1 text-gray-900 dark:text-gray-50">The Quantum Leap</h3>
        <p class="text-xs text-gray-600 dark:text-gray-400 mb-3 line-clamp-2">A scientist invents a device that changes reality, with unexpected consequences.</p>
        <div class="flex items-center justify-between text-sm">
          <span class="flex items-center text-gray-500 dark:text-gray-400">
            <svg class="w-4 h-4 mr-1 text-fuchsia-500" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.539 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.565-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.924 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
            4.4
          </span>
          <button class="px-3 py-1 text-xs bg-fuchsia-500 text-white rounded-md hover:bg-fuchsia-600 transition-colors duration-200">Details</button>
        </div>
      </div>
    </div>

    <!-- Card 6 -->
    <div class="relative overflow-hidden rounded-xl shadow-lg dark:shadow-xl dark:bg-gray-950 group transition-all duration-300 ease-in-out transform hover:-translate-y-1 hover:scale-[1.01]">
      <div class="absolute inset-0 bg-gray-900 transform -skew-y-6 scale-125 dark:bg-gray-800 opacity-70 group-hover:opacity-80 transition-opacity duration-300"></div>
      <img src="https://picsum.photos/400/225?random=7" alt="Content Image" class="relative w-full h-48 object-cover object-center rounded-t-xl z-10 group-hover:opacity-80 transition-opacity duration-300">
      <div class="relative p-4 bg-white dark:bg-gray-950 z-10 rounded-b-xl">
        <h3 class="text-lg font-bold mb-1 text-gray-900 dark:text-gray-50">Arcade Aces</h3>
        <p class="text-xs text-gray-600 dark:text-gray-400 mb-3 line-clamp-2">A group of friends discovers a magical arcade machine that transports them.</p>
        <div class="flex items-center justify-between text-sm">
          <span class="flex items-center text-gray-500 dark:text-gray-400">
            <svg class="w-4 h-4 mr-1 text-fuchsia-500" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.539 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.565-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.924 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
            4.2
          </span>
          <button class="px-3 py-1 text-xs bg-fuchsia-500 text-white rounded-md hover:bg-fuchsia-600 transition-colors duration-200">Details</button>
        </div>
      </div>
    </div>

  </div>

  <!-- Section for More Content/Navigation (e.g., categories or pagination) -->
  <div class="mt-12 text-center">
    <button class="relative flex items-center justify-center mx-auto px-8 py-3 text-lg rounded-full bg-black text-white font-bold overflow-hidden group hover:bg-gray-800 dark:bg-gray-800 dark:hover:bg-gray-700 transition-all duration-300 ease-in-out transform hover:scale-105">
      <span class="absolute w-0 h-0 transition-all duration-300 ease-out bg-fuchsia-500 rounded-full group-hover:w-full group-hover:h-full opacity-20"></span>
      <span class="relative z-10">Discover More Titles</span>
      <svg class="w-5 h-5 ml-2 relative z-10" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
    </button>
  </div>

</div>

Industrial_3D_Content_Display

A simple, responsive content display component for manufacturing/industrial companies, featuring a subtle 3D design using muted colors and dark mode support.

Open Preview

                <div class="min-h-screen bg-gray-100 dark:bg-gray-900 flex items-center justify-center py-12 px-4 sm:px-6 lg:px-8">
  <div class="max-w-4xl w-full space-y-8 bg-white dark:bg-gray-800 p-8 rounded-lg shadow-xl relative overflow-hidden">
    <!-- Decorative 3D elements (subtle) -->
    <div class="absolute inset-0 pointer-events-none opacity-10 dark:opacity-5">
      <div class="absolute top-0 left-0 w-32 h-32 bg-gradient-to-br from-gray-300 to-gray-400 dark:from-gray-700 dark:to-gray-600 rounded-full mix-blend-multiply filter blur-xl transform -translate-x-1/2 -translate-y-1/2"></div>
      <div class="absolute bottom-0 right-0 w-48 h-48 bg-gradient-to-tl from-gray-200 to-gray-300 dark:from-gray-600 dark:to-gray-700 rounded-full mix-blend-multiply filter blur-xl transform translate-x-1/2 translate-y-1/2"></div>
    </div>

    <div class="relative z-10 text-center">
      <h2 class="text-3xl font-extrabold text-gray-900 dark:text-gray-100 sm:text-4xl">
        Precision Engineering Solutions
      </h2>
      <p class="mt-4 text-lg text-gray-600 dark:text-gray-400">
        Delivering robust and reliable solutions for the modern industrial landscape.
      </p>
    </div>

    <div class="relative z-10 grid grid-cols-1 md:grid-cols-2 gap-8 mt-10">
      <!-- Feature 1 -->
      <div class="bg-gray-50 dark:bg-gray-700 p-6 rounded-lg shadow-md hover:shadow-lg transition-shadow duration-300 transform hover:-translate-y-1 relative group overflow-hidden">
        <div class="absolute inset-0 bg-gradient-to-br from-gray-200 to-gray-300 dark:from-gray-600 dark:to-gray-700 rounded-lg opacity-0 group-hover:opacity-20 transition-opacity duration-300"></div>
        <div class="relative z-10">
          <div class="flex items-center justify-center w-12 h-12 bg-gray-300 dark:bg-gray-600 rounded-full mb-4 mx-auto">
            <svg class="h-6 w-6 text-gray-700 dark:text-gray-200" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1m.364 6.364l-.707-.707M12 20v1m-6.364-1.636l-.707.707M3 12H2m1.636-6.364l.707-.707M19 12a7 7 0 11-14 0 7 7 0 0114 0z"></path>
            </svg>
          </div>
          <h3 class="text-xl font-semibold text-gray-800 dark:text-gray-100 mb-2 text-center">Advanced Robotics</h3>
          <p class="text-gray-600 dark:text-gray-400 text-center">
            Automating manufacturing processes with cutting-edge robotic systems for unmatched efficiency.
          </p>
        </div>
      </div>

      <!-- Feature 2 -->
      <div class="bg-gray-50 dark:bg-gray-700 p-6 rounded-lg shadow-md hover:shadow-lg transition-shadow duration-300 transform hover:-translate-y-1 relative group overflow-hidden">
        <div class="absolute inset-0 bg-gradient-to-br from-gray-200 to-gray-300 dark:from-gray-600 dark:to-gray-700 rounded-lg opacity-0 group-hover:opacity-20 transition-opacity duration-300"></div>
        <div class="relative z-10">
          <div class="flex items-center justify-center w-12 h-12 bg-gray-300 dark:bg-gray-600 rounded-full mb-4 mx-auto">
            <svg class="h-6 w-6 text-gray-700 dark:text-gray-200" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37a1.724 1.724 0 002.572-1.065z" />
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
            </svg>
          </div>
          <h3 class="text-xl font-semibold text-gray-800 dark:text-gray-100 mb-2 text-center">Quality Control</h3>
          <p class="text-gray-600 dark:text-gray-400 text-center">
            Implementing rigorous quality assurance protocols to ensure every product meets global standards.
          </p>
        </div>
      </div>
    </div>

    <div class="relative z-10 pt-8 text-center">
      <a href="#" class="inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-md shadow-sm text-white bg-gray-600 hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500 dark:bg-gray-500 dark:hover:bg-gray-600 dark:focus:ring-gray-400 transition-colors duration-300 transform hover:-translate-y-0.5 hover:scale-105">
        Learn More
        <svg class="ml-3 -mr-1 h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
          <path fill-rule="evenodd" d="M10.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L12.586 11H5a1 1 0 110-2h7.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd" />
        </svg>
      </a>
    </div>
  </div>
</div>

Memphis_Muted_Consulting_Content_Display

A content display component for consulting/services, inspired by Memphis design with muted colors and geometric patterns. Responsive with dark mode support.

Open Preview

                <div class="font-sans antialiased bg-gray-50 dark:bg-gray-900 text-gray-800 dark:text-gray-200 p-4 sm:p-8 md:p-12 lg:p-16 relative overflow-hidden">

  <!-- Memphis-inspired background shapes -->
  <div class="absolute inset-0 overflow-hidden pointer-events-none opacity-20 dark:opacity-10">
    <div class="absolute top-1/4 left-1/4 w-48 h-48 sm:w-64 sm:h-64 bg-fuchsia-300 dark:bg-fuchsia-700 transform rotate-45 rounded-xl"></div>
    <div class="absolute bottom-1/3 right-1/4 w-32 h-32 sm:w-48 sm:h-48 bg-teal-300 dark:bg-teal-700 transform -rotate-12 rounded-full"></div>
    <div class="absolute top-1/2 left-0 w-24 h-24 sm:w-32 sm:h-32 bg-yellow-300 dark:bg-yellow-700 transform rotate-70 rounded-lg"></div>
    <div class="absolute bottom-0 right-0 w-56 h-56 sm:w-72 sm:h-72 bg-purple-300 dark:bg-purple-700 transform -skew-x-12 rounded-2xl"></div>
  </div>

  <div class="max-w-7xl mx-auto relative z-10">
    <header class="text-center mb-12 lg:mb-16">
      <h1 class="text-4xl sm:text-5xl md:text-6xl font-extrabold leading-tight tracking-tight mb-4 text-gray-900 dark:text-gray-50">
        <span class="block">Strategic Consulting</span>
        <span class="block text-teal-600 dark:text-teal-400">for Growth</span>
      </h1>
      <p class="text-lg sm:text-xl md:text-2xl font-medium text-gray-600 dark:text-gray-300 max-w-3xl mx-auto">
        Empowering businesses with tailored insights and actionable strategies to navigate complex challenges and achieve sustainable success.
      </p>
    </header>

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

      <!-- Service Card 1 -->
      <div class="bg-white dark:bg-gray-800 rounded-3xl shadow-xl hover:shadow-2xl transition-all duration-300 ease-in-out border-4 border-fuchsia-300 dark:border-fuchsia-700 overflow-hidden">
        <img src="https://picsum.photos/id/157/600/400" alt="Strategy Development" class="w-full h-48 object-cover rounded-t-2xl">
        <div class="p-6">
          <h3 class="text-2xl font-bold mb-3 text-teal-700 dark:text-teal-300">Strategy Development</h3>
          <p class="text-gray-700 dark:text-gray-300 leading-relaxed mb-4">Crafting robust strategic roadmaps for market leadership and competitive advantage.</p>
          <ul class="list-none space-y-2 text-gray-600 dark:text-gray-400 mb-6">
            <li class="flex items-center"><svg class="w-5 h-5 text-fuchsia-500 dark:text-fuchsia-400 mr-2" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg>Market Entry Analysis</li>
            <li class="flex items-center"><svg class="w-5 h-5 text-fuchsia-500 dark:text-fuchsia-400 mr-2" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg>Growth Planning</li>
            <li class="flex items-center"><svg class="w-5 h-5 text-fuchsia-500 dark:text-fuchsia-400 mr-2" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg>Competitive Analysis</li>
          </ul>
          <a href="#" class="inline-block px-6 py-3 bg-fuchsia-400 dark:bg-fuchsia-600 text-white font-semibold rounded-full shadow-md hover:bg-fuchsia-500 dark:hover:bg-fuchsia-700 transition-colors duration-300 animate-pulse-md">Learn More</a>
        </div>
      </div>

      <!-- Service Card 2 -->
      <div class="bg-white dark:bg-gray-800 rounded-3xl shadow-xl hover:shadow-2xl transition-all duration-300 ease-in-out border-4 border-teal-300 dark:border-teal-700 overflow-hidden">
        <img src="https://picsum.photos/id/160/600/400" alt="Operational Efficiency" class="w-full h-48 object-cover rounded-t-2xl">
        <div class="p-6">
          <h3 class="text-2xl font-bold mb-3 text-purple-700 dark:text-purple-300">Operational Efficiency</h3>
          <p class="text-gray-700 dark:text-gray-300 leading-relaxed mb-4">Optimizing internal processes for enhanced productivity and cost reduction.</p>
          <ul class="list-none space-y-2 text-gray-600 dark:text-gray-400 mb-6">
            <li class="flex items-center"><svg class="w-5 h-5 text-teal-500 dark:text-teal-400 mr-2" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg>Process Re-engineering</li>
            <li class="flex items-center"><svg class="w-5 h-5 text-teal-500 dark:text-teal-400 mr-2" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg>Supply Chain Optimization</li>
            <li class="flex items-center"><svg class="w-5 h-5 text-teal-500 dark:text-teal-400 mr-2" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg>Tech Integration</li>
          </ul>
          <a href="#" class="inline-block px-6 py-3 bg-teal-400 dark:bg-teal-600 text-white font-semibold rounded-full shadow-md hover:bg-teal-500 dark:hover:bg-teal-700 transition-colors duration-300">Explore Solutions</a>
        </div>
      </div>

      <!-- Service Card 3 -->
      <div class="bg-white dark:bg-gray-800 rounded-3xl shadow-xl hover:shadow-2xl transition-all duration-300 ease-in-out border-4 border-yellow-300 dark:border-yellow-700 overflow-hidden">
        <img src="https://picsum.photos/id/156/600/400" alt="Digital Transformation" class="w-full h-48 object-cover rounded-t-2xl">
        <div class="p-6">
          <h3 class="text-2xl font-bold mb-3 text-fuchsia-700 dark:text-fuchsia-300">Digital Transformation</h3>
          <p class="text-gray-700 dark:text-gray-300 leading-relaxed mb-4">Guiding businesses through successful digital adoption and innovation.</p>
          <ul class="list-none space-y-2 text-gray-600 dark:text-gray-400 mb-6">
            <li class="flex items-center"><svg class="w-5 h-5 text-yellow-500 dark:text-yellow-400 mr-2" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg>Cloud Adoption</li>
            <li class="flex items-center"><svg class="w-5 h-5 text-yellow-500 dark:text-yellow-400 mr-2" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg>AI & Automation</li>
            <li class="flex items-center"><svg class="w-5 h-5 text-yellow-500 dark:text-yellow-400 mr-2" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg>Data Analytics</li>
          </ul>
          <a href="#" class="inline-block px-6 py-3 bg-yellow-400 dark:bg-yellow-600 text-white font-semibold rounded-full shadow-md hover:bg-yellow-500 dark:hover:bg-yellow-700 transition-colors duration-300 animate-pulse-md">Discover More</a>
        </div>
      </div>

    </section>

    <section class="bg-gray-100 dark:bg-gray-800 rounded-3xl p-8 sm:p-10 lg:p-12 mb-12 lg:mb-16 border-4 border-purple-300 dark:border-purple-700 relative overflow-hidden">
      <!-- Abstract Shape for Memphis feel -->
      <div class="absolute top-0 -left-8 w-32 h-32 bg-teal-200 dark:bg-teal-800 rounded-full opacity-40 mix-blend-multiply dark:mix-blend-screen transform -rotate-12"></div>
      <div class="absolute bottom-0 -right-8 w-48 h-48 bg-fuchsia-200 dark:bg-fuchsia-800 rounded-tl-full rounded-br-full opacity-40 mix-blend-multiply dark:mix-blend-screen transform rotate-34"></div>

      <h2 class="text-3xl sm:text-4xl font-extrabold text-center mb-8 text-gray-900 dark:text-gray-50">
        Why Partner With Us?
      </h2>
      <div class="grid grid-cols-1 md:grid-cols-3 gap-6 text-center">
        <div class="p-4">
          <div class="text-5xl mb-4 text-fuchsia-600 dark:text-fuchsia-400 drop-shadow-lg">✨</div>
          <h3 class="text-xl font-semibold mb-2 text-gray-800 dark:text-gray-100">Tailored Solutions</h3>
          <p class="text-gray-600 dark:text-gray-300">Custom strategies designed to fit your unique business needs.</p>
        </div>
        <div class="p-4">
          <div class="text-5xl mb-4 text-teal-600 dark:text-teal-400 drop-shadow-lg">📈</div>
          <h3 class="text-xl font-semibold mb-2 text-gray-800 dark:text-gray-100">Proven Results</h3>
          <p class="text-gray-600 dark:text-gray-300">A track record of driving significant and measurable growth for our clients.</p>
        </div>
        <div class="p-4">
          <div class="text-5xl mb-4 text-yellow-600 dark:text-yellow-400 drop-shadow-lg">🤝</div>
          <h3 class="text-xl font-semibold mb-2 text-gray-800 dark:text-gray-100">Expert Team</h3>
          <p class="text-gray-600 dark:text-gray-300">Access to seasoned consultants with diverse industry expertise.</p>
        </div>
      </div>
    </section>

    <section class="text-center bg-purple-100 dark:bg-purple-900 rounded-3xl p-8 sm:p-10 lg:p-12 border-4 border-fuchsia-300 dark:border-fuchsia-700 relative overflow-hidden">
      <!-- Abstract Shape for Memphis feel -->
      <div class="absolute top-1/2 left-0 w-24 h-24 bg-yellow-200 dark:bg-yellow-800 rounded-full opacity-40 mix-blend-multiply dark:mix-blend-screen transform translate-x-1/2 -translate-y-1/2"></div>
      <div class="absolute bottom-0 right-1/4 w-32 h-32 bg-teal-200 dark:bg-teal-800 transform skew-y-12 opacity-40 mix-blend-multiply dark:mix-blend-screen"></div>

      <h2 class="text-3xl sm:text-4xl font-extrabold mb-6 text-gray-900 dark:text-gray-50">
        Ready to Transform Your Business?
      </h2>
      <p class="text-lg sm:text-xl text-gray-700 dark:text-gray-300 mb-8 max-w-2xl mx-auto">
        Let's discuss how our consulting services can propel your business forward.
      </p>
      <a href="#contact" class="inline-flex items-center px-8 py-4 bg-purple-500 dark:bg-purple-700 text-white text-xl font-bold rounded-full shadow-lg hover:bg-purple-600 dark:hover:bg-purple-800 transition-colors duration-300 transform hover:scale-105 active:scale-95 animate-jump-and-pulse shadow-purple-400/50 dark:shadow-purple-900/50">
        Get in Touch
        <svg class="ml-3 w-6 h-6" 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="M14 5l7 7m0 0l-7 7m7-7H3"></path></svg>
      </a>
    </section>

  </div>
</div>

<!-- Custom Keyframes (usually in CSS file but added here for isolated component) -->
<style>
  @keyframes pulse-md {
    0%, 100% { box-shadow: 0 0 0 0 rgba(192, 132, 252, 0.4); }
    50% { box-shadow: 0 0 0 8px rgba(192, 132, 252, 0); }
  }
  @keyframes jump-and-pulse {
    0%, 100% { transform: translateY(0) scale(1); box-shadow: 0 4px 14px rgba(168, 85, 247, 0.3); }
    50% { transform: translateY(-5px) scale(1.02); box-shadow: 0 8px 20px rgba(168, 85, 247, 0.6); }
  }
  .animate-pulse-md {
    animation: pulse-md 2s infinite ease-in-out;
    animation-delay: 0.5s; /* Staggering the animation a bit */
  }
  .animate-jump-and-pulse {
    animation: jump-and-pulse 2s infinite ease-in-out;
    animation-delay: 0.8s; /* Staggering the animation a bit */
  }
</style>

Material Design Content Card for Education

A simple, responsive content card designed with Material Design principles, corporate blue color scheme, and dark mode support, suitable for educational platforms.

Open Preview

                <div class="p-4 sm:p-6 lg:p-8 bg-gray-100 dark:bg-gray-900 min-h-screen flex items-center justify-center font-sans">
  <div class="max-w-sm mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden transition-all duration-300 hover:shadow-xl">
    <!-- Card Header with Image -->
    <div class="relative">
      <img class="w-full h-40 object-cover" src="https://picsum.photos/400/250?random=1" alt="Course Thumbnail">
      <div class="absolute bottom-0 left-0 right-0 p-4 bg-gradient-to-t from-black to-transparent">
        <h3 class="text-xl font-bold text-white leading-tight">Introduction to Web Development</h3>
      </div>
    </div>

    <!-- Card Content -->
    <div class="p-4 flex flex-col gap-3">
      <p class="text-gray-700 dark:text-gray-300 text-sm leading-relaxed">
        Learn the fundamentals of HTML, CSS, and JavaScript to build your first websites. This course is perfect for beginners.
      </p>

      <div class="flex items-center justify-between text-sm text-gray-600 dark:text-gray-400">
        <div class="flex items-center gap-1">
          <svg class="w-4 h-4 text-blue-500" 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 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l3 3a1 1 0 001.414-1.414L11 9.586V6z" clip-rule="evenodd"></path></svg>
          <span>2h 30m</span>
        </div>
        <div class="flex items-center gap-1">
          <svg class="w-4 h-4 text-blue-500" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M2 10a8 8 0 018-8v8h8a8 8 0 01-8 8v-8H2z"></path><path d="M12 2.252A8.014 8.014 0 0117.748 8H12V2.252z"></path></svg>
          <span>5 Modules</span>
        </div>
      </div>
    </div>

    <!-- Card Footer with Action Button -->
    <div class="px-4 py-3 bg-gray-50 dark:bg-gray-700 flex justify-end">
      <button class="px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white font-medium rounded-md shadow transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 dark:focus:ring-offset-gray-800">
        Start Course
      </button>
    </div>
  </div>
</div>

Retro E-commerce Product Card Display

A complex, responsive e-commerce product display component with a retro/vintage 80s/90s aesthetic, featuring a purple/violet color scheme, interactive elements, and dark mode support.

Open Preview

                <div class="font-mono min-h-screen bg-gradient-to-br from-purple-100 via-pink-100 to-indigo-100 text-purple-800 dark:from-purple-900 dark:via-blue-900 dark:to-indigo-900 dark:selection:bg-cyan-400 dark:text-purple-100 p-4 sm:p-8 flex items-center justify-center">
  <div class="container mx-auto p-4 sm:p-8 bg-purple-200 dark:bg-purple-800 rounded-lg shadow-2xl border-4 border-indigo-500 dark:border-indigo-400 transform skew-y-1 shadow-purple-500/50 dark:shadow-purple-900/50">
    <div class="mb-8 text-center -skew-y-1">
      <h1 class="text-4xl sm:text-5xl lg:text-6xl font-extrabold mb-2 text-indigo-700 dark:text-indigo-300 tracking-wider uppercase drop-shadow-lg [text-shadow:_4px_4px_rgb(109_40_217_/_50%)] dark:[text-shadow:_4px_4px_rgb(99_102_241_/_30%)]">
        80s VIBE SHOP
      </h1>
      <p class="text-xl sm:text-2xl text-purple-600 dark:text-purple-300 font-semibold mb-6 italic">Unbox the Future, One Pixel at a Time</p>
    </div>

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

      <!-- Product Card 1 -->
      <div class="bg-purple-300 dark:bg-purple-700 rounded-lg p-6 shadow-xl border-4 border-indigo-400 dark:border-indigo-500 relative overflow-hidden transform hover:scale-105 transition-transform duration-300 cube-effect">
        <div class="absolute inset-0 bg-gradient-to-br from-indigo-400/30 to-purple-400/30 dark:from-indigo-600/30 dark:to-purple-600/30 opacity-0 hover:opacity-100 transition-opacity duration-300 flex items-center justify-center text-white text-3xl font-bold cursor-pointer z-10">
          <span class="animate-pulse">BUY NOW!</span>
        </div>
        <div class="relative z-20">
          <div class="mb-4 overflow-hidden rounded-md border-2 border-purple-500 dark:border-purple-300 group-hover:filter group-hover:brightness-110">
            <img src="https://picsum.photos/id/1043/400/300" alt="Product Image" class="w-full h-48 object-cover rounded-md transform transition-transform duration-300 hover:scale-110 pulse-glow">
          </div>
          <h2 class="text-2xl font-bold text-indigo-700 dark:text-indigo-300 mb-2 truncate">RETRO GAMER DX</h2>
          <p class="text-purple-700 dark:text-purple-200 mb-4 line-clamp-3">Experience the thrill of classic gaming with this reimagined retro console! Comes with 100+ pre-installed games. Limited Edition purple variant!</p>
          <div class="flex justify-between items-center mb-4">
            <span class="text-3xl font-extrabold text-pink-600 dark:text-pink-400 drop-shadow-md">$89.99</span>
            <div class="flex items-center space-x-1 text-yellow-500 dark:text-yellow-400">
              <svg class="w-5 h-5 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279l-7.416-3.908-7.417 3.908 1.481-8.279-6.064-5.828 8.332-1.151z"/></svg>
              <svg class="w-5 h-5 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279l-7.416-3.908-7.417 3.908 1.481-8.279-6.064-5.828 8.332-1.151z"/></svg>
              <svg class="w-5 h-5 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279l-7.416-3.908-7.417 3.908 1.481-8.279-6.064-5.828 8.332-1.151z"/></svg>
              <svg class="w-5 h-5 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279l-7.416-3.908-7.417 3.908 1.481-8.279-6.064-5.828 8.332-1.151z"/></svg>
              <svg class="w-5 h-5 fill-current text-gray-400 dark:text-gray-600" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279l-7.416-3.908-7.417 3.908 1.481-8.279-6.064-5.828 8.332-1.151z"/></svg>
            </div>
          </div>
          <div class="flex flex-col sm:flex-row space-y-2 sm:space-y-0 sm:space-x-2">
            <button class="flex-1 bg-indigo-600 hover:bg-indigo-700 text-white font-bold py-3 px-4 rounded-md focus:outline-none focus:shadow-outline transform hover:scale-105 duration-200 shadow-lg shadow-indigo-500/50 dark:shadow-indigo-700/50 btn-glow">
              Add to Cart
            </button>
            <button class="flex-1 bg-purple-500 hover:bg-purple-600 text-white font-bold py-3 px-4 rounded-md focus:outline-none focus:shadow-outline transform hover:scale-105 duration-200 shadow-lg shadow-purple-500/50 dark:shadow-purple-700/50 btn-glow">
              Details
            </button>
          </div>
        </div>
      </div>

      <!-- Product Card 2 -->
      <div class="bg-purple-300 dark:bg-purple-700 rounded-lg p-6 shadow-xl border-4 border-indigo-400 dark:border-indigo-500 relative overflow-hidden transform hover:scale-105 transition-transform duration-300 cube-effect">
        <div class="absolute inset-0 bg-gradient-to-br from-indigo-400/30 to-purple-400/30 dark:from-indigo-600/30 dark:to-purple-600/30 opacity-0 hover:opacity-100 transition-opacity duration-300 flex items-center justify-center text-white text-3xl font-bold cursor-pointer z-10">
          <span class="animate-pulse">BUY NOW!</span>
        </div>
        <div class="relative z-20">
          <div class="mb-4 overflow-hidden rounded-md border-2 border-purple-500 dark:border-purple-300">
            <img src="https://picsum.photos/id/338/400/300" alt="Product Image" class="w-full h-48 object-cover rounded-md transform transition-transform duration-300 hover:scale-110 pulse-glow">
          </div>
          <h2 class="text-2xl font-bold text-indigo-700 dark:text-indigo-300 mb-2 truncate">CYBERPUNK HEADPHONES</h2>
          <p class="text-purple-700 dark:text-purple-200 mb-4 line-clamp-3">Immerse yourself in a world of pure sound. Neon light accents, booming bass, and comfortable earcups for all-day listening.</p>
          <div class="flex justify-between items-center mb-4">
            <span class="text-3xl font-extrabold text-pink-600 dark:text-pink-400 drop-shadow-md">$129.00</span>
            <div class="flex items-center space-x-1 text-yellow-500 dark:text-yellow-400">
              <svg class="w-5 h-5 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279l-7.416-3.908-7.417 3.908 1.481-8.279-6.064-5.828 8.332-1.151z"/></svg>
              <svg class="w-5 h-5 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279l-7.416-3.908-7.417 3.908 1.481-8.279-6.064-5.828 8.332-1.151z"/></svg>
              <svg class="w-5 h-5 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279l-7.416-3.908-7.417 3.908 1.481-8.279-6.064-5.828 8.332-1.151z"/></svg>
              <svg class="w-5 h-5 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279l-7.416-3.908-7.417 3.908 1.481-8.279-6.064-5.828 8.332-1.151z"/></svg>
              <svg class="w-5 h-5 fill-current text-yellow-500 dark:text-yellow-400 opacity-50" viewBox="0 0 24 24"><path d="M12 0l-3.09 6.26-6.91.99 5 4.88-1.18 6.91L12 18.23l6.23 3.28-1.18-6.91 5-4.88-6.91-.99L12 0z"/></svg>
            </div>
          </div>
          <div class="flex flex-col sm:flex-row space-y-2 sm:space-y-0 sm:space-x-2">
            <button class="flex-1 bg-indigo-600 hover:bg-indigo-700 text-white font-bold py-3 px-4 rounded-md focus:outline-none focus:shadow-outline transform hover:scale-105 duration-200 shadow-lg shadow-indigo-500/50 dark:shadow-indigo-700/50 btn-glow">
              Add to Cart
            </button>
            <button class="flex-1 bg-purple-500 hover:bg-purple-600 text-white font-bold py-3 px-4 rounded-md focus:outline-none focus:shadow-outline transform hover:scale-105 duration-200 shadow-lg shadow-purple-500/50 dark:shadow-purple-700/50 btn-glow">
              Details
            </button>
          </div>
        </div>
      </div>

      <!-- Product Card 3 -->
      <div class="bg-purple-300 dark:bg-purple-700 rounded-lg p-6 shadow-xl border-4 border-indigo-400 dark:border-indigo-500 relative overflow-hidden transform hover:scale-105 transition-transform duration-300 cube-effect">
        <div class="absolute inset-0 bg-gradient-to-br from-indigo-400/30 to-purple-400/30 dark:from-indigo-600/30 dark:to-purple-600/30 opacity-0 hover:opacity-100 transition-opacity duration-300 flex items-center justify-center text-white text-3xl font-bold cursor-pointer z-10">
          <span class="animate-pulse">BUY NOW!</span>
        </div>
        <div class="relative z-20">
          <div class="mb-4 overflow-hidden rounded-md border-2 border-purple-500 dark:border-purple-300">
            <img src="https://picsum.photos/id/296/400/300" alt="Product Image" class="w-full h-48 object-cover rounded-md transform transition-transform duration-300 hover:scale-110 pulse-glow">
          </div>
          <h2 class="text-2xl font-bold text-indigo-700 dark:text-indigo-300 mb-2 truncate">NEON CITY POSTER</h2>
          <p class="text-purple-700 dark:text-purple-200 mb-4 line-clamp-3">Illuminate your living space with this vibrant, high-quality art print. Featuring a quintessential 80s cityscape at dusk.</p>
          <div class="flex justify-between items-center mb-4">
            <span class="text-3xl font-extrabold text-pink-600 dark:text-pink-400 drop-shadow-md">$29.50</span>
            <div class="flex items-center space-x-1 text-yellow-500 dark:text-yellow-400">
              <svg class="w-5 h-5 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279l-7.416-3.908-7.417 3.908 1.481-8.279-6.064-5.828 8.332-1.151z"/></svg>
              <svg class="w-5 h-5 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279l-7.416-3.908-7.417 3.908 1.481-8.279-6.064-5.828 8.332-1.151z"/></svg>
              <svg class="w-5 h-5 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279l-7.416-3.908-7.417 3.908 1.481-8.279-6.064-5.828 8.332-1.151z"/></svg>
              <svg class="w-5 h-5 fill-current text-gray-400 dark:text-gray-600" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279l-7.416-3.908-7.417 3.908 1.481-8.279-6.064-5.828 8.332-1.151z"/></svg>
              <svg class="w-5 h-5 fill-current text-gray-400 dark:text-gray-600" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279l-7.416-3.908-7.417 3.908 1.481-8.279-6.064-5.828 8.332-1.151z"/></svg>
            </div>
          </div>
          <div class="flex flex-col sm:flex-row space-y-2 sm:space-y-0 sm:space-x-2">
            <button class="flex-1 bg-indigo-600 hover:bg-indigo-700 text-white font-bold py-3 px-4 rounded-md focus:outline-none focus:shadow-outline transform hover:scale-105 duration-200 shadow-lg shadow-indigo-500/50 dark:shadow-indigo-700/50 btn-glow">
              Add to Cart
            </button>
            <button class="flex-1 bg-purple-500 hover:bg-purple-600 text-white font-bold py-3 px-4 rounded-md focus:outline-none focus:shadow-outline transform hover:scale-105 duration-200 shadow-lg shadow-purple-500/50 dark:shadow-purple-700/50 btn-glow">
              Details
            </button>
          </div>
        </div>
      </div>

    </div>

    <div class="mt-12 text-center -skew-y-1">
      <p class="text-lg sm:text-xl text-purple-600 dark:text-purple-300 font-semibold italic">Ready to step back into the future?</p>
      <button class="mt-4 inline-block bg-pink-500 hover:bg-pink-600 text-white font-bold py-3 px-8 rounded-full shadow-lg shadow-pink-500/50 dark:shadow-pink-700/50 uppercase tracking-wide transform hover:scale-105 duration-300 focus:outline-none focus:ring-4 focus:ring-pink-300 dark:focus:ring-pink-700 btn-glow">
        Browse All Products
        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 inline-block ml-2 -mt-1" viewBox="0 0 20 20" fill="currentColor">
          <path fill-rule="evenodd" d="M10.293 15.707a1 1 0 010-1.414L14.586 10l-4.293-4.293a1 1 0 111.414-1.414l5 5a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0z" clip-rule="evenodd" />
          <path fill-rule="evenodd" d="M4.293 15.707a1 1 0 010-1.414L8.586 10 4.293 5.707a1 1 0 011.414-1.414l5 5a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0z" clip-rule="evenodd" />
        </svg>
      </button>
    </div>

    <!-- Decorative elements -->
    <div class="absolute top-4 left-4 w-12 h-12 bg-pink-400 dark:bg-pink-600 rounded-full animate-bounce" style="animation-duration: 3s; animation-delay: 0s;"></div>
    <div class="absolute bottom-4 right-4 w-8 h-8 bg-indigo-400 dark:bg-indigo-600 rounded-full animate-bounce" style="animation-duration: 3s; animation-delay: 1.5s;"></div>
    <div class="absolute top-1/4 right-1/4 w-6 h-6 bg-purple-500 dark:bg-purple-400 rounded-xl transform rotate-45 animate-spin-slow"></div>
    <div class="absolute bottom-1/3 left-1/4 w-10 h-10 bg-cyan-400 dark:bg-cyan-600 rounded-lg transform skew-x-12 animate-float"></div>

  </div>
</div>

<style>
  /* Adding some custom keyframe animations for retro feel */
  @keyframes pulse-glow {
    0%, 100% { box-shadow: 0 0 0px rgba(255, 255, 255, 0); }
    50% { box-shadow: 0 0 15px rgba(236, 72, 153, 0.7), 0 0 30px rgba(168, 85, 247, 0.5); }
  }

  .pulse-glow {
    animation: pulse-glow 3s infinite alternate;
  }

  @keyframes btn-glow {
    0%, 100% { outline: 2px solid transparent; }
    50% { outline: 2px solid theme('colors.purple.400'); outline-offset: 2px; }
  }

  .btn-glow:hover {
    animation: btn-glow 1s infinite alternate;
  }

  @keyframes cube-effect {
    0% { transform: scale(1) rotate(0deg); }
    25% { transform: scale(1.01) rotate(0.5deg); }
    50% { transform: scale(1) rotate(0deg); }
    75% { transform: scale(1.01) rotate(-0.5deg); }
    100% { transform: scale(1) rotate(0deg); }
  }

  .cube-effect {
    box-shadow: 8px 8px 0px theme('colors.indigo.500'), 16px 16px 0px theme('colors.pink.500');
    transition: all 0.3s ease-in-out;
  }

  .dark .cube-effect {
    box-shadow: 8px 8px 0px theme('colors.indigo.700'), 16px 16px 0px theme('colors.pink.700');
  }

  .cube-effect:hover {
    transform: translate(-4px, -4px) scale(1.02);
    box-shadow: 10px 10px 0px theme('colors.indigo.600'), 20px 20px 0px theme('colors.pink.600');
  }
  .dark .cube-effect:hover {
    box-shadow: 10px 10px 0px theme('colors.indigo.800'), 20px 20px 0px theme('colors.pink.800');
  }

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

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

  @keyframes float {
    0% { transform: translateY(0px) rotate(0deg); }
    50% { transform: translateY(-10px) rotate(5deg); }
    100% { transform: translateY(0px) rotate(0deg); }
  }

  .animate-float {
    animation: float 4s ease-in-out infinite;
  }

</style>

Playful Jewel-Tone Photography Content Display

A complex, playful, and fun content display component for a photography portfolio or gallery, featuring bright jewel tones, rounded elements, and responsive design with dark mode support. It showcases multiple interactive elements like featured images, grid layouts, and profile sections.

Open Preview

                <div class="font-sans bg-amber-50 text-emerald-950 dark:bg-zinc-900 dark:text-emerald-100 p-4 sm:p-8 md:p-12 lg:p-16 rounded-3xl shadow-xl border border-amber-200 dark:border-zinc-800 transition-colors duration-300">

  <!-- Header Section -->
  <header class="flex flex-col md:flex-row items-center justify-between mb-12">
    <div class="flex items-center space-x-4 mb-6 md:mb-0">
      <img src="https://randomuser.me/api/portraits/men/88.jpg" alt="Photographer Avatar" class="w-20 h-20 rounded-full object-cover shadow-lg border-4 border-emerald-400 dark:border-emerald-600 animate-bounce-slow">
      <div>
        <h1 class="text-4xl sm:text-5xl lg:text-6xl font-bold text-emerald-800 dark:text-emerald-300 drop-shadow-lg leading-tight">Lens Lullaby</h1>
        <p class="text-xl sm:text-2xl text-emerald-700 dark:text-emerald-400 font-medium">Capturing Joy, One Pixel at a Time</p>
      </div>
    </div>
    <nav class="flex flex-wrap justify-center gap-4 sm:gap-6">
      <a href="#gallery" class="text-lg sm:text-xl font-semibold text-emerald-700 dark:text-emerald-400 hover:text-emerald-900 dark:hover:text-emerald-200 bg-emerald-200 dark:bg-emerald-800 px-5 py-2 rounded-full shadow-md hover:shadow-xl transform hover:scale-105 transition duration-300 ease-in-out">Gallery</a>
      <a href="#about" class="text-lg sm:text-xl font-semibold text-emerald-700 dark:text-emerald-400 hover:text-emerald-900 dark:hover:text-emerald-200 bg-emerald-200 dark:bg-emerald-800 px-5 py-2 rounded-full shadow-md hover:shadow-xl transform hover:scale-105 transition duration-300 ease-in-out">About</a>
      <a href="#contact" class="text-lg sm:text-xl font-semibold text-emerald-700 dark:text-emerald-400 hover:text-emerald-900 dark:hover:text-emerald-200 bg-emerald-200 dark:bg-emerald-800 px-5 py-2 rounded-full shadow-md hover:shadow-xl transform hover:scale-105 transition duration-300 ease-in-out">Contact</a>
    </nav>
  </header>

  <!-- Featured Photo Section -->
  <section class="mb-16 bg-gradient-to-br from-emerald-100 to-teal-100 dark:from-emerald-800 dark:to-teal-900 rounded-3xl p-6 sm:p-8 shadow-2xl animate-pop-in border border-emerald-300 dark:border-teal-700">
    <h2 class="text-3xl sm:text-4xl font-bold text-emerald-800 dark:text-emerald-300 text-center mb-8">Featured Snapshots</h2>
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 auto-rows-fr">
      <div class="relative col-span-1 md:col-span-2 lg:col-span-1 rounded-2xl overflow-hidden shadow-xl group hover:shadow-emerald-500/50 dark:hover:shadow-emerald-700/50 transition-all duration-300 ease-in-out transform hover:scale-102">
        <img src="https://picsum.photos/id/1050/800/600" alt="Featured Photo 1" class="w-full h-96 object-cover object-center transform group-hover:scale-110 transition-all duration-500 ease-in-out brightness-90 group-hover:brightness-100">
        <div class="absolute inset-0 bg-gradient-to-t from-emerald-900 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-end p-6">
          <p class="text-white font-semibold text-lg drop-shadow-lg">Mountain Majesty</p>
        </div>
      </div>
      <div class="relative col-span-1 lg:col-span-1 rounded-2xl overflow-hidden shadow-xl group hover:shadow-emerald-500/50 dark:hover:shadow-emerald-700/50 transition-all duration-300 ease-in-out transform hover:scale-102">
        <img src="https://picsum.photos/id/1018/800/600" alt="Featured Photo 2" class="w-full h-96 object-cover object-center transform group-hover:scale-110 transition-all duration-500 ease-in-out brightness-90 group-hover:brightness-100">
        <div class="absolute inset-0 bg-gradient-to-t from-emerald-900 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-end p-6">
          <p class="text-white font-semibold text-lg drop-shadow-lg">Forest Whispers</p>
        </div>
      </div>
      <div class="relative col-span-1 lg:col-span-1 rounded-2xl overflow-hidden shadow-xl group hover:shadow-emerald-500/50 dark:hover:shadow-emerald-700/50 transition-all duration-300 ease-in-out transform hover:scale-102">
        <img src="https://picsum.photos/id/1003/800/600" alt="Featured Photo 3" class="w-full h-96 object-cover object-center transform group-hover:scale-110 transition-all duration-500 ease-in-out brightness-90 group-hover:brightness-100">
        <div class="absolute inset-0 bg-gradient-to-t from-emerald-900 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-end p-6">
          <p class="text-white font-semibold text-lg drop-shadow-lg">Ocean's Embrace</p>
        </div>
      </div>
    </div>
  </section>

  <!-- Photo Gallery Grid -->
  <section id="gallery" class="mb-16">
    <h2 class="text-3xl sm:text-4xl font-bold text-emerald-800 dark:text-emerald-300 text-center mb-8">Our Charming Gallery</h2>
    <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
      <!-- Photo Card 1 -->
      <div class="bg-rose-100 dark:bg-rose-900 rounded-2xl p-4 shadow-lg hover:shadow-xl transform hover:-translate-y-1 transition-all duration-300 group overflow-hidden border border-rose-300 dark:border-rose-700 cursor-pointer">
        <img src="https://picsum.photos/id/1025/400/300" alt="Gallery Image 1" class="w-full h-40 object-cover rounded-xl mb-4 group-hover:scale-105 transition-transform duration-300">
        <h3 class="font-semibold text-xl text-rose-800 dark:text-rose-200 mb-2">Playful Pup</h3>
        <p class="text-sm text-rose-700 dark:text-rose-300">A furry friend enjoying the sunshine.</p>
      </div>
      <!-- Photo Card 2 -->
      <div class="bg-violet-100 dark:bg-violet-900 rounded-2xl p-4 shadow-lg hover:shadow-xl transform hover:-translate-y-1 transition-all duration-300 group overflow-hidden border border-violet-300 dark:border-violet-700 cursor-pointer">
        <img src="https://picsum.photos/id/1069/400/300" alt="Gallery Image 2" class="w-full h-40 object-cover rounded-xl mb-4 group-hover:scale-105 transition-transform duration-300">
        <h3 class="font-semibold text-xl text-violet-800 dark:text-violet-200 mb-2">Urban Glow</h3>
        <p class="text-sm text-violet-700 dark:text-violet-300">City lights at twilight, a symphony of colors.</p>
      </div>
      <!-- Photo Card 3 -->
      <div class="bg-emerald-100 dark:bg-emerald-900 rounded-2xl p-4 shadow-lg hover:shadow-xl transform hover:-translate-y-1 transition-all duration-300 group overflow-hidden border border-emerald-300 dark:border-emerald-700 cursor-pointer">
        <img src="https://picsum.photos/id/111/400/300" alt="Gallery Image 3" class="w-full h-40 object-cover rounded-xl mb-4 group-hover:scale-105 transition-transform duration-300">
        <h3 class="font-semibold text-xl text-emerald-800 dark:text-emerald-200 mb-2">Nature's Embrace</h3>
        <p class="text-sm text-emerald-700 dark:text-emerald-300">Lush green forest, a peaceful escape.</p>
      </div>
      <!-- Photo Card 4 -->
      <div class="bg-sky-100 dark:bg-sky-900 rounded-2xl p-4 shadow-lg hover:shadow-xl transform hover:-translate-y-1 transition-all duration-300 group overflow-hidden border border-sky-300 dark:border-sky-700 cursor-pointer">
        <img src="https://picsum.photos/id/1084/400/300" alt="Gallery Image 4" class="w-full h-40 object-cover rounded-xl mb-4 group-hover:scale-105 transition-transform duration-300">
        <h3 class="font-semibold text-xl text-sky-800 dark:text-sky-200 mb-2">Desert Harmony</h3>
        <p class="text-sm text-sky-700 dark:text-sky-300">Sand dunes and skies, a timeless landscape.</p>
      </div>
      <!-- Photo Card 5 -->
      <div class="bg-rose-100 dark:bg-rose-900 rounded-2xl p-4 shadow-lg hover:shadow-xl transform hover:-translate-y-1 transition-all duration-300 group overflow-hidden border border-rose-300 dark:border-rose-700 cursor-pointer">
        <img src="https://picsum.photos/id/1043/400/300" alt="Gallery Image 5" class="w-full h-40 object-cover rounded-xl mb-4 group-hover:scale-105 transition-transform duration-300">
        <h3 class="font-semibold text-xl text-rose-800 dark:text-rose-200 mb-2">Bright Bloom</h3>
        <p class="text-sm text-rose-700 dark:text-rose-300">Vibrant flowers in full splendid bloom.</p>
      </div>
      <!-- Photo Card 6 -->
      <div class="bg-violet-100 dark:bg-violet-900 rounded-2xl p-4 shadow-lg hover:shadow-xl transform hover:-translate-y-1 transition-all duration-300 group overflow-hidden border border-violet-300 dark:border-violet-700 cursor-pointer">
        <img src="https://picsum.photos/id/1048/400/300" alt="Gallery Image 6" class="w-full h-40 object-cover rounded-xl mb-4 group-hover:scale-105 transition-transform duration-300">
        <h3 class="font-semibold text-xl text-violet-800 dark:text-violet-200 mb-2">Cozy Corner</h3>
        <p class="text-sm text-violet-700 dark:text-violet-300">A warm, inviting space for quiet moments.</p>
      </div>
      <!-- Photo Card 7 -->
      <div class="bg-emerald-100 dark:bg-emerald-900 rounded-2xl p-4 shadow-lg hover:shadow-xl transform hover:-translate-y-1 transition-all duration-300 group overflow-hidden border border-emerald-300 dark:border-emerald-700 cursor-pointer">
        <img src="https://picsum.photos/id/1039/400/300" alt="Gallery Image 7" class="w-full h-40 object-cover rounded-xl mb-4 group-hover:scale-105 transition-transform duration-300">
        <h3 class="font-semibold text-xl text-emerald-800 dark:text-emerald-200 mb-2">Leafy Green</h3>
        <p class="text-sm text-emerald-700 dark:text-emerald-300">Patterns of nature in close-up.</p>
      </div>
      <!-- Photo Card 8 -->
      <div class="bg-sky-100 dark:bg-sky-900 rounded-2xl p-4 shadow-lg hover:shadow-xl transform hover:-translate-y-1 transition-all duration-300 group overflow-hidden border border-sky-300 dark:border-sky-700 cursor-pointer">
        <img src="https://picsum.photos/id/1000/400/300" alt="Gallery Image 8" class="w-full h-40 object-cover rounded-xl mb-4 group-hover:scale-105 transition-transform duration-300">
        <h3 class="font-semibold text-xl text-sky-800 dark:text-sky-200 mb-2">Rustic Charm</h3>
        <p class="text-sm text-sky-700 dark:text-sky-300">Old world beauty, captured in time.</p>
      </div>
    </div>
  </section>

  <!-- About Section -->
  <section id="about" class="mb-16 bg-gradient-to-bl from-emerald-100 to-sky-100 dark:from-emerald-800 dark:to-sky-900 rounded-3xl p-6 sm:p-8 shadow-2xl animate-fade-in border border-emerald-300 dark:border-sky-700">
    <h2 class="text-3xl sm:text-4xl font-bold text-emerald-800 dark:text-emerald-300 text-center mb-8">Meet the Visionary</h2>
    <div class="flex flex-col md:flex-row items-center md:items-start gap-8">
      <img src="https://randomuser.me/api/portraits/women/90.jpg" alt="Photographer Profile" class="w-48 h-48 rounded-full object-cover shadow-2xl border-6 border-emerald-500 dark:border-emerald-700 flex-shrink-0 animate-spin-slow-reverse">
      <div class="text-center md:text-left">
        <h3 class="text-3xl font-semibold text-emerald-700 dark:text-emerald-400 mb-4">Anya Pixelbloom</h3>
        <p class="text-lg leading-relaxed text-emerald-900 dark:text-emerald-200 mb-4">
          Hello! I'm Anya, a passionate photographer with an eye for the whimsical and joy-filled moments of life. 
          My journey began with a simple point-and-shoot camera and a dream to capture the hidden magic in everyday scenes. 
          From the grand landscapes to the tiniest details, I believe every shot tells a unique story.
        </p>
        <p class="text-lg leading-relaxed text-emerald-900 dark:text-emerald-200">
          My style is a blend of vibrant colors, playful compositions, and a touch of fantasy. I love connecting with my subjects, 
          whether they're people, pets, or places, and bringing out their true essence. Let's create some wonderful memories together!
        </p>
      </div>
    </div>
  </section>

  <!-- Testimonials Section -->
  <section class="mb-16">
    <h2 class="text-3xl sm:text-4xl font-bold text-emerald-800 dark:text-emerald-300 text-center mb-8">Hear the Happy Snaps!</h2>
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
      <div class="bg-amber-100 dark:bg-amber-900 rounded-3xl p-6 shadow-lg transform hover:scale-105 transition-transform duration-300 border border-amber-300 dark:border-amber-700 animate-slide-up">
        <p class="text-lg italic text-amber-800 dark:text-amber-200 mb-4">"Anya's photos radiated pure joy! She captured our family's laughter and love in such a vibrant, authentic way. Every picture is a treasure!"</p>
        <div class="flex items-center space-x-4">
          <img src="https://randomuser.me/api/portraits/women/24.jpg" alt="Client Avatar" class="w-12 h-12 rounded-full object-cover border-2 border-amber-400">
          <div>
            <p class="font-semibold text-amber-900 dark:text-amber-100">Clara & Family</p>
            <p class="text-sm text-amber-700 dark:text-amber-300">Happy Clients</p>
          </div>
        </div>
      </div>
      <div class="bg-teal-100 dark:bg-teal-900 rounded-3xl p-6 shadow-lg transform hover:scale-105 transition-transform duration-300 border border-teal-300 dark:border-teal-700 animate-slide-up animation-delay-200">
        <p class="text-lg italic text-teal-800 dark:text-teal-200 mb-4">"The colors and composition in her landscape shots are breathtaking. Anya truly brings out the magic in every scene. Highly recommend!"</p>
        <div class="flex items-center space-x-4">
          <img src="https://randomuser.me/api/portraits/men/33.jpg" alt="Client Avatar" class="w-12 h-12 rounded-full object-cover border-2 border-teal-400">
          <div>
            <p class="font-semibold text-teal-900 dark:text-teal-100">Leo Explorer</p>
            <p class="text-sm text-teal-700 dark:text-teal-300">Adventure Enthusiast</p>
          </div>
        </div>
      </div>
      <div class="bg-rose-100 dark:bg-rose-900 rounded-3xl p-6 shadow-lg transform hover:scale-105 transition-transform duration-300 border border-rose-300 dark:border-rose-700 animate-slide-up animation-delay-400">
        <p class="text-lg italic text-rose-800 dark:text-rose-200 mb-4">"Professional, fun, and incredibly talented! Anya made our pet photoshoot an absolute blast, and the results were more charming than we imagined."</p>
        <div class="flex items-center space-x-4">
          <img src="https://randomuser.me/api/portraits/women/55.jpg" alt="Client Avatar" class="w-12 h-12 rounded-full object-cover border-2 border-rose-400">
          <div>
            <p class="font-semibold text-rose-900 dark:text-rose-100">Zara & Whiskers</p>
            <p class="text-sm text-rose-700 dark:text-rose-300">Pet Parents</p>
          </div>
        </div>
      </div>
    </div>
  </section>

  <!-- Call to Action / Contact -->
  <section id="contact" class="bg-gradient-to-tr from-emerald-200 to-violet-200 dark:from-emerald-700 dark:to-violet-800 rounded-3xl p-8 sm:p-10 text-center shadow-2xl animate-pulse-light border border-emerald-400 dark:border-violet-700">
    <h2 class="text-3xl sm:text-4xl lg:text-5xl font-bold text-emerald-900 dark:text-emerald-100 mb-6 drop-shadow">Ready to Capture Your Story?</h2>
    <p class="text-xl sm:text-2xl text-emerald-800 dark:text-emerald-200 mb-8 max-w-3xl mx-auto">Let's create some magical moments together! Reach out and tell me about your vision.</p>
    <a href="mailto:[email protected]" class="inline-block bg-emerald-600 hover:bg-emerald-700 dark:bg-emerald-400 dark:hover:bg-emerald-300 text-white dark:text-emerald-900 text-xl sm:text-2xl font-bold px-10 py-4 rounded-full shadow-lg hover:shadow-xl transform hover:scale-105 transition duration-300 ease-in-out border-2 border-emerald-600 dark:border-emerald-400 animate-button-pop">
      Let's Chat!
    </a>
  </section>

  <!-- Custom Keyframe Animations (for demonstration purposes, would be in CSS) -->
  <style>
    @keyframes bounce-slow {
      0%, 100% { transform: translateY(0); }
      50% { transform: translateY(-10px); }
    }
    .animate-bounce-slow {
      animation: bounce-slow 4s infinite ease-in-out;
    }

    @keyframes pop-in {
      0% { opacity: 0; transform: scale(0.9); }
      100% { opacity: 1; transform: scale(1); }
    }
    .animate-pop-in {
      animation: pop-in 0.8s ease-out forwards;
    }

    @keyframes fade-in {
      0% { opacity: 0; }
      100% { opacity: 1; }
    }
    .animate-fade-in {
      animation: fade-in 1s ease-out forwards;
    }

    @keyframes spin-slow-reverse {
      from { transform: rotate(0deg); }
      to { transform: rotate(-360deg); }
    }
    .animate-spin-slow-reverse {
      animation: spin-slow-reverse 60s linear infinite;
    }

    @keyframes slide-up {
      0% { opacity: 0; transform: translateY(20px); }
      100% { opacity: 1; transform: translateY(0); }
    }
    .animate-slide-up {
      animation: slide-up 0.6s ease-out forwards;
    }
    /* Delay variants */
    .animation-delay-200 { animation-delay: 0.2s; }
    .animation-delay-400 { animation-delay: 0.4s; }

    @keyframes pulse-light {
      0%, 100% { box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1); }
      50% { box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25), 0 10px 20px -5px rgba(0, 0, 0, 0.25); }
    }

    .dark .animate-pulse-light {
      animation: pulse-light 3s ease-in-out infinite;
    }


    @keyframes button-pop {
      0%, 100% { transform: scale(1); }
      50% { transform: scale(1.02); }
    }
    .animate-button-pop {
      animation: button-pop 2s infinite ease-in-out;
    }

  </style>

</div>

Property Listing Card - Swiss Pastel

A simple, clean, and responsive property listing card with a Swiss/International typography style and a pastel color scheme, suitable for real estate platforms. Includes dark mode support.

Open Preview

                <div class="p-4 sm:p-6 bg-rose-50 dark:bg-zinc-800 rounded-lg shadow-md max-w-sm mx-auto transition-colors duration-300">
  <div class="relative mb-4 overflow-hidden rounded-md">
    <img src="https://picsum.photos/400/250?random=10" alt="Property Image" class="w-full h-48 object-cover rounded-md transition-transform duration-300 hover:scale-105">
    <div class="absolute bottom-2 left-2 bg-rose-200 dark:bg-zinc-700 text-zinc-800 dark:text-zinc-200 px-3 py-1 rounded-full text-xs font-semibold uppercase opacity-90">
      For Sale
    </div>
  </div>
  <h3 class="text-xl sm:text-2xl font-bold text-zinc-800 dark:text-rose-100 mb-2 truncate">
    Modern City Apartment
  </h3>
  <p class="text-sm text-zinc-600 dark:text-zinc-400 mb-3 truncate">
    123 Main St, Anytown, CA 90210
  </p>

  <div class="grid grid-cols-2 gap-y-2 text-zinc-700 dark:text-zinc-300 text-sm mb-4">
    <div class="flex items-center">
      <svg class="w-4 h-4 mr-2 text-rose-500 dark:text-rose-300" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 14v3m4-3v3m4-3v3M3 21h18M3 10L6 7l9 4 6-3v11H3V10z"></path></svg>
      3 Beds
    </div>
    <div class="flex items-center">
      <svg class="w-4 h-4 mr-2 text-rose-500 dark:text-rose-300" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.25 15.3A4.5 4.5 0 0115.75 21H12a2.25 2.25 0 00-2.25 2.25h-1.5A2.25 2.25 0 016 21H3.75A2.25 2.25 0 011.5 18.75V9A2.25 2.25 0 013.75 6.75h1.5A2.25 2.25 0 007.5 4.5h9A2.25 2.25 0 0119.5 6.75h1.5A2.25 2.25 0 0122.5 9v9.75A4.5 4.5 0 0120.25 15.3z"></path></svg>
      2 Baths
    </div>
    <div class="flex items-center">
      <svg class="w-4 h-4 mr-2 text-rose-500 dark:text-rose-300" 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="M16 12V4zm-4 4V4zm-4 4V4zm-4 4v7h16v-7c0-2-1-4-3-4H7c-2 0-3 2-3 4z"></path></svg>
      1,200 sqft
    </div>
    <div class="flex items-center">
      <svg class="w-4 h-4 mr-2 text-rose-500 dark:text-rose-300" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"></path></svg>
      Central
    </div>
  </div>

  <div class="flex items-center justify-between">
    <p class="text-xl sm:text-2xl font-extrabold text-zinc-900 dark:text-rose-200">
      $350,000
    </p>
    <a href="#" class="inline-flex items-center px-4 py-2 bg-rose-400 dark:bg-rose-600 text-white rounded-md hover:bg-rose-500 dark:hover:bg-rose-700 transition-colors duration-200 text-sm sm:text-base font-semibold">
      Details
      <svg class="w-4 h-4 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.25 8.25L21 12m0 0l-3.75 3.75M21 12H3"></path></svg>
    </a>
  </div>
</div>

Art Deco Content Display Component

A complex, responsive Art Deco-inspired content display component for business/corporate websites, featuring geometric patterns, rich jewel tones, and dark mode support. Includes multiple sections for features, testimonials, and calls to action.

Open Preview

                <div class="font-sans bg-gray-50 text-gray-900 dark:bg-gray-900 dark:text-gray-50 py-16 px-4 sm:px-6 lg:px-8 overflow-hidden">

  <!-- Header Section with Geometric Accent -->
  <div class="relative max-w-7xl mx-auto mb-16 text-center">
    <div class="absolute inset-x-0 top-0 h-1/2 bg-gradient-to-br from-emerald-600 to-teal-700 dark:from-emerald-800 dark:to-teal-900 opacity-20 transform -skew-y-3 z-0"></div>
    <h1 class="relative text-4xl sm:text-5xl lg:text-6xl font-extrabold tracking-tight text-emerald-800 dark:text-emerald-300 mb-4 z-10">
      <span class="block">Elevating Your Vision</span>
      <span class="text-ruby-700 dark:text-ruby-400">With Unrivaled Precision</span>
    </h1>
    <p class="relative mt-4 text-xl text-gray-700 dark:text-gray-300 max-w-3xl mx-auto z-10">
      Discover the cornerstone of modern enterprise with our bespoke solutions, crafted for the discerning business.
    </p>
    <div class="relative w-24 h-1 items-center justify-center mx-auto mt-8 mb-4 bg-sapphire-600 dark:bg-sapphire-400 transform skew-x-12 z-10"></div>
  </div>

  <!-- Main Content Grid -->
  <div class="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-12">

    <!-- Feature Card 1 -->
    <div class="group relative bg-white dark:bg-gray-800 rounded-lg shadow-xl p-8 transform transition duration-500 hover:scale-105 hover:shadow-2xl overflow-hidden animate-fade-in-up">
      <div class="absolute inset-0 bg-gradient-to-br from-emerald-500 to-teal-600 dark:from-emerald-700 dark:to-teal-800 opacity-10 group-hover:opacity-20 transition-opacity duration-300"></div>
      <div class="relative z-10">
        <div class="mx-auto flex h-16 w-16 items-center justify-center rounded-full bg-emerald-600 dark:bg-emerald-500 text-white shadow-lg mb-6 transform -rotate-12 group-hover:rotate-0 transition-transform duration-300">
          <svg class="h-8 w-8" 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.75 12L12 12V17L9.75 17ZM5.75 12L5.75 17L8 17L8 12L5.75 12ZM13.75 12L13.75 17L16 17L16 12L13.75 12ZM19.75 12L19.75 17L22 17L22 12L19.75 12ZM2 10L22 10V4L2 4V10ZM2 2L22 2L22 19L2 19V2Z"></path>
          </svg>
        </div>
        <h3 class="text-2xl font-bold text-emerald-800 dark:text-emerald-300 mb-4">Visionary Strategy</h3>
        <p class="text-gray-700 dark:text-gray-300 leading-relaxed">
          Harness the power of foresight with our cutting-edge strategic insights, tailored to navigate the complexities of tomorrow's market.
        </p>
        <a href="#" class="mt-6 inline-flex items-center text-sapphire-700 dark:text-sapphire-400 font-semibold group-hover:text-sapphire-600 dark:group-hover:text-sapphire-300 transition-colors duration-300">
          Explore More
          <svg class="ml-2 w-4 h-4 transform translate-x-0 group-hover:translate-x-1 transition-transform duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"></path></svg>
        </a>
      </div>
    </div>

    <!-- Feature Card 2 -->
    <div class="group relative bg-white dark:bg-gray-800 rounded-lg shadow-xl p-8 transform transition duration-500 hover:scale-105 hover:shadow-2xl overflow-hidden animate-fade-in-up delay-200">
      <div class="absolute inset-0 bg-gradient-to-br from-sapphire-500 to-indigo-600 dark:from-sapphire-700 dark:to-indigo-800 opacity-10 group-hover:opacity-20 transition-opacity duration-300"></div>
      <div class="relative z-10">
        <div class="mx-auto flex h-16 w-16 items-center justify-center rounded-full bg-sapphire-600 dark:bg-sapphire-500 text-white shadow-lg mb-6 transform rotate-12 group-hover:rotate-0 transition-transform duration-300">
          <svg class="h-8 w-8" 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="M3 6l3 1m0 0l-3 9a5.002 5.002 0 006.007 6.38L21 17l-3-7h4L10 21v-7a5.002 5.002 0 00-6.007-6.38L3 6z"></path>
          </svg>
        </div>
        <h3 class="text-2xl font-bold text-sapphire-800 dark:text-sapphire-300 mb-4">Robust Implementation</h3>
        <p class="text-gray-700 dark:text-gray-300 leading-relaxed">
          From concept to execution, our meticulous implementation ensures seamless integration and unparalleled performance.
        </p>
        <a href="#" class="mt-6 inline-flex items-center text-sapphire-700 dark:text-sapphire-400 font-semibold group-hover:text-sapphire-600 dark:group-hover:text-sapphire-300 transition-colors duration-300">
          Learn How
          <svg class="ml-2 w-4 h-4 transform translate-x-0 group-hover:translate-x-1 transition-transform duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"></path></svg>
        </a>
      </div>
    </div>

    <!-- Feature Card 3 -->
    <div class="group relative bg-white dark:bg-gray-800 rounded-lg shadow-xl p-8 transform transition duration-500 hover:scale-105 hover:shadow-2xl overflow-hidden animate-fade-in-up delay-400">
      <div class="absolute inset-0 bg-gradient-to-br from-ruby-500 to-rose-600 dark:from-ruby-700 dark:to-rose-800 opacity-10 group-hover:opacity-20 transition-opacity duration-300"></div>
      <div class="relative z-10">
        <div class="mx-auto flex h-16 w-16 items-center justify-center rounded-full bg-ruby-600 dark:bg-ruby-500 text-white shadow-lg mb-6 transform -rotate-12 group-hover:rotate-0 transition-transform duration-300">
          <svg class="h-8 w-8" 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-4m5.618-4.504A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.552M12 2.944V3m0 0V19.944m0-16.992a1.5 1.5 0 00-1.5 1.5V11.25a1.5 1.5 0 001.5 1.5 1.5 1.5 0 001.5-1.5V4.444A1.5 1.5 0 0012 2.944zm0 0L21 12M3 12l9 9"></path>
          </svg>
        </div>
        <h3 class="text-2xl font-bold text-ruby-800 dark:text-ruby-300 mb-4">Sustainable Growth</h3>
        <p class="text-gray-700 dark:text-gray-300 leading-relaxed">
          Cultivate lasting success with our growth-oriented strategies, designed for long-term prosperity and market leadership.
        </p>
        <a href="#" class="mt-6 inline-flex items-center text-sapphire-700 dark:text-sapphire-400 font-semibold group-hover:text-sapphire-600 dark:group-hover:text-sapphire-300 transition-colors duration-300">
          Start Growing
          <svg class="ml-2 w-4 h-4 transform translate-x-0 group-hover:translate-x-1 transition-transform duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"></path></svg>
        </a>
      </div>
    </div>
  </div>

  <!-- Testimonial Section -->
  <div class="max-w-7xl mx-auto mt-24">
    <h2 class="text-center text-3xl font-extrabold text-emerald-800 dark:text-emerald-300 mb-12 sm:mb-16">
      What Our Visionaries Say
    </h2>
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-12">

      <!-- Testimonial 1 -->
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-xl p-8 relative flex flex-col md:flex-row items-center md:items-start space-y-6 md:space-y-0 md:space-x-8 animate-fade-in-right">
        <div class="absolute inset-0 bg-gradient-to-br from-sapphire-500 to-indigo-600 dark:from-sapphire-700 dark:to-indigo-800 opacity-10 blur-sm rounded-lg"></div>
        <div class="flex-shrink-0 relative z-10">
          <img class="h-24 w-24 rounded-full object-cover border-4 border-sapphire-400 dark:border-sapphire-600 shadow-md" src="https://randomuser.me/api/portraits/women/68.jpg" alt="Client Avatar">
        </div>
        <div class="relative z-10 text-center md:text-left">
          <p class="text-lg text-gray-700 dark:text-gray-300 italic mb-4 leading-relaxed">“Partnering with them was a paradigm shift. Their meticulous approach led to unprecedented growth and market dominance.”</p>
          <p class="font-bold text-xl text-sapphire-800 dark:text-sapphire-300">Eleanor Vance</p>
          <p class="text-ruby-700 dark:text-ruby-400 text-sm">CEO, Global Innovations Corp.</p>
        </div>
      </div>

      <!-- Testimonial 2 -->
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-xl p-8 relative flex flex-col md:flex-row items-center md:items-start space-y-6 md:space-y-0 md:space-x-8 animate-fade-in-left">
        <div class="absolute inset-0 bg-gradient-to-br from-emerald-500 to-teal-600 dark:from-emerald-700 dark:to-teal-800 opacity-10 blur-sm rounded-lg"></div>
        <div class="flex-shrink-0 relative z-10">
          <img class="h-24 w-24 rounded-full object-cover border-4 border-emerald-400 dark:border-emerald-600 shadow-md" src="https://randomuser.me/api/portraits/men/44.jpg" alt="Client Avatar">
        </div>
        <div class="relative z-10 text-center md:text-left">
          <p class="text-lg text-gray-700 dark:text-gray-300 italic mb-4 leading-relaxed">“Their strategic foresight is unparalleled. We've optimized our operations and expanded our reach beyond expectations.”</p>
          <p class="font-bold text-xl text-emerald-800 dark:text-emerald-300">Julian Thorne</p>
          <p class="text-ruby-700 dark:text-ruby-400 text-sm">CTO, Apex Dynamics</p>
        </div>
      </div>
    </div>
  </div>

  <!-- Call to Action Section -->
  <div class="max-w-7xl mx-auto mt-24 relative overflow-hidden rounded-lg shadow-2xl animate-fade-in-up delay-600">
    <div class="absolute inset-0 bg-gradient-to-br from-ruby-600 to-rose-700 dark:from-ruby-800 dark:to-rose-900 opacity-90"></div>
    <div class="relative z-10 p-12 sm:p-16 lg:flex lg:items-center lg:justify-between">
      <div class="text-center lg:text-left">
        <h2 class="text-3xl sm:text-4xl font-extrabold text-white mb-4">
          Ready to Redefine Your Future?
        </h2>
        <p class="text-xl text-ruby-200 dark:text-ruby-300 max-w-2xl mx-auto lg:mx-0">
          Join the elite who trust our expertise to carve their path to unparalleled success. Your journey begins now.
        </p>
      </div>
      <div class="mt-10 flex flex-col sm:flex-row items-center justify-center lg:mt-0 lg:ml-8 flex-shrink-0 space-y-4 sm:space-y-0 sm:space-x-4">
        <a href="#" class="w-full sm:w-auto px-8 py-4 border border-transparent text-lg font-medium rounded-full shadow-lg text-emerald-900 bg-emerald-300 hover:bg-emerald-200 dark:text-emerald-900 dark:bg-emerald-300 dark:hover:bg-emerald-200 transition-colors duration-300 transform hover:scale-105 active:scale-95">
          Get Started Now
        </a>
        <a href="#" class="w-full sm:w-auto px-8 py-4 border-2 border-white text-lg font-medium rounded-full text-white hover:bg-white hover:text-ruby-700 dark:hover:text-ruby-700 dark:hover:bg-white transition-colors duration-300 transform hover:scale-105 active:scale-95">
          Learn More
        </a>
      </div>
    </div>
  </div>
</div>

<style>
  /* Custom colors for Art Deco palette */
  .text-emerald-800 { color: #065F46; } /* Darker Emerald */
  .dark\:text-emerald-300 { color: #6EE7B7; } /* Lighter Emerald for Dark Mode */
  .bg-emerald-600 { background-color: #059669; }
  .dark\:bg-emerald-500 { background-color: #10B981; }
  .from-emerald-500 { --tw-gradient-from: #10B981; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(16, 185, 129, 0)); }
  .to-teal-600 { --tw-gradient-to: #0D9488; }
  .dark\:from-emerald-700 { --tw-gradient-from: #047857; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(4, 120, 87, 0)); }
  .dark\:to-teal-800 { --tw-gradient-to: #0F766E; }

  .text-sapphire-800 { color: #1E40AF; } /* Darker Sapphire */
  .dark\:text-sapphire-300 { color: #93C5FD; } /* Lighter Sapphire for Dark Mode */
  .bg-sapphire-600 { background-color: #2563EB; }
  .dark\:bg-sapphire-500 { background-color: #3B82F6; }
  .from-sapphire-500 { --tw-gradient-from: #3B82F6; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(59, 130, 246, 0)); }
  .to-indigo-600 { --tw-gradient-to: #4F46E5; }
  .dark\:from-sapphire-700 { --tw-gradient-from: #1D4ED8; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(29, 78, 216, 0)); }
  .dark\:to-indigo-800 { --tw-gradient-to: #3730A3; }

  .text-ruby-700 { color: #B91C1C; } /* Darker Ruby */
  .dark\:text-ruby-400 { color: #F87171; } /* Lighter Ruby for Dark Mode */
  .bg-ruby-600 { background-color: #DC2626; }
  .dark\:bg-ruby-500 { background-color: #EF4444; }
  .from-ruby-500 { --tw-gradient-from: #EF4444; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(239, 68, 68, 0)); }
  .to-rose-600 { --tw-gradient-to: #E11D48; }
  .dark\:from-ruby-700 { --tw-gradient-from: #B91C1C; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(185, 28, 28, 0)); }
  .dark\:to-rose-800 { --tw-gradient-to: #9F1239; }

  .from-emerald-600 { --tw-gradient-from: #059669; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(5, 150, 105, 0)); }
  .dark\:from-emerald-800 { --tw-gradient-from: #065F46; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(6, 95, 70, 0)); }

  /* Animation keyframes */
  @keyframes fade-in-up {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
  }
  @keyframes fade-in-right {
    from { opacity: 0; transform: translateX(-20px); }
    to { opacity: 1; transform: translateX(0); }
  }
  @keyframes fade-in-left {
    from { opacity: 0; transform: translateX(20px); }
    to { opacity: 1; transform: translateX(0); }
  }

  /* Apply animations to elements */
  .animate-fade-in-up { animation: fade-in-up 0.8s ease-out forwards; opacity: 0; /* ensure initial state is hidden */ }
  .delay-200 { animation-delay: 0.2s; }
  .delay-400 { animation-delay: 0.4s; }
  .delay-600 { animation-delay: 0.6s; }
  .animate-fade-in-right { animation: fade-in-right 0.8s ease-out forwards; opacity: 0; }
  .animate-fade-in-left { animation: fade-in-left 0.8s ease-out forwards; opacity: 0; }

  /* Dark mode transition */
  body { transition: background-color 0.3s ease; }
  div, h1, h2, h3, p, a, img { transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, transform 0.3s ease; }
</style>

Search Components

Categories

Content Display Components