검색 구성 요소

카테고리

구성 요소 전자 상거래 구성 요소

전자 상거래 구성 요소

온라인 상점을 위해 특별히 설계된 구성 요소

아르 데코 기하학적 마켓플레이스 제품 카드

멀티벤더 마켓플레이스를 위한 제품 카드 구성 요소로, 아르데코 기하학적 패턴과 그라데이션 무지개 색 구성표로 스타일링되었습니다. 기능에는 반응형 디자인, 다크 모드 지원 및 대화형 요소가 포함됩니다.

                <div class="p-4 sm:p-6 lg:p-8 bg-gray-50 dark:bg-gray-950 min-h-screen font-sans">
  <div class="max-w-xs mx-auto md:max-w-md lg:max-w-lg xl:max-w-xl 2xl:max-w-2xl rounded-2xl overflow-hidden shadow-xl dark:shadow-2xl border-4 border-transparent bg-gradient-to-br from-purple-500 via-pink-500 to-red-500 dark:from-purple-800 dark:via-pink-800 dark:to-red-800 p-1.5 transform transition-transform duration-500 hover:scale-[1.01] animate-gradient-border">
    <div class="bg-white dark:bg-gray-800 rounded-xl relative p-4 sm:p-6 lg:p-8 flex flex-col h-full">

      <!-- Seller Info & Art Deco Border -->
      <div class="absolute inset-0 border-8 border-transparent pointer-events-none rounded-xl">
        <div class="absolute top-0 left-0 w-8 h-8 lg:w-12 lg:h-12 border-t-4 border-l-4 rounded-tl-xl border-indigo-600 dark:border-indigo-400"></div>
        <div class="absolute top-0 right-0 w-8 h-8 lg:w-12 lg:h-12 border-t-4 border-r-4 rounded-tr-xl border-purple-600 dark:border-purple-400"></div>
        <div class="absolute bottom-0 left-0 w-8 h-8 lg:w-12 lg:h-12 border-b-4 border-l-4 rounded-bl-xl border-pink-600 dark:border-pink-400"></div>
        <div class="absolute bottom-0 right-0 w-8 h-8 lg:w-12 lg:h-12 border-b-4 border-r-4 rounded-br-xl border-red-600 dark:border-red-400"></div>
      </div>

      <div class="flex items-center mb-4 sm:mb-5 lg:mb-6 z-10">
        <img class="w-10 h-10 sm:w-12 sm:h-12 rounded-full ring-2 ring-purple-400 dark:ring-purple-600 mr-3" src="https://randomuser.me/api/portraits/men/52.jpg" alt="Seller Avatar">
        <div>
          <p class="text-sm sm:text-base font-semibold text-gray-800 dark:text-gray-100">Artisan Emporium</p>
          <p class="text-xs text-gray-500 dark:text-gray-400">Verified Seller</p>
        </div>
      </div>

      <!-- Product Image -->
      <div class="w-full aspect-w-16 aspect-h-9 relative mb-4 sm:mb-5 lg:mb-6 rounded-lg overflow-hidden border-2 border-gray-200 dark:border-gray-700 shadow-sm">
        <img src="https://picsum.photos/id/111/600/400" alt="Product Image" class="w-full h-full object-cover transition-transform duration-300 hover:scale-105">
        <span class="absolute top-2 right-2 bg-gradient-to-br from-indigo-500 to-purple-500 text-white text-xs px-2.5 py-1 rounded-full font-bold shadow-md">NEW</span>
      </div>

      <!-- Product Details -->
      <h3 class="text-xl sm:text-2xl font-extrabold text-gray-900 dark:text-white mb-2 sm:mb-3 leading-tight gradient-text-effect">
        Geometric Abstract Pendant
      </h3>
      <p class="text-sm sm:text-base text-gray-600 dark:text-gray-300 line-clamp-2 mb-4 sm:mb-5 lg:mb-6">
        Handcrafted Art Deco inspired pendant with intricate geometric patterns, perfect for adding a touch of vintage elegance.
      </p>

      <div class="flex items-center justify-between mb-4 sm:mb-5 lg:mb-6">
        <div class="flex items-baseline">
          <span class="text-2xl sm:text-3xl font-bold text-gray-900 dark:text-white mr-2">$129.99</span>
          <span class="text-sm text-gray-500 dark:text-gray-400 line-through">$149.99</span>
        </div>
        <div class="flex items-center text-yellow-500 dark:text-yellow-400 text-sm sm:text-base">
          <svg class="w-4 h-4 sm:w-5 sm:h-5 mr-1" 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.538 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.565-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.92 8.729c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path>
          </svg>
          <span>4.8</span>
          <span class="text-gray-500 dark:text-gray-400 text-xs sm:text-sm ml-1">(128)</span>
        </div>
      </div>

      <!-- Call to Action Buttons -->
      <div class="mt-auto grid grid-cols-1 sm:grid-cols-2 gap-3 sm:gap-4">
        <button class="flex items-center justify-center px-4 py-2 sm:py-3 border-2 border-transparent rounded-lg font-bold text-base sm:text-lg transition-all duration-300 ease-in-out
                       bg-gradient-to-r from-teal-500 to-cyan-500 text-white shadow-lg 
                       hover:scale-[1.02] hover:shadow-xl focus:outline-none focus:ring-4 focus:ring-teal-300 dark:focus:ring-teal-800">
          <svg class="w-5 h-5 sm:w-6 sm:h-6 mr-2" fill="currentColor" viewBox="0 0 20 20">
            <path d="M3 1a1 1 0 000 2h1.22l.305 1.222a.997.997 0 00.01.042l1.358 5.43-.893.892C3.74 11.846 4.632 14 6.414 14H15a1 1 0 000-2H6.414l1-1H14a1 1 0 00.894-.553l3.056-6.112A1 1 0 0019 3H4.32L4 1H3zM6 16a2 2 0 11-4 0 2 2 0 014 0zM16 16a2 2 0 11-4 0 2 2 0 014 0z"></path>
          </svg>
          Add to Cart
        </button>
        <button class="flex items-center justify-center px-4 py-2 sm:py-3 border-2 rounded-lg font-bold text-base sm:text-lg transition-all duration-300 ease-in-out
                       border-fuchsia-500 text-fuchsia-600 dark:border-fuchsia-400 dark:text-fuchsia-400 
                       hover:bg-fuchsia-50 dark:hover:bg-fuchsia-900 
                       hover:scale-[1.02] hover:shadow-lg focus:outline-none focus:ring-4 focus:ring-fuchsia-300 dark:focus:ring-fuchsia-800">
          <svg class="w-5 h-5 sm:w-6 sm:h-6 mr-2" fill="currentColor" viewBox="0 0 20 20">
            <path fill-rule="evenodd" d="M3.172 5.172a4 4 0 015.656 0L10 6.586l1.172-1.172a4 4 0 115.656 5.656L10 17.656l-6.828-6.828a4 4 0 010-5.656z" clip-rule="evenodd"></path>
          </svg>
          Wishlist
        </button>
      </div>

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

<style>
  @keyframes gradient-border-animation {
    0% { border-color: #a78bfa; }
    25% { border-color: #f472b6; }
    50% { border-color: #ef4444; }
    75% { border-color: #f97316; }
    100% { border-color: #a78bfa; }
  }
  .animate-gradient-border {
    animation: gradient-border-animation 6s ease-in-out infinite alternate;
  }

  .gradient-text-effect {
    background-image: linear-gradient(to right, #6366f1, #a855f7, #ec4899);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-size: 200% auto;
    animation: gradientText 3s ease infinite;
  }

  .dark .gradient-text-effect {
    background-image: linear-gradient(to right, #818cf8, #c084fc, #f472b6);
  }

  @keyframes gradientText {
    0% { background-position: 0% center; }
    50% { background-position: 100% center; }
    100% { background-position: 0% center; }
  }
</style>

Neumorphic_Charity_E-commerce_Component

비영리/자선 단체를 위해 설계된 복잡하고 반응이 빠른 전자 상거래 구성 요소로, 세피아/갈색 색 구성표와 다크 모드를 지원하는 부드러운 뉴모픽 스타일을 특징으로 합니다.

열다 미리 보기

                <div class="min-h-screen bg-gradient-to-br from-stone-200 to-stone-300 p-4 font-sans text-stone-800 transition-colors duration-300 dark:from-stone-900 dark:to-stone-950 dark:text-stone-200 lg:p-8">

  <!-- Section Title (Neumorphic) -->
  <h1 class="mb-8 text-center text-4xl font-extrabold tracking-tight drop-shadow-sm md:text-5xl lg:text-6xl">
    <span class="inline-block rounded-2xl bg-gradient-to-br from-stone-100 to-stone-200 px-6 py-3 shadow-md transition-all duration-300 ease-in-out hover:scale-105 hover:from-stone-50 hover:to-stone-100 dark:from-stone-800 dark:to-stone-900 dark:shadow-stone-950/70 dark:hover:from-stone-700 dark:hover:to-stone-850">
      Support a Cause Today
    </span>
  </h1>

  <!-- Main Grid Layout -->
  <div class="grid gap-6 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">

    <!-- Product Card 1 -->
    <div class="group relative overflow-hidden rounded-3xl bg-gradient-to-br from-stone-100 to-stone-200 leading-tight shadow-lg transition-all duration-300 ease-in-out hover:shadow-xl dark:from-stone-800 dark:to-stone-900 dark:shadow-stone-950/70 dark:hover:shadow-stone-950/90">
      <div class="relative flex h-48 items-center justify-center overflow-hidden rounded-t-2xl bg-gradient-to-br from-stone-300 to-stone-400 shadow-inner dark:from-stone-700 dark:to-stone-800">
        <img src="https://picsum.photos/id/1015/400/300" alt="Education Support" class="h-full w-full object-cover transition-transform duration-300 group-hover:scale-105">
        <div class="absolute inset-0 bg-gradient-to-t from-stone-800/40 via-transparent to-stone-800/10"></div>
      </div>
      <div class="p-6">
        <h3 class="mb-2 text-2xl font-semibold text-stone-800 dark:text-stone-200">Education for All</h3>
        <p class="mb-4 text-sm text-stone-600 dark:text-stone-400">Provide essential learning materials and tuition for underprivileged children.</p>

        <div class="mb-4 flex items-center justify-between">
          <span class="neumorphic-badge-light text-nowrap from-stone-50 to-stone-150 px-3 py-1 text-sm font-medium text-stone-700 dark:from-stone-700 dark:to-stone-850 dark:text-stone-300">
            Goal: $10,000
          </span>
          <span class="neumorphic-badge-light text-nowrap from-stone-50 to-stone-150 px-3 py-1 text-sm font-bold text-stone-700 dark:from-stone-700 dark:to-stone-850 dark:text-stone-300">
            Raised: $6,500
          </span>
        </div>

        <div class="mb-4 h-2 rounded-full bg-stone-300 shadow-inner dark:bg-stone-700">
          <div class="h-full rounded-full bg-gradient-to-r from-amber-600 to-amber-700" style="width: 65%;"></div>
        </div>

        <button class="neumorphic-button-primary w-full">
          Donate Now
        </button>
      </div>
    </div>

    <!-- Product Card 2 -->
    <div class="group relative overflow-hidden rounded-3xl bg-gradient-to-br from-stone-100 to-stone-200 leading-tight shadow-lg transition-all duration-300 ease-in-out hover:shadow-xl dark:from-stone-800 dark:to-stone-900 dark:shadow-stone-950/70 dark:hover:shadow-stone-950/90">
      <div class="relative flex h-48 items-center justify-center overflow-hidden rounded-t-2xl bg-gradient-to-br from-stone-300 to-stone-400 shadow-inner dark:from-stone-700 dark:to-stone-800">
        <img src="https://picsum.photos/id/10/400/300" alt="Healthcare Initiative" class="h-full w-full object-cover transition-transform duration-300 group-hover:scale-105">
        <div class="absolute inset-0 bg-gradient-to-t from-stone-800/40 via-transparent to-stone-800/10"></div>
      </div>
      <div class="p-6">
        <h3 class="mb-2 text-2xl font-semibold text-stone-800 dark:text-stone-200">Health & Wellness</h3>
        <p class="mb-4 text-sm text-stone-600 dark:text-stone-400">Support medical camps and provide essential health services to remote communities.</p>

        <div class="mb-4 flex items-center justify-between">
          <span class="neumorphic-badge-light text-nowrap from-stone-50 to-stone-150 px-3 py-1 text-sm font-medium text-stone-700 dark:from-stone-700 dark:to-stone-850 dark:text-stone-300">
            Goal: $15,000
          </span>
          <span class="neumorphic-badge-light text-nowrap from-stone-50 to-stone-150 px-3 py-1 text-sm font-bold text-stone-700 dark:from-stone-700 dark:to-stone-850 dark:text-stone-300">
            Raised: $12,800
          </span>
        </div>

        <div class="mb-4 h-2 rounded-full bg-stone-300 shadow-inner dark:bg-stone-700">
          <div class="h-full rounded-full bg-gradient-to-r from-amber-600 to-amber-700" style="width: 85%;"></div>
        </div>

        <button class="neumorphic-button-primary w-full">
          Donate Now
        </button>
      </div>
    </div>

    <!-- Product Card 3 -->
    <div class="group relative overflow-hidden rounded-3xl bg-gradient-to-br from-stone-100 to-stone-200 leading-tight shadow-lg transition-all duration-300 ease-in-out hover:shadow-xl dark:from-stone-800 dark:to-stone-900 dark:shadow-stone-950/70 dark:hover:shadow-stone-950/90">
      <div class="relative flex h-48 items-center justify-center overflow-hidden rounded-t-2xl bg-gradient-to-br from-stone-300 to-stone-400 shadow-inner dark:from-stone-700 dark:to-stone-800">
        <img src="https://picsum.photos/id/1043/400/300" alt="Environmental Conservation" class="h-full w-full object-cover transition-transform duration-300 group-hover:scale-105">
        <div class="absolute inset-0 bg-gradient-to-t from-stone-800/40 via-transparent to-stone-800/10"></div>
      </div>
      <div class="p-6">
        <h3 class="mb-2 text-2xl font-semibold text-stone-800 dark:text-stone-200">Environmental Protection</h3>
        <p class="mb-4 text-sm text-stone-600 dark:text-stone-400">Fund reforestation projects and initiatives to protect endangered species.</p>

        <div class="mb-4 flex items-center justify-between">
          <span class="neumorphic-badge-light text-nowrap from-stone-50 to-stone-150 px-3 py-1 text-sm font-medium text-stone-700 dark:from-stone-700 dark:to-stone-850 dark:text-stone-300">
            Goal: $8,000
          </span>
          <span class="neumorphic-badge-light text-nowrap from-stone-50 to-stone-150 px-3 py-1 text-sm font-bold text-stone-700 dark:from-stone-700 dark:to-stone-850 dark:text-stone-300">
            Raised: $4,200
          </span>
        </div>

        <div class="mb-4 h-2 rounded-full bg-stone-300 shadow-inner dark:bg-stone-700">
          <div class="h-full rounded-full bg-gradient-to-r from-amber-600 to-amber-700" style="width: 53%;"></div>
        </div>

        <button class="neumorphic-button-primary w-full">
          Donate Now
        </button>
      </div>
    </div>

    <!-- Product Card 4 (Featured/Highlighted) -->
    <div class="group relative overflow-hidden rounded-3xl bg-gradient-to-br from-amber-500 to-amber-600 text-white shadow-xl ring-4 ring-amber-400 ring-offset-4 ring-offset-stone-200 transition-all duration-300 ease-in-out hover:shadow-2xl dark:ring-offset-stone-900">
      <div class="relative flex h-48 items-center justify-center overflow-hidden rounded-t-2xl bg-gradient-to-br from-amber-700 to-amber-800 shadow-inner">
        <img src="https://picsum.photos/id/351/400/300" alt="Disaster Relief" class="h-full w-full object-cover transition-transform duration-300 group-hover:scale-105">
        <div class="absolute inset-0 bg-gradient-to-t from-black/50 via-transparent to-black/20
"></div>
        <span class="absolute right-4 top-4 rounded-full bg-white/20 px-3 py-1 text-xs font-bold uppercase backdrop-blur-sm">Urgent</span>

      </div>
      <div class="p-6">
        <h3 class="mb-2 text-2xl font-bold text-white">Disaster Relief Fund</h3>
        <p class="mb-4 text-sm text-amber-100">Provide immediate aid and long-term recovery support to communities affected by natural disasters.</p>

        <div class="mb-4 flex items-center justify-between">
          <span class="neumorphic-badge-dark text-nowrap from-amber-700 to-amber-800 px-3 py-1 text-sm font-medium text-amber-100">
            Goal: $20,000
          </span>
          <span class="neumorphic-badge-dark text-nowrap from-amber-700 to-amber-800 px-3 py-1 text-sm font-bold text-amber-100">
            Raised: $18,900
          </span>
        </div>

        <div class="neumorphic-progress-bar-featured mb-4 h-2 rounded-full shadow-inner">
          <div class="h-full rounded-full bg-gradient-to-r from-white to-amber-200" style="width: 94%;"></div>
        </div>

        <button class="neumorphic-button-alt w-full">
          Contribute Now
        </button>
      </div>
    </div>

    <!-- Add more product cards as needed (using the first card's structure) -->
    <div class="group relative overflow-hidden rounded-3xl bg-gradient-to-br from-stone-100 to-stone-200 leading-tight shadow-lg transition-all duration-300 ease-in-out hover:shadow-xl dark:from-stone-800 dark:to-stone-900 dark:shadow-stone-950/70 dark:hover:shadow-stone-950/90">
      <div class="relative flex h-48 items-center justify-center overflow-hidden rounded-t-2xl bg-gradient-to-br from-stone-300 to-stone-400 shadow-inner dark:from-stone-700 dark:to-stone-800">
        <img src="https://picsum.photos/id/1060/400/300" alt="Food Security" class="h-full w-full object-cover transition-transform duration-300 group-hover:scale-105">
        <div class="absolute inset-0 bg-gradient-to-t from-stone-800/40 via-transparent to-stone-800/10"></div>
      </div>
      <div class="p-6">
        <h3 class="mb-2 text-2xl font-semibold text-stone-800 dark:text-stone-200">Food Security Program</h3>
        <p class="mb-4 text-sm text-stone-600 dark:text-stone-400">Help end hunger by providing nutritious meals and sustainable food sources.</p>

        <div class="mb-4 flex items-center justify-between">
          <span class="neumorphic-badge-light text-nowrap from-stone-50 to-stone-150 px-3 py-1 text-sm font-medium text-stone-700 dark:from-stone-700 dark:to-stone-850 dark:text-stone-300">
            Goal: $12,000
          </span>
          <span class="neumorphic-badge-light text-nowrap from-stone-50 to-stone-150 px-3 py-1 text-sm font-bold text-stone-700 dark:from-stone-700 dark:to-stone-850 dark:text-stone-300">
            Raised: $9,100
          </span>
        </div>

        <div class="mb-4 h-2 rounded-full bg-stone-300 shadow-inner dark:bg-stone-700">
          <div class="h-full rounded-full bg-gradient-to-r from-amber-600 to-amber-700" style="width: 76%;"></div>
        </div>

        <button class="neumorphic-button-primary w-full">
          Donate Now
        </button>
      </div>
    </div>

    <div class="group relative overflow-hidden rounded-3xl bg-gradient-to-br from-stone-100 to-stone-200 leading-tight shadow-lg transition-all duration-300 ease-in-out hover:shadow-xl dark:from-stone-800 dark:to-stone-900 dark:shadow-stone-950/70 dark:hover:shadow-stone-950/90">
      <div class="relative flex h-48 items-center justify-center overflow-hidden rounded-t-2xl bg-gradient-to-br from-stone-300 to-stone-400 shadow-inner dark:from-stone-700 dark:to-stone-800">
        <img src="https://picsum.photos/id/401/400/300" alt="Community Development" class="h-full w-full object-cover transition-transform duration-300 group-hover:scale-105">
        <div class="absolute inset-0 bg-gradient-to-t from-stone-800/40 via-transparent to-stone-800/10"></div>
      </div>
      <div class="p-6">
        <h3 class="mb-2 text-2xl font-semibold text-stone-800 dark:text-stone-200">Community Development</h3>
        <p class="mb-4 text-sm text-stone-600 dark:text-stone-400">Invest in local infrastructure and sustainable livelihood projects.</p>

        <div class="mb-4 flex items-center justify-between">
          <span class="neumorphic-badge-light text-nowrap from-stone-50 to-stone-150 px-3 py-1 text-sm font-medium text-stone-700 dark:from-stone-700 dark:to-stone-850 dark:text-stone-300">
            Goal: $9,500
          </span>
          <span class="neumorphic-badge-light text-nowrap from-stone-50 to-stone-150 px-3 py-1 text-sm font-bold text-stone-700 dark:from-stone-700 dark:to-stone-850 dark:text-stone-300">
            Raised: $5,300
          </span>
        </div>

        <div class="mb-4 h-2 rounded-full bg-stone-300 shadow-inner dark:bg-stone-700">
          <div class="h-full rounded-full bg-gradient-to-r from-amber-600 to-amber-700" style="width: 56%;"></div>
        </div>

        <button class="neumorphic-button-primary w-full">
          Donate Now
        </button>
      </div>
    </div>

  </div>

  <!-- Helper Classes for Neumorphism (can be defined in a CSS file or as @apply in Tailwind CSS config) -->
  <style>
    .neumorphic-button-primary {
      @apply relative rounded-xl bg-gradient-to-br from-stone-300 to-stone-400 px-6 py-3 font-semibold text-stone-800 shadow-lg transition-all duration-300 ease-in-out hover:-translate-y-0.5 hover:scale-105 hover:from-stone-200 hover:to-stone-300 active:translate-y-0.5 active:scale-95 active:shadow-inner dark:from-stone-700 dark:to-stone-800 dark:text-stone-200 dark:shadow-stone-950/70 dark:hover:from-stone-600 dark:hover:to-stone-750 dark:active:shadow-stone-950/90;
    }
    .neumorphic-button-primary:active {
      box-shadow: inset 2px 2px 5px rgba(0,0,0,0.2), inset -2px -2px 5px rgba(255,255,255,0.7), 0 0 0 transparent !important; /* override hover shadow */
      @apply dark:shadow-[inset_2px_2px_5px_rgba(0,0,0,0.5),inset_-2px_-2px_5px_rgba(255,255,255,0.1)];
    }

    .neumorphic-button-alt {
      @apply relative rounded-xl bg-gradient-to-br from-white to-amber-100 px-6 py-3 font-semibold text-amber-800 shadow-lg transition-all duration-300 ease-in-out hover:-translate-y-0.5 hover:scale-105 hover:from-amber-50 hover:to-white active:translate-y-0.5 active:scale-95 active:shadow-inner;
    }
    .neumorphic-button-alt:active {
      box-shadow: inset 2px 2px 5px rgba(0,0,0,0.2), inset -2px -2px 5px rgba(255,255,255,0.7), 0 0 0 transparent !important; /* override hover shadow */
    }

    .neumorphic-badge-light {
      @apply inline-block rounded-full bg-gradient-to-br shadow-md;
      box-shadow: 2px 2px 4px rgba(0,0,0,0.1), -2px -2px 4px rgba(255,255,255,0.8); /* manual neumorphic shadow for badges */
      @apply dark:shadow-[2px_2px_4px_rgba(0,0,0,0.5),-2px_-2px_4px_rgba(255,255,255,0.1)];
    }

    .neumorphic-badge-dark {
      @apply inline-block rounded-full bg-gradient-to-br shadow-md;
      box-shadow: 2px 2px 4px rgba(0,0,0,0.3), -2px -2px 4px rgba(255,255,255,0.15); /* manual neumorphic shadow for badges */
    }

    .neumorphic-progress-bar-featured {
      background: linear-gradient(145deg, #cc8000, #ff9900);
      box-shadow: inset 2px 2px 5px rgba(0,0,0,0.4), inset -2px -2px 5px rgba(255,255,255,0.2);
    }
  </style>

</div>

E-commerce Components 구성 요소

종이/인쇄에서 영감을 받은 디자인과 어스 톤 색상 구성표가 있는 간단하고 반응이 빠른 부동산 리스팅 카드로, 다크 모드 지원을 포함합니다.

열다 미리 보기

                <div class="p-4 sm:p-6 lg:p-8 bg-warm-gray-100 dark:bg-stone-900 min-h-screen flex items-center justify-center font-serif">
  <div class="max-w-sm mx-auto bg-white dark:bg-stone-800 rounded-lg shadow-md overflow-hidden transform transition-transform duration-300 hover:scale-[1.02] border-2 border-stone-200 dark:border-stone-700 relative">
    <!-- Paper texture overlay (pseudo-element for better control) -->
    <div class="absolute inset-0 z-0 pointer-events-none opacity-40 dark:opacity-20" style="background-image: url('data:image/svg+xml,%3Csvg width=\'100%\' height=\'100%\' viewBox=\'0 0 40 40\' xmlns=\'http://www.w3.org/2000/svg\'%3E%3Cpath d=\'M20 20.5a.5.5 0 011 0V21a.5.5 0 01-1 0v-.5zM20 0a.5.5 0 011 0v20a.5.5 0 01-1 0V0zM0 20a.5.5 0 010 1h20a.5.5 0 010-1H0zM0 0a.5.5 0 010 1h20a.5.5 0 010-1H0zM20 0a.5.5 0 01.5-.5h-1a.5.5 0 01.5.5zM0 20a.5.5 0 01-.5-.5v1a.5.5 0 01.5-.5z\'%3E%3C/path%3E%3C/svg%3E'); background-size: 10px 10px; opacity: 0.1; background-color: rgba(255, 255, 255, 0.5);">
    </div>

    <div class="relative z-10">
      <img class="w-full h-48 object-cover" src="https://picsum.photos/400/300?random=1" alt="Property Thumbnail">
      <div class="absolute top-2 right-2 bg-stone-700/80 text-white text-xs px-2 py-1 rounded-sm tracking-wide font-sans">
        FOR SALE
      </div>

      <div class="p-4">
        <h3 class="text-xl font-bold text-stone-800 dark:text-stone-100 mb-2 leading-tight">
          Charming Suburban Retreat
        </h3>
        <p class="text-sm text-stone-600 dark:text-stone-300 mb-4 tracking-wide">
          123 Harmony Lane, Willow Creek
        </p>

        <div class="flex items-center justify-between mb-4">
          <span class="text-2xl font-extrabold text-green-700 dark:text-green-400">
            $450,000
          </span>
          <div class="flex space-x-3 text-stone-700 dark:text-stone-300">
            <div class="flex items-center text-sm">
              <svg class="w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M10 2a1 1 0 011 1v1.586l3.293 3.293a1 1 0 01-1.414 1.414L10 6.414 7.121 9.293a1 1 0 11-1.414-1.414L9 4.586V3a1 1 0 011-1zM2 10a8 8 0 1116 0 8 8 0 01-16 0zm8 4a2 2 0 100-4 2 2 0 000 4z"></path></svg>
              3 Beds
            </div>
            <div class="flex items-center text-sm">
              <svg class="w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M10 6a2 2 0 110 4 2 2 0 010-4z"></path><path fill-rule="evenodd" d="M4 0h12a2 2 0 012 2v16a2 2 0 01-2 2H4a2 2 0 01-2-2V2a2 2 0 012-2zm0 2v5h12V2H4zM2 9v9a2 2 0 002 2h12a2 2 0 002-2V9H2z" clip-rule="evenodd"></path></svg>

              2 Baths
            </div>
          </div>
        </div>

        <button class="w-full bg-orange-700 hover:bg-orange-800 text-white font-semibold py-2 px-4 rounded-md transition-colors duration-200 shadow-sm
                       dark:bg-orange-600 dark:hover:bg-orange-700">
          View Details
        </button>
      </div>
    </div>
  </div>
</div>

E-commerce Components 구성 요소

여행/관광 웹사이트를 위한 복잡한 전자 상거래 구성 요소로, 네온/글로우 효과, 가을 색 구성표, 다크 모드 지원을 통한 완벽한 응답성을 특징으로 합니다.

열다 미리 보기

                <div class="min-h-screen bg-gradient-to-br from-orange-50 to-amber-200 dark:from-gray-950 dark:to-stone-900 p-4 sm:p-6 lg:p-8 font-sans text-gray-900 dark:text-gray-100 relative overflow-hidden">

  <!-- Glow background effects -->
  <div class="absolute -top-32 -left-32 w-96 h-96 bg-orange-400 rounded-full mix-blend-multiply filter blur-3xl opacity-30 animate-blob dark:bg-amber-600"></div>
  <div class="absolute -bottom-24 -right-24 w-72 h-72 bg-red-600 rounded-full mix-blend-multiply filter blur-3xl opacity-30 animate-blob animation-delay-2000 dark:bg-red-800"></div>
  <div class="absolute top-1/4 left-1/2 w-64 h-64 bg-yellow-400 rounded-full mix-blend-multiply filter blur-3xl opacity-30 animate-blob animation-delay-4000 dark:bg-orange-600"></div>

  <div class="container mx-auto relative z-10">
    <!-- Header/Navigation Placeholder -->
    <header class="mb-8 flex flex-col sm:flex-row justify-between items-center bg-brown-900 bg-opacity-70 backdrop-blur-sm rounded-xl p-4 shadow-xl border border-orange-700 dark:bg-stone-900 dark:border-stone-700">
      <h1 class="text-2xl sm:text-3xl font-extrabold text-orange-200 uppercase tracking-widest text-shadow-glow dark:text-amber-400 mb-4 sm:mb-0">
        Wanderlust Expeditions
      </h1>
      <nav class="flex gap-4 sm:gap-6">
        <a href="#" class="text-orange-300 hover:text-amber-500 transition-colors duration-300 relative group">
          Destinations
          <span class="absolute inset-x-0 bottom-0 h-0.5 bg-orange-400 origin-left transform scale-x-0 group-hover:scale-x-100 transition-transform duration-300"></span>
        </a>
        <a href="#" class="text-orange-300 hover:text-amber-500 transition-colors duration-300 relative group">
          Tours
          <span class="absolute inset-x-0 bottom-0 h-0.5 bg-orange-400 origin-left transform scale-x-0 group-hover:scale-x-100 transition-transform duration-300"></span>
        </a>
        <a href="#" class="text-orange-300 hover:text-amber-500 transition-colors duration-300 relative group">
          About Us
          <span class="absolute inset-x-0 bottom-0 h-0.5 bg-orange-400 origin-left transform scale-x-0 group-hover:scale-x-100 transition-transform duration-300"></span>
        </a>
      </nav>
    </header>

    <!-- Main Content Grid -->
    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">

      <!-- Left Sidebar - Filters -->
      <aside class="lg:col-span-1 p-6 bg-brown-900 bg-opacity-70 backdrop-blur-sm rounded-xl shadow-xl border border-orange-700 dark:bg-stone-900 dark:border-stone-700">
        <h2 class="text-xl font-bold mb-6 text-orange-200 text-shadow-glow dark:text-amber-400">Filter Your Adventure</h2>

        <div class="mb-6">
          <label for="destination" class="block text-orange-300 text-sm font-medium mb-2">Destination</label>
          <select id="destination" class="w-full p-3 rounded-lg bg-orange-900 text-orange-100 border border-orange-700 focus:ring-2 focus:ring-amber-500 focus:border-amber-500 transition-all duration-200 shadow-inner glow-inset-orange">
            <option>All Destinations</option>
            <option>Sahara Desert</option>
            <option>Himalayan Peaks</option>
            <option>Amazon Rainforest</option>
            <option>Nordic Fjords</option>
          </select>
        </div>

        <div class="mb-6">
          <label for="price-range" class="block text-orange-300 text-sm font-medium mb-2">Price Range</label>
          <input type="range" id="price-range" min="100" max="5000" value="2500" class="w-full h-2 bg-orange-700 accent-amber-500 rounded-lg appearance-none cursor-pointer glow-inset-orange">
          <div class="flex justify-between text-xs text-orange-200 mt-2">
            <span>$100</span>
            <span>$5000</span>
          </div>
        </div>

        <div class="mb-6">
          <label class="block text-orange-300 text-sm font-medium mb-2">Activities</label>
          <div class="space-y-2">
            <label class="flex items-center text-orange-200">
              <input type="checkbox" class="form-checkbox h-5 w-5 text-amber-500 rounded border-orange-700 bg-orange-900 focus:ring-amber-500 glow-orange-checkbox">
              <span class="ml-2 text-glow">Hiking & Trekking</span>
            </label>
            <label class="flex items-center text-orange-200">
              <input type="checkbox" class="form-checkbox h-5 w-5 text-amber-500 rounded border-orange-700 bg-orange-900 focus:ring-amber-500 glow-orange-checkbox">
              <span class="ml-2 text-glow">Cultural Immersion</span>
            </label>
            <label class="flex items-center text-orange-200">
              <input type="checkbox" class="form-checkbox h-5 w-5 text-amber-500 rounded border-orange-700 bg-orange-900 focus:ring-amber-500 glow-orange-checkbox">
              <span class="ml-2 text-glow">Wildlife Safaris</span>
            </label>
          </div>
        </div>

        <button class="w-full py-3 bg-gradient-to-r from-orange-600 to-red-700 text-white font-bold rounded-lg shadow-lg hover:from-orange-700 hover:to-red-800 transition-all duration-300 transform hover:scale-105 active:scale-95 button-glow">
          Apply Filters
        </button>
      </aside>

      <!-- Main Product Grid -->
      <section class="lg:col-span-2 grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-6">

        <!-- Product Card 1 -->
        <div class="relative bg-brown-900 bg-opacity-70 backdrop-blur-sm rounded-xl overflow-hidden shadow-xl border border-orange-700 dark:bg-stone-900 dark:border-stone-700 group perspective-card">
          <div class="card-inner">
            <div class="card-front p-4">
              <div class="relative h-48 mb-4 rounded-lg overflow-hidden border border-orange-600 card-image-glow">
                <img src="https://picsum.photos/id/1015/400/300" alt="Desert Safari" class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-105">
                <div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent flex items-end p-3">
                  <span class="text-xs font-semibold text-orange-200 bg-red-700 px-2 py-1 rounded-full opacity-0 translate-y-2 group-hover:opacity-100 group-hover:translate-y-0 transition-all duration-300 glow-tag">Popular</span>
                </div>
              </div>
              <h3 class="text-xl font-bold mb-2 text-orange-200 text-shadow-glow dark:text-amber-400">Sahara Desert Trek</h3>
              <p class="text-sm text-orange-300 mb-4 line-clamp-2">Experience the majestic dunes and endless skies of the Sahara on this unforgettable journey.</p>
              <div class="flex justify-between items-center mb-4">
                <span class="text-2xl font-extrabold text-amber-500 price-glow">$1200</span>
                <div class="flex items-center text-orange-400">
                  <svg class="w-5 h-5 fill-current mr-1" viewBox="0 0 24 24"><path d="M12 .587l3.642 7.362 8.118 1.18c.552.08.775.736.377 1.118l-5.87 5.725 1.388 8.082c.096.56-.49.986-1 .728L12 20.07l-7.237 3.805c-.51.268-1.096-.168-1-.728l1.389-8.082-5.87-5.725c-.398-.382-.175-1.038.377-1.118l8.118-1.18L12 .587z"/></svg>
                  4.8 <span class="text-xs ml-1">(240 reviews)</span>
                </div>
              </div>
              <button class="w-full py-2 bg-gradient-to-r from-orange-600 to-red-700 text-white font-bold rounded-lg shadow-md hover:from-orange-700 hover:to-red-800 transition-all duration-300 transform hover:scale-105 active:scale-95 button-glow">
                View Details
              </button>
            </div>
            <div class="card-back p-4 text-center flex flex-col justify-center items-center bg-brown-800 rounded-xl">
                <h4 class="text-xl font-bold text-orange-200 mb-4 text-shadow-glow">Quick Facts</h4>
                <ul class="text-orange-300 text-sm space-y-2 mb-6">
                    <li>&#x2022; Duration: 7 Days</li>
                    <li>&#x2022; Difficulty: Moderate</li>
                    <li>&#x2022; Group Size: Max 12</li>
                    <li>&#x2022; Best Season: October - March</li>
                </ul>
                <button class="w-1/2 py-2 bg-amber-500 text-brown-900 font-bold rounded-lg shadow-md hover:bg-amber-600 transition-all duration-300 transform hover:scale-105 active:scale-95 button-glow-sm">
                    Book Now
                </button>
            </div>
          </div>
        </div>

        <!-- Product Card 2 -->
        <div class="relative bg-brown-900 bg-opacity-70 backdrop-blur-sm rounded-xl overflow-hidden shadow-xl border border-orange-700 dark:bg-stone-900 dark:border-stone-700 group perspective-card">
          <div class="card-inner">
            <div class="card-front p-4">
              <div class="relative h-48 mb-4 rounded-lg overflow-hidden border border-orange-600 card-image-glow">
                <img src="https://picsum.photos/id/292/400/300" alt="Himalayan Peaks" class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-105">
                <div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent flex items-end p-3">
                  <span class="text-xs font-semibold text-orange-200 bg-red-700 px-2 py-1 rounded-full opacity-0 translate-y-2 group-hover:opacity-100 group-hover:translate-y-0 transition-all duration-300 glow-tag">New!</span>
                </div>
              </div>
              <h3 class="text-xl font-bold mb-2 text-orange-200 text-shadow-glow dark:text-amber-400">Himalayan Basecamp</h3>
              <p class="text-sm text-orange-300 mb-4 line-clamp-2">Conquer breathtaking peaks and witness stunning panoramic views in the Himalayas.</p>
              <div class="flex justify-between items-center mb-4">
                <span class="text-2xl font-extrabold text-amber-500 price-glow">$2500</span>
                <div class="flex items-center text-orange-400">
                  <svg class="w-5 h-5 fill-current mr-1" viewBox="0 0 24 24"><path d="M12 .587l3.642 7.362 8.118 1.18c.552.08.775.736.377 1.118l-5.87 5.725 1.388 8.082c.096.56-.49.986-1 .728L12 20.07l-7.237 3.805c-.51.268-1.096-.168-1-.728l1.389-8.082-5.87-5.725c-.398-.382-.175-1.038.377-1.118l8.118-1.18L12 .587z"/></svg>
                  4.9 <span class="text-xs ml-1">(180 reviews)</span>
                </div>
              </div>
              <button class="w-full py-2 bg-gradient-to-r from-orange-600 to-red-700 text-white font-bold rounded-lg shadow-md hover:from-orange-700 hover:to-red-800 transition-all duration-300 transform hover:scale-105 active:scale-95 button-glow">
                View Details
              </button>
            </div>
            <div class="card-back p-4 text-center flex flex-col justify-center items-center bg-brown-800 rounded-xl">
                <h4 class="text-xl font-bold text-orange-200 mb-4 text-shadow-glow">Quick Facts</h4>
                <ul class="text-orange-300 text-sm space-y-2 mb-6">
                    <li>&#x2022; Duration: 14 Days</li>
                    <li>&#x2022; Difficulty: Advanced</li>
                    <li>&#x2022; Group Size: Max 8</li>
                    <li>&#x2022; Best Season: April - June</li>
                </ul>
                <button class="w-1/2 py-2 bg-amber-500 text-brown-900 font-bold rounded-lg shadow-md hover:bg-amber-600 transition-all duration-300 transform hover:scale-105 active:scale-95 button-glow-sm">
                    Book Now
                </button>
            </div>
          </div>
        </div>

        <!-- Product Card 3 -->
        <div class="relative bg-brown-900 bg-opacity-70 backdrop-blur-sm rounded-xl overflow-hidden shadow-xl border border-orange-700 dark:bg-stone-900 dark:border-stone-700 group perspective-card">
          <div class="card-inner">
            <div class="card-front p-4">
              <div class="relative h-48 mb-4 rounded-lg overflow-hidden border border-orange-600 card-image-glow">
                <img src="https://picsum.photos/id/1077/400/300" alt="Amazon River" class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-105">
                <div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent flex items-end p-3">
                  <span class="text-xs font-semibold text-orange-200 bg-orange-700 px-2 py-1 rounded-full opacity-0 translate-y-2 group-hover:opacity-100 group-hover:translate-y-0 transition-all duration-300 glow-tag">Low Spots Remaining</span>
                </div>
              </div>
              <h3 class="text-xl font-bold mb-2 text-orange-200 text-shadow-glow dark:text-amber-400">Amazon Wildlife Tour</h3>
              <p class="text-sm text-orange-300 mb-4 line-clamp-2">Navigate the mighty Amazon river and encounter unique wildlife in their natural habitat.</p>
              <div class="flex justify-between items-center mb-4">
                <span class="text-2xl font-extrabold text-amber-500 price-glow">$1800</span>
                <div class="flex items-center text-orange-400">
                  <svg class="w-5 h-5 fill-current mr-1" viewBox="0 0 24 24"><path d="M12 .587l3.642 7.362 8.118 1.18c.552.08.775.736.377 1.118l-5.87 5.725 1.388 8.082c.096.56-.49.986-1 .728L12 20.07l-7.237 3.805c-.51.268-1.096-.168-1-.728l1.389-8.082-5.87-5.725c-.398-.382-.175-1.038.377-1.118l8.118-1.18L12 .587z"/></svg>
                  4.7 <span class="text-xs ml-1">(310 reviews)</span>
                </div>
              </div>
              <button class="w-full py-2 bg-gradient-to-r from-orange-600 to-red-700 text-white font-bold rounded-lg shadow-md hover:from-orange-700 hover:to-red-800 transition-all duration-300 transform hover:scale-105 active:scale-95 button-glow">
                View Details
              </button>
            </div>
            <div class="card-back p-4 text-center flex flex-col justify-center items-center bg-brown-800 rounded-xl">
                <h4 class="text-xl font-bold text-orange-200 mb-4 text-shadow-glow">Quick Facts</h4>
                <ul class="text-orange-300 text-sm space-y-2 mb-6">
                    <li>&#x2022; Duration: 10 Days</li>
                    <li>&#x2022; Difficulty: Easy</li>
                    <li>&#x2022; Group Size: Max 15</li>
                    <li>&#x2022; Best Season: May - September</li>
                </ul>
                <button class="w-1/2 py-2 bg-amber-500 text-brown-900 font-bold rounded-lg shadow-md hover:bg-amber-600 transition-all duration-300 transform hover:scale-105 active:scale-95 button-glow-sm">
                    Book Now
                </button>
            </div>
          </div>
        </div>

        <!-- Add more product cards here following the same structure -->
        <!-- Product Card 4 -->
        <div class="relative bg-brown-900 bg-opacity-70 backdrop-blur-sm rounded-xl overflow-hidden shadow-xl border border-orange-700 dark:bg-stone-900 dark:border-stone-700 group perspective-card">
          <div class="card-inner">
            <div class="card-front p-4">
              <div class="relative h-48 mb-4 rounded-lg overflow-hidden border border-orange-600 card-image-glow">
                <img src="https://picsum.photos/id/1029/400/300" alt="Nordic Fjords" class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-105">
                <div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent flex items-end p-3">
                  <span class="text-xs font-semibold text-orange-200 bg-red-700 px-2 py-1 rounded-full opacity-0 translate-y-2 group-hover:opacity-100 group-hover:translate-y-0 transition-all duration-300 glow-tag">Featured</span>
                </div>
              </div>
              <h3 class="text-xl font-bold mb-2 text-orange-200 text-shadow-glow dark:text-amber-400">Nordic Fjords Cruise</h3>
              <p class="text-sm text-orange-300 mb-4 line-clamp-2">Cruise through breathtaking fjords and explore charming Nordic villages.</p>
              <div class="flex justify-between items-center mb-4">
                <span class="text-2xl font-extrabold text-amber-500 price-glow">$2800</span>
                <div class="flex items-center text-orange-400">
                  <svg class="w-5 h-5 fill-current mr-1" viewBox="0 0 24 24"><path d="M12 .587l3.642 7.362 8.118 1.18c.552.08.775.736.377 1.118l-5.87 5.725 1.388 8.082c.096.56-.49.986-1 .728L12 20.07l-7.237 3.805c-.51.268-1.096-.168-1-.728l1.389-8.082-5.87-5.725c-.398-.382-.175-1.038.377-1.118l8.118-1.18L12 .587z"/></svg>
                  4.9 <span class="text-xs ml-1">(200 reviews)</span>
                </div>
              </div>
              <button class="w-full py-2 bg-gradient-to-r from-orange-600 to-red-700 text-white font-bold rounded-lg shadow-md hover:from-orange-700 hover:to-red-800 transition-all duration-300 transform hover:scale-105 active:scale-95 button-glow">
                View Details
              </button>
            </div>
            <div class="card-back p-4 text-center flex flex-col justify-center items-center bg-brown-800 rounded-xl">
                <h4 class="text-xl font-bold text-orange-200 mb-4 text-shadow-glow">Quick Facts</h4>
                <ul class="text-orange-300 text-sm space-y-2 mb-6">
                    <li>&#x2022; Duration: 8 Days</li>
                    <li>&#x2022; Difficulty: Easy</li>
                    <li>&#x2022; Group Size: Max 20</li>
                    <li>&#x2022; Best Season: June - August</li>
                </ul>
                <button class="w-1/2 py-2 bg-amber-500 text-brown-900 font-bold rounded-lg shadow-md hover:bg-amber-600 transition-all duration-300 transform hover:scale-105 active:scale-95 button-glow-sm">
                    Book Now
                </button>
            </div>
          </div>
        </div>

        <!-- Product Card 5 -->
        <div class="relative bg-brown-900 bg-opacity-70 backdrop-blur-sm rounded-xl overflow-hidden shadow-xl border border-orange-700 dark:bg-stone-900 dark:border-stone-700 group perspective-card">
          <div class="card-inner">
            <div class="card-front p-4">
              <div class="relative h-48 mb-4 rounded-lg overflow-hidden border border-orange-600 card-image-glow">
                <img src="https://picsum.photos/id/1083/400/300" alt="Bali Beaches" class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-105">
                <div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent flex items-end p-3">
                  <span class="text-xs font-semibold text-orange-200 bg-red-700 px-2 py-1 rounded-full opacity-0 translate-y-2 group-hover:opacity-100 group-hover:translate-y-0 transition-all duration-300 glow-tag">Relaxation</span>
                </div>
              </div>
              <h3 class="text-xl font-bold mb-2 text-orange-200 text-shadow-glow dark:text-amber-400">Bali Beach Retreat</h3>
              <p class="text-sm text-orange-300 mb-4 line-clamp-2">Unwind on pristine beaches and immerse yourself in the serene culture of Bali.</p>
              <div class="flex justify-between items-center mb-4">
                <span class="text-2xl font-extrabold text-amber-500 price-glow">$950</span>
                <div class="flex items-center text-orange-400">
                  <svg class="w-5 h-5 fill-current mr-1" viewBox="0 0 24 24"><path d="M12 .587l3.642 7.362 8.118 1.18c.552.08.775.736.377 1.118l-5.87 5.725 1.388 8.082c.096.56-.49.986-1 .728L12 20.07l-7.237 3.805c-.51.268-1.096-.168-1-.728l1.389-8.082-5.87-5.725c-.398-.382-.175-1.038.377-1.118l8.118-1.18L12 .587z"/></svg>
                  4.6 <span class="text-xs ml-1">(450 reviews)</span>
                </div>
              </div>
              <button class="w-full py-2 bg-gradient-to-r from-orange-600 to-red-700 text-white font-bold rounded-lg shadow-md hover:from-orange-700 hover:to-red-800 transition-all duration-300 transform hover:scale-105 active:scale-95 button-glow">
                View Details
              </button>
            </div>
            <div class="card-back p-4 text-center flex flex-col justify-center items-center bg-brown-800 rounded-xl">
                <h4 class="text-xl font-bold text-orange-200 mb-4 text-shadow-glow">Quick Facts</h4>
                <ul class="text-orange-300 text-sm space-y-2 mb-6">
                    <li>&#x2022; Duration: 5 Days</li>
                    <li>&#x2022; Difficulty: Easy</li>
                    <li>&#x2022; Group Size: Any</li>
                    <li>&#x2022; Best Season: All Year</li>
                </ul>
                <button class="w-1/2 py-2 bg-amber-500 text-brown-900 font-bold rounded-lg shadow-md hover:bg-amber-600 transition-all duration-300 transform hover:scale-105 active:scale-95 button-glow-sm">
                    Book Now
                </button>
            </div>
          </div>
        </div>

        <!-- Product Card 6 -->
        <div class="relative bg-brown-900 bg-opacity-70 backdrop-blur-sm rounded-xl overflow-hidden shadow-xl border border-orange-700 dark:bg-stone-900 dark:border-stone-700 group perspective-card">
          <div class="card-inner">
            <div class="card-front p-4">
              <div class="relative h-48 mb-4 rounded-lg overflow-hidden border border-orange-600 card-image-glow">
                <img src="https://picsum.photos/id/1043/400/300" alt="Kyoto Temples" class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-105">
                <div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent flex items-end p-3">
                  <span class="text-xs font-semibold text-orange-200 bg-red-700 px-2 py-1 rounded-full opacity-0 translate-y-2 group-hover:opacity-100 group-hover:translate-y-0 transition-all duration-300 glow-tag">Cultural</span>
                </div>
              </div>
              <h3 class="text-xl font-bold mb-2 text-orange-200 text-shadow-glow dark:text-amber-400">Kyoto Cultural Journey</h3>
              <p class="text-sm text-orange-300 mb-4 line-clamp-2">Explore ancient temples, traditional gardens, and vibrant history in Japan's cultural heart.</p>
              <div class="flex justify-between items-center mb-4">
                <span class="text-2xl font-extrabold text-amber-500 price-glow">$2100</span>
                <div class="flex items-center text-orange-400">
                  <svg class="w-5 h-5 fill-current mr-1" viewBox="0 0 24 24"><path d="M12 .587l3.642 7.362 8.118 1.18c.552.08.775.736.377 1.118l-5.87 5.725 1.388 8.082c.096.56-.49.986-1 .728L12 20.07l-7.237 3.805c-.51.268-1.096-.168-1-.728l1.389-8.082-5.87-5.725c-.398-.382-.175-1.038.377-1.118l8.118-1.18L12 .587z"/></svg>
                  4.8 <span class="text-xs ml-1">(290 reviews)</span>
                </div>
              </div>
              <button class="w-full py-2 bg-gradient-to-r from-orange-600 to-red-700 text-white font-bold rounded-lg shadow-md hover:from-orange-700 hover:to-red-800 transition-all duration-300 transform hover:scale-105 active:scale-95 button-glow">
                View Details
              </button>
            </div>
            <div class="card-back p-4 text-center flex flex-col justify-center items-center bg-brown-800 rounded-xl">
                <h4 class="text-xl font-bold text-orange-200 mb-4 text-shadow-glow">Quick Facts</h4>
                <ul class="text-orange-300 text-sm space-y-2 mb-6">
                    <li>&#x2022; Duration: 9 Days</li>
                    <li>&#x2022; Difficulty: Easy</li>
                    <li>&#x2022; Group Size: Max 10</li>
                    <li>&#x2022; Best Season: March - May</li>
                </ul>
                <button class="w-1/2 py-2 bg-amber-500 text-brown-900 font-bold rounded-lg shadow-md hover:bg-amber-600 transition-all duration-300 transform hover:scale-105 active:scale-95 button-glow-sm">
                    Book Now
                </button>
            </div>
          </div>
        </div>

      </section>
    </div>

    <!-- Testimonial/Call to Action Section -->
    <section class="mt-12 p-8 bg-brown-900 bg-opacity-70 backdrop-blur-sm rounded-xl shadow-xl border border-orange-700 text-center dark:bg-stone-900 dark:border-stone-700">
      <h2 class="text-3xl font-extrabold mb-4 text-orange-200 text-shadow-glow dark:text-amber-400">Ready for Your Next Adventure?</h2>
      <p class="text-lg text-orange-300 mb-8">Join thousands of happy explorers who've crafted unforgettable memories with us.</p>
      <div class="flex flex-wrap justify-center items-center gap-6 mb-8">
        <div class="flex flex-col items-center">
          <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Customer Avatar" class="w-16 h-16 rounded-full border-2 border-amber-500 shadow-lg glow-avatar">
          <p class="text-amber-400 text-sm mt-2 font-semibold">Jane D.</p>
        </div>
        <div class="text-orange-200 italic max-w-md">"My trip to the Himalayas was beyond words. The organization was flawless, and the guides were exceptional. Highly recommend!"</div>
      </div>
      <a href="#contact" class="inline-block py-4 px-8 bg-gradient-to-r from-amber-500 to-orange-600 text-brown-900 font-bold text-xl rounded-full shadow-2xl hover:from-amber-600 hover:to-orange-700 transition-all duration-300 transform hover:scale-105 active:scale-95 button-glow-lg">
        Contact Our Travel Experts
      </a>
    </section>

  </div>

  <!-- Custom Styles for Neon/Glow Effects and Card Flip -->
  <style>
    @keyframes blob {
      0% {
        transform: translate(0px, 0px) scale(1);
      }
      33% {
        transform: translate(30px, -50px) scale(1.1);
      }
      66% {
        transform: translate(-20px, 20px) scale(0.9);
      }
      100% {
        transform: translate(0px, 0px) scale(1);
      }
    }

    .animate-blob {
      animation: blob 7s infinite cubic-bezier(0.6, -0.28, 0.735, 0.045);
    }

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

    .animation-delay-4000 {
      animation-delay: 4s;
    }

    .text-shadow-glow {
      text-shadow: 0 0 5px rgba(255, 165, 0, 0.8), 0 0 10px rgba(255, 140, 0, 0.6), 0 0 15px rgba(255, 69, 0, 0.4);
    }

    .glow-inset-orange:focus {
      box-shadow: inset 0 0 8px rgba(255, 165, 0, 0.6), 0 0 10px rgba(255, 140, 0, 0.4);
    }

    .glow-orange-checkbox:checked {
      box-shadow: 0 0 5px rgba(255, 165, 0, 0.8);
    }

    /* General Button Glow */
    .button-glow {
      box-shadow: 0 0 10px rgba(255, 165, 0, 0.6);
    }

    .button-glow:hover {
      box-shadow: 0 0 15px rgba(255, 165, 0, 0.8), 0 0 20px rgba(255, 140, 0, 0.7);
    }

    .button-glow-sm {
        box-shadow: 0 0 8px rgba(255, 215, 0, 0.7);
    }

    .button-glow-sm:hover {
        box-shadow: 0 0 12px rgba(255, 215, 0, 0.9), 0 0 16px rgba(255, 190, 0, 0.8);
    }

    .button-glow-lg {
      box-shadow: 0 0 15px rgba(255, 215, 0, 0.8), 0 0 25px rgba(255, 165, 0, 0.7);
    }
    
    .button-glow-lg:hover {
      box-shadow: 0 0 20px rgba(255, 215, 0, 1), 0 0 30px rgba(255, 165, 0, 0.9);
    }

    .card-image-glow {
        box-shadow: 0 0 8px rgba(255, 165, 0, 0.7);
    }

    .group:hover .card-image-glow {
        box-shadow: 0 0 15px rgba(255, 165, 0, 0.9);
    }

    .glow-tag {
        box-shadow: 0 0 5px rgba(255, 69, 0, 0.7);
    }

    .price-glow {
        text-shadow: 0 0 8px rgba(255, 215, 0, 0.8);
    }

    .glow-avatar {
        box-shadow: 0 0 8px rgba(255, 215, 0, 0.8);
    }


    /* 3D Card Flip Effect */
    .perspective-card {
      perspective: 1000px;
    }
    .card-inner {
      position: relative;
      width: 100%;
      height: 100%;
      text-align: center;
      transition: transform 0.8s;
      transform-style: preserve-3d;
    }
    .group:hover .card-inner {
      transform: rotateY(180deg);
    }
    .card-front, .card-back {
      position: absolute;
      width: 100%;
      height: 100%;
      -webkit-backface-visibility: hidden; /* Safari */
      backface-visibility: hidden;
      display: flex;
      flex-direction: column;
    }
    .card-front {
      background-color: transparent;
      z-index: 2;
    }
    .card-back {
      background-color: #5a2e00; /* Darker brown for back */
      transform: rotateY(180deg);
      justify-content: center;
      align-items: center;
      padding: 1.5rem;
    }

    /* Dark Mode Overrides */
    .dark .text-shadow-glow {
      text-shadow: 0 0 5px rgba(255, 215, 0, 0.9), 0 0 10px rgba(255, 190, 0, 0.7), 0 0 15px rgba(255, 160, 0, 0.5);
    }

    .dark .glow-inset-orange:focus {
      box-shadow: inset 0 0 8px rgba(255, 215, 0, 0.7), 0 0 10px rgba(255, 190, 0, 0.5);
    }

    .dark .glow-orange-checkbox:checked {
      box-shadow: 0 0 5px rgba(255, 215, 0, 0.9);
    }

    .dark .button-glow {
      box-shadow: 0 0 10px rgba(255, 215, 0, 0.7);
    }

    .dark .button-glow:hover {
      box-shadow: 0 0 15px rgba(255, 215, 0, 0.9), 0 0 20px rgba(255, 190, 0, 0.8);
    }

    .dark .price-glow {
        text-shadow: 0 0 8px rgba(255, 255, 0, 0.9);
    }
    .dark .card-image-glow {
        box-shadow: 0 0 8px rgba(255, 215, 0, 0.8);
    }

    .dark .group:hover .card-image-glow {
        box-shadow: 0 0 15px rgba(255, 215, 0, 1);
    }
    .dark .glow-tag {
        box-shadow: 0 0 5px rgba(200, 0, 0, 0.9);
    }
    .dark .glow-avatar {
        box-shadow: 0 0 8px rgba(255, 215, 0, 0.9);
    }

  </style>
</div>

Industrial_Sunset_Ecommerce_Component

산업 디자인 스타일, 따뜻한 일몰 색 구성표, 다크 모드 지원으로 완전한 응답성을 갖춘 복잡한 전자 상거래 구성 요소입니다.

열다 미리 보기

                <div class="font-sans bg-stone-100 text-stone-800 dark:bg-stone-900 dark:text-stone-100 p-4 sm:p-6 md:p-8 lg:p-12 min-h-screen">

  <!-- Header/Navigation Placeholder -->
  <header class="flex justify-between items-center bg-stone-200 dark:bg-stone-800 p-4 mb-8 shadow-md rounded-lg border-b-4 border-amber-600 dark:border-amber-400">
    <h1 class="text-2xl font-bold text-amber-700 dark:text-amber-300">RAW Goods</h1>
    <nav class="hidden md:flex space-x-6">
      <a href="#" class="text-stone-700 dark:text-stone-300 hover:text-amber-600 dark:hover:text-amber-400 transition-colors duration-200">Shop</a>
      <a href="#" class="text-stone-700 dark:text-stone-300 hover:text-amber-600 dark:hover:text-amber-400 transition-colors duration-200">About</a>
      <a href="#" class="text-stone-700 dark:text-stone-300 hover:text-amber-600 dark:hover:text-amber-400 transition-colors duration-200">Contact</a>
    </nav>
    <div class="flex items-center space-x-4">
      <button class="p-2 rounded-full bg-stone-300 dark:bg-stone-700 text-stone-700 dark:text-stone-300 hover:bg-stone-400 dark:hover:bg-stone-600 transition-colors duration-200">
        <svg class="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="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 1116 0 2 2 0 0116 0z"></path></svg>
      </button>
      <button class="md:hidden p-2 rounded-md bg-stone-300 dark:bg-stone-700 text-stone-700 dark:text-stone-300 hover:bg-stone-400 dark:hover:bg-stone-600 transition-colors duration-200">
         <svg class="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="M4 6h16M4 12h16M4 18h16"></path></svg>
      </button>
    </div>
  </header>

  <!-- Main Content Area -->
  <main class="grid grid-cols-1 lg:grid-cols-4 gap-8">

    <!-- Sidebar / Filters -->
    <aside class="lg:col-span-1 bg-stone-200 dark:bg-stone-800 p-6 rounded-lg shadow-md border border-amber-500 dark:border-amber-700">
      <h2 class="text-xl font-semibold mb-6 text-amber-700 dark:text-amber-300">Filters</h2>
      <div class="mb-6">
        <h3 class="font-medium text-lg mb-3 text-stone-700 dark:text-stone-300">Category</h3>
        <ul class="space-y-2 text-stone-600 dark:text-stone-400">
          <li><a href="#" class="hover:text-amber-600 dark:hover:text-amber-400 transition-colors duration-200">Metalwork</a></li>
          <li><a href="#" class="hover:text-amber-600 dark:hover:text-amber-400 transition-colors duration-200">Woodcraft</a></li>
          <li><a href="#" class="hover:text-amber-600 dark:hover:text-amber-400 transition-colors duration-200">Textiles</a></li>
          <li><a href="#" class="hover:text-amber-600 dark:hover:text-amber-400 transition-colors duration-200">Concrete</a></li>
        </ul>
      </div>
      <div class="mb-6">
        <h3 class="font-medium text-lg mb-3 text-stone-700 dark:text-stone-300">Price Range</h3>
        <input type="range" min="0" max="500" value="250" class="w-full accent-amber-600 dark:accent-amber-400 h-2 rounded-lg appearance-none cursor-pointer bg-stone-400 dark:bg-stone-600 mb-2">
        <div class="flex justify-between text-sm text-stone-600 dark:text-stone-400">
          <span>$0</span>
          <span>$500+</span>
        </div>
      </div>
      <div class="mb-6">
        <h3 class="font-medium text-lg mb-3 text-stone-700 dark:text-stone-300">Material</h3>
        <div class="space-y-2">
          <label class="flex items-center text-stone-600 dark:text-stone-400">
            <input type="checkbox" class="form-checkbox h-4 w-4 text-amber-600 dark:text-amber-400 rounded focus:ring-amber-500 dark:focus:ring-amber-300 border-stone-400 dark:border-stone-600 mr-2">
            Steel
          </label>
          <label class="flex items-center text-stone-600 dark:text-stone-400">
            <input type="checkbox" class="form-checkbox h-4 w-4 text-amber-600 dark:text-amber-400 rounded focus:ring-amber-500 dark:focus:ring-amber-300 border-stone-400 dark:border-stone-600 mr-2">
            Oak
          </label>
          <label class="flex items-center text-stone-600 dark:text-stone-400">
            <input type="checkbox" class="form-checkbox h-4 w-4 text-amber-600 dark:text-amber-400 rounded focus:ring-amber-500 dark:focus:ring-amber-300 border-stone-400 dark:border-stone-600 mr-2">
            Copper
          </label>
        </div>
      </div>
      <button class="w-full bg-amber-600 hover:bg-amber-700 dark:bg-amber-400 dark:hover:bg-amber-500 text-white font-bold py-2 px-4 rounded-md transition-colors duration-200 shadow-md">
        Apply Filters
      </button>
    </aside>

    <!-- Product Grid -->
    <section class="lg:col-span-3 grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6 auto-rows-min">
      
      <!-- Product Card 1 -->
      <div class="bg-stone-200 dark:bg-stone-800 rounded-lg shadow-lg overflow-hidden border border-amber-500 dark:border-amber-700 transform hover:scale-105 transition-transform duration-300">
        <img src="https://picsum.photos/id/67/300/200" alt="Industrial Lamp" class="w-full h-48 object-cover border-b border-amber-500 dark:border-amber-700">
        <div class="p-4">
          <h3 class="text-xl font-semibold mb-2 text-amber-700 dark:text-amber-300">Forged Iron Lamp</h3>
          <p class="text-stone-600 dark:text-stone-400 text-sm mb-3">Hand-forged from recycled steel, a raw and powerful statement piece for any industrial space.</p>
          <div class="flex justify-between items-center mb-4">
            <span class="text-xl font-bold text-red-600 dark:text-red-400">$189.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.279L12 18.896l-7.416 3.882 1.48-8.279L.332 9.306l8.332-1.151L12 .587z"/></svg>
              <span>4.8</span>
            </div>
          </div>
          <button class="w-full bg-amber-600 hover:bg-amber-700 dark:bg-amber-400 dark:hover:bg-amber-500 text-white font-bold py-2 rounded-md transition-colors duration-200 shadow-md transform hover:-translate-y-1">
            Add to Cart
          </button>
        </div>
      </div>

      <!-- Product Card 2 -->
      <div class="bg-stone-200 dark:bg-stone-800 rounded-lg shadow-lg overflow-hidden border border-amber-500 dark:border-amber-700 transform hover:scale-105 transition-transform duration-300">
        <img src="https://picsum.photos/id/1025/300/200" alt="Concrete Planter" class="w-full h-48 object-cover border-b border-amber-500 dark:border-amber-700">
        <div class="p-4">
          <h3 class="text-xl font-semibold mb-2 text-amber-700 dark:text-amber-300">Brutalist Concrete Planter</h3>
          <p class="text-stone-600 dark:text-stone-400 text-sm mb-3">A sturdy, minimalist design crafted from raw concrete, perfect for modern urban gardens.</p>
          <div class="flex justify-between items-center mb-4">
            <span class="text-xl font-bold text-red-600 dark:text-red-400">$75.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.279L12 18.896l-7.416 3.882 1.48-8.279L.332 9.306l8.332-1.151L12 .587z"/></svg>
              <span>4.5</span>
            </div>
          </div>
          <button class="w-full bg-amber-600 hover:bg-amber-700 dark:bg-amber-400 dark:hover:bg-amber-500 text-white font-bold py-2 rounded-md transition-colors duration-200 shadow-md transform hover:-translate-y-1">
            Add to Cart
          </button>
        </div>
      </div>

      <!-- Product Card 3 -->
      <div class="bg-stone-200 dark:bg-stone-800 rounded-lg shadow-lg overflow-hidden border border-amber-500 dark:border-amber-700 transform hover:scale-105 transition-transform duration-300">
        <img src="https://picsum.photos/id/1084/300/200" alt="Reclaimed Wood Table" class="w-full h-48 object-cover border-b border-amber-500 dark:border-amber-700">
        <div class="p-4">
          <h3 class="text-xl font-semibold mb-2 text-amber-700 dark:text-amber-300">Reclaimed Oak Console</h3>
          <p class="text-stone-600 dark:text-stone-400 text-sm mb-3">Each piece unique, crafted from distressed reclaimed oak, showcasing its natural imperfections.</p>
          <div class="flex justify-between items-center mb-4">
            <span class="text-xl font-bold text-red-600 dark:text-red-400">$499.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.279L12 18.896l-7.416 3.882 1.48-8.279L.332 9.306l8.332-1.151L12 .587z"/></svg>
              <span>4.9</span>
            </div>
          </div>
          <button class="w-full bg-amber-600 hover:bg-amber-700 dark:bg-amber-400 dark:hover:bg-amber-500 text-white font-bold py-2 rounded-md transition-colors duration-200 shadow-md transform hover:-translate-y-1">
            Add to Cart
          </button>
        </div>
      </div>

      <!-- Product Card 4 -->
      <div class="bg-stone-200 dark:bg-stone-800 rounded-lg shadow-lg overflow-hidden border border-amber-500 dark:border-amber-700 transform hover:scale-105 transition-transform duration-300">
        <img src="https://picsum.photos/id/401/300/200" alt="Copper Pendant Light" class="w-full h-48 object-cover border-b border-amber-500 dark:border-amber-700">
        <div class="p-4">
          <h3 class="text-xl font-semibold mb-2 text-amber-700 dark:text-amber-300">Patina Copper Pendant</h3>
          <p class="text-stone-600 dark:text-stone-400 text-sm mb-3">Hand-hammered copper with a natural patina, perfect for adding warmth to any room.</p>
          <div class="flex justify-between items-center mb-4">
            <span class="text-xl font-bold text-red-600 dark:text-red-400">$210.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.279L12 18.896l-7.416 3.882 1.48-8.279L.332 9.306l8.332-1.151L12 .587z"/></svg>
              <span>4.7</span>
            </div>
          </div>
          <button class="w-full bg-amber-600 hover:bg-amber-700 dark:bg-amber-400 dark:hover:bg-amber-500 text-white font-bold py-2 rounded-md transition-colors duration-200 shadow-md transform hover:-translate-y-1">
            Add to Cart
          </button>
        </div>
      </div>

      <!-- Product Card 5 -->
      <div class="bg-stone-200 dark:bg-stone-800 rounded-lg shadow-lg overflow-hidden border border-amber-500 dark:border-amber-700 transform hover:scale-105 transition-transform duration-300">
        <img src="https://picsum.photos/id/353/300/200" alt="Industrial Stool" class="w-full h-48 object-cover border-b border-amber-500 dark:border-amber-700">
        <div class="p-4">
          <h3 class="text-xl font-semibold mb-2 text-amber-700 dark:text-amber-300">Raw Steel Stool</h3>
          <p class="text-stone-600 dark:text-stone-400 text-sm mb-3">Minimalist design, maximum durability. Crafted from solid steel for a truly industrial feel.</p>
          <div class="flex justify-between items-center mb-4">
            <span class="text-xl font-bold text-red-600 dark:text-red-400">$120.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.279L12 18.896l-7.416 3.882 1.48-8.279L.332 9.306l8.332-1.151L12 .587z"/></svg>
              <span>4.6</span>
            </div>
          </div>
          <button class="w-full bg-amber-600 hover:bg-amber-700 dark:bg-amber-400 dark:hover:bg-amber-500 text-white font-bold py-2 rounded-md transition-colors duration-200 shadow-md transform hover:-translate-y-1">
            Add to Cart
          </button>
        </div>
      </div>

      <!-- Product Card 6 -->
      <div class="bg-stone-200 dark:bg-stone-800 rounded-lg shadow-lg overflow-hidden border border-amber-500 dark:border-amber-700 transform hover:scale-105 transition-transform duration-300">
        <img src="https://picsum.photos/id/345/300/200" alt="Canvas Bag" class="w-full h-48 object-cover border-b border-amber-500 dark:border-amber-700">
        <div class="p-4">
          <h3 class="text-xl font-semibold mb-2 text-amber-700 dark:text-amber-300">Waxed Canvas Tote</h3>
          <p class="text-stone-600 dark:text-stone-400 text-sm mb-3">Durable and water-resistant, made from heavy-duty waxed canvas with copper rivets.</p>
          <div class="flex justify-between items-center mb-4">
            <span class="text-xl font-bold text-red-600 dark:text-red-400">$95.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.279L12 18.896l-7.416 3.882 1.48-8.279L.332 9.306l8.332-1.151L12 .587z"/></svg>
              <span>4.9</span>
            </div>
          </div>
          <button class="w-full bg-amber-600 hover:bg-amber-700 dark:bg-amber-400 dark:hover:bg-amber-500 text-white font-bold py-2 rounded-md transition-colors duration-200 shadow-md transform hover:-translate-y-1">
            Add to Cart
          </button>
        </div>
      </div>

    </section>

  </main>

  <!-- Pagination Placeholder -->
  <nav class="flex justify-center items-center space-x-2 mt-12" aria-label="Pagination">
    <a href="#" class="p-3 rounded-full bg-stone-300 dark:bg-stone-700 text-stone-700 dark:text-stone-300 hover:bg-amber-600 dark:hover:bg-amber-400 hover:text-white transition-colors duration-200 shadow-sm">
      <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path></svg>
    </a>
    <a href="#" class="p-3 w-10 h-10 flex items-center justify-center rounded-full bg-amber-600 dark:bg-amber-400 text-white font-bold shadow-md">1</a>
    <a href="#" class="p-3 w-10 h-10 flex items-center justify-center rounded-full bg-stone-300 dark:bg-stone-700 text-stone-700 dark:text-stone-300 hover:bg-amber-600 dark:hover:bg-amber-400 hover:text-white transition-colors duration-200 shadow-sm">2</a>
    <a href="#" class="p-3 w-10 h-10 flex items-center justify-center rounded-full bg-stone-300 dark:bg-stone-700 text-stone-700 dark:text-stone-300 hover:bg-amber-600 dark:hover:bg-amber-400 hover:text-white transition-colors duration-200 shadow-sm">3</a>
    <span class="text-stone-600 dark:text-stone-400">...</span>
    <a href="#" class="p-3 w-10 h-10 flex items-center justify-center rounded-full bg-stone-300 dark:bg-stone-700 text-stone-700 dark:text-stone-300 hover:bg-amber-600 dark:hover:bg-amber-400 hover:text-white transition-colors duration-200 shadow-sm">10</a>
    <a href="#" class="p-3 rounded-full bg-stone-300 dark:bg-stone-700 text-stone-700 dark:text-stone-300 hover:bg-amber-600 dark:hover:bg-amber-400 hover:text-white transition-colors duration-200 shadow-sm">
      <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg>
    </a>
  </nav>

  <!-- Footer Placeholder -->
  <footer class="mt-12 text-center text-stone-600 dark:text-stone-400 text-sm border-t-4 border-amber-600 dark:border-amber-400 pt-8">
    <p>&copy; 2023 RAW Goods. All rights reserved.</p>
  </footer>

</div>

E-commerce Components 구성 요소

스위스/인터내셔널 타이포그래피(Swiss/International Typography) 스타일의 단순하고 미니멀한 예약/예약 구성 요소로, 밝은 액센트가 가미된 흑백 색 구성표가 특징입니다. 완벽하게 반응하며 다크 모드를 지원합니다.

열다 미리 보기

                <div class="font-sans antialiased text-gray-900 bg-white dark:bg-gray-900 dark:text-gray-100 min-h-screen flex items-center justify-center p-4">
  <div class="w-full max-w-sm bg-white dark:bg-gray-800 shadow-xl rounded-lg overflow-hidden border border-gray-100 dark:border-gray-700">
    <div class="p-6">
      <h2 class="text-2xl font-bold mb-2 text-gray-900 dark:text-gray-100 tracking-tight leading-tight">Book Your Spot</h2>
      <p class="text-gray-600 dark:text-gray-400 text-sm mb-6">Select your preferred date and time for a seamless experience.</p>

      <div class="mb-6">
        <label for="date-select" class="block text-xs uppercase font-semibold text-gray-500 dark:text-gray-400 mb-2 tracking-wide">Date</label>
        <select id="date-select" class="block w-full p-2 border border-gray-300 dark:border-gray-600 rounded-md bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400 focus:border-transparent transition-colors duration-200">
          <option value="">Select a Date</option>
          <option value="2023-10-26">Thursday, October 26</option>
          <option value="2023-10-27">Friday, October 27</option>
          <option value="2023-10-28">Saturday, October 28</option>
          <option value="2023-10-29">Sunday, October 29</option>
        </select>
      </div>

      <div class="mb-6">
        <label for="time-select" class="block text-xs uppercase font-semibold text-gray-500 dark:text-gray-400 mb-2 tracking-wide">Time</label>
        <div class="grid grid-cols-3 gap-2">
          <button class="relative px-3 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded-md text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500 transition-colors duration-200">
            9:00 AM
            <span class="absolute top-0 right-0 -mr-1 -mt-1 w-3 h-3 bg-red-500 rounded-full flex items-center justify-center text-white text-xs font-bold">5</span>
          </button>
          <button class="px-3 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded-md text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500 transition-colors duration-200">
            10:00 AM
          </button>
          <button class="px-3 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded-md text-blue-600 dark:text-blue-400 bg-blue-50 dark:bg-blue-900/40 border-blue-500 dark:border-blue-400 font-semibold focus:outline-none focus:ring-2 focus:ring-blue-500 transform scale-105 shadow-md transition-all duration-200">
            11:00 AM
          </button>
          <button class="px-3 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded-md text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500 transition-colors duration-200">
            1:00 PM
          </button>
          <button class="px-3 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded-md text-gray-400 dark:text-gray-500 bg-gray-50 dark:bg-gray-700 cursor-not-allowed" disabled>
            2:00 PM
          </button>
          <button class="px-3 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded-md text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500 transition-colors duration-200">
            3:00 PM
          </button>
        </div>
      </div>

      <button class="w-full py-3 bg-blue-600 dark:bg-blue-500 text-white font-semibold rounded-md hover:bg-blue-700 dark:hover:bg-blue-600 focus:outline-none focus:ring-4 focus:ring-blue-500/50 dark:focus:ring-blue-400/50 transition-colors duration-200 text-base uppercase tracking-wider">
        Confirm Booking
      </button>

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

Brutalism_Retro_Simple_E-commerce_Agriculture_Product_Card

전자상거래 농업/농업 웹사이트를 위한 단순하고 브루탈리즘 스타일의 제품 카드로, 복고풍 색 구성표가 있으며 제품 이미지, 제목, 가격 및 장바구니에 담기 버튼이 있습니다. 반응성과 다크 모드를 지원하도록 설계되었습니다.

열다 미리 보기

                <div class="p-4 sm:p-6 lg:p-8 bg-amber-100 dark:bg-zinc-900 border-4 border-amber-900 dark:border-lime-400 font-mono overflow-hidden">
  <div class="max-w-xs mx-auto bg-amber-50 dark:bg-stone-800 border-4 border-amber-900 dark:border-lime-400 shadow-lg dark:shadow-md dark:shadow-lime-600/50 transition-all duration-300 hover:shadow-xl dark:hover:shadow-lime-600/70 focus-within:ring-4 focus-within:ring-lime-600 focus-within:ring-offset-4 focus-within:ring-offset-amber-100 dark:focus-within:ring-offset-zinc-900 overflow-hidden">
    <div class="relative overflow-hidden aspect-w-16 aspect-h-9 sm:aspect-w-4 sm:aspect-h-3">
      <img src="https://picsum.photos/seed/agriculture/400/300" alt="Agricultural Product" class="w-full h-full object-cover object-center border-b-4 border-amber-900 dark:border-lime-400 group-hover:scale-105 transition-transform duration-300 ease-in-out">
      <div class="absolute top-0 right-0 p-2 bg-amber-900 dark:bg-lime-400 text-amber-50 dark:text-zinc-900 text-xs sm:text-sm font-bold border-l-4 border-b-4 border-amber-900 dark:border-lime-400 transform -translate-y-px translate-x-px">
        NEW
      </div>
    </div>
    <div class="p-4 sm:p-6 border-t-4 border-amber-900 dark:border-lime-400">
      <a href="#" class="block mt-2 mb-4 text-amber-900 dark:text-lime-400 text-xl sm:text-2xl font-extrabold uppercase leading-tight hover:underline focus:outline-none focus:ring-2 focus:ring-amber-900 dark:focus:ring-lime-400 focus:ring-offset-2 focus:ring-offset-amber-50 dark:focus:ring-offset-stone-800">
        Heirloom Seed Pack
      </a>
      <p class="text-stone-700 dark:text-stone-300 text-sm sm:text-base mb-4 line-clamp-2">
        Premium quality heirloom seeds for robust yields and sustainable farming.
      </p>
      <div class="flex items-baseline justify-between mb-6">
        <span class="text-2xl sm:text-3xl font-extrabold text-amber-900 dark:text-lime-400">
          $19.99
        </span>
        <span class="text-sm text-stone-500 dark:text-stone-400 line-through">
          $24.99
        </span>
      </div>
      <button class="w-full py-3 px-4 bg-amber-900 dark:bg-lime-400 text-amber-50 dark:text-zinc-900 text-lg sm:text-xl font-extrabold uppercase border-4 border-amber-900 dark:border-lime-400 whitespace-nowrap overflow-hidden text-ellipsis shadow-md dark:shadow-lg dark:shadow-lime-600/50 transition-colors duration-200 hover:bg-amber-800 dark:hover:bg-lime-500 focus:outline-none focus:ring-4 focus:ring-amber-900 dark:focus:ring-lime-400 focus:ring-offset-2 focus:ring-offset-amber-50 dark:focus:ring-offset-stone-800 active:border-amber-700 dark:active:border-lime-600">
        Add to Cart
      </button>
    </div>
  </div>
</div>