검색 구성 요소

카테고리

컨테이너

콘텐츠 너비를 제한하는 래퍼 요소

머티리얼 디자인 전자 상거래 컨테이너

제품 그리드, 장바구니 요약 및 어두운 테마 지원을 갖춘 반응형 전자 상거래 컨테이너 구성 요소로, 머티리얼 디자인 원칙과 어스 톤 색 구성표를 사용하여 설계되었습니다. 이미지, 제목, 가격, "장바구니에 추가" 버튼이 있는 제품 카드, 추가된 항목으로 업데이트되는 끈적한 장바구니 요약을 포함한 여러 대화형 요소가 있습니다. 레이아웃은 다양한 화면 크기에 맞게 조정되며 모든 요소에는 Tailwind CSS dark: 접두사로 정의된 어두운 모드 스타일이 있습니다.

열다 미리 보기

                <div class="min-h-screen bg-gray-100 dark:bg-gray-900 p-4 md:p-8 font-sans">

  <!-- Sticky Shopping Cart Summary -->
  <div class="sticky top-4 lg:top-8 bg-white dark:bg-gray-800 rounded-lg shadow-lg p-4 mb-8 z-10 border border-gray-200 dark:border-gray-700">
    <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-100 mb-4">Your Cart</h2>
    <div class="flex justify-between items-center text-gray-700 dark:text-gray-300">
      <p class="text-sm">Items: <span class="font-medium">3</span></p>
      <p class="text-sm">Total: <span class="font-medium">$250.00</span></p>
    </div>
    <button class="mt-4 w-full bg-orange-700 hover:bg-orange-800 text-white font-bold py-2 px-4 rounded-md shadow-md transition duration-300 ease-in-out">Checkout</button>
  </div>

  <!-- Product Grid -->
  <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">

    <!-- Product Card 1 -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden transform transition duration-300 hover:scale-105 border border-gray-200 dark:border-gray-700">
      <img class="w-full h-48 object-cover" src="https://picsum.photos/seed/product1/600/400" alt="Product Image">
      <div class="p-4">
        <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-100 mb-2">Earthen Vase</h3>
        <p class="text-gray-600 dark:text-gray-400 text-sm mb-3">Handcrafted ceramic vase with a rustic finish, perfect for any home decor.</p>
        <div class="flex justify-between items-center mb-4">
          <span class="text-xl font-bold text-gray-900 dark:text-gray-50">$45.00</span>
          <span class="text-sm text-gray-500 dark:text-gray-400 line-through">$60.00</span>
        </div>
        <button class="w-full bg-green-700 hover:bg-green-800 text-white font-bold py-2 px-4 rounded-md shadow-md transition duration-300 ease-in-out">Add to Cart</button>
      </div>
    </div>

    <!-- Product Card 2 -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden transform transition duration-300 hover:scale-105 border border-gray-200 dark:border-gray-700">
      <img class="w-full h-48 object-cover" src="https://picsum.photos/seed/product2/600/400" alt="Product Image">
      <div class="p-4">
        <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-100 mb-2">Terracotta Planter</h3>
        <p class="text-gray-600 dark:text-gray-400 text-sm mb-3">Classic terracotta planter, ideal for indoor and outdoor plants.</p>
        <div class="flex justify-between items-center mb-4">
          <span class="text-xl font-bold text-gray-900 dark:text-gray-50">$25.00</span>
        </div>
        <button class="w-full bg-green-700 hover:bg-green-800 text-white font-bold py-2 px-4 rounded-md shadow-md transition duration-300 ease-in-out">Add to Cart</button>
      </div>
    </div>

    <!-- Product Card 3 -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden transform transition duration-300 hover:scale-105 border border-gray-200 dark:border-gray-700">
      <img class="w-full h-48 object-cover" src="https://picsum.photos/seed/product3/600/400" alt="Product Image">
      <div class="p-4">
        <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-100 mb-2">Woodland Sculpture</h3>
        <p class="text-gray-600 dark:text-gray-400 text-sm mb-3">Artisan-crafted wooden sculpture, bringing nature indoors.</p>
        <div class="flex justify-between items-center mb-4">
          <span class="text-xl font-bold text-gray-900 dark:text-gray-50">$120.00</span>
          <span class="text-sm text-gray-500 dark:text-gray-400 line-through">$150.00</span>
        </div>
        <button class="w-full bg-green-700 hover:bg-green-800 text-white font-bold py-2 px-4 rounded-md shadow-md transition duration-300 ease-in-out">Add to Cart</button>
      </div>
    </div>

    <!-- Product Card 4 -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden transform transition duration-300 hover:scale-105 border border-gray-200 dark:border-gray-700">
      <img class="w-full h-48 object-cover" src="https://picsum.photos/seed/product4/600/400" alt="Product Image">
      <div class="p-4">
        <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-100 mb-2">Organic Cotton Towel</h3>
        <p class="text-gray-600 dark:text-gray-400 text-sm mb-3">Soft and absorbent towel made from sustainably sourced organic cotton.</p>
        <div class="flex justify-between items-center mb-4">
          <span class="text-xl font-bold text-gray-900 dark:text-gray-50">$30.00</span>
        </div>
        <button class="w-full bg-green-700 hover:bg-green-800 text-white font-bold py-2 px-4 rounded-md shadow-md transition duration-300 ease-in-out">Add to Cart</button>
      </div>
    </div>

    <!-- Product Card 5 -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden transform transition duration-300 hover:scale-105 border border-gray-200 dark:border-gray-700">
      <img class="w-full h-48 object-cover" src="https://picsum.photos/seed/product5/600/400" alt="Product Image">
      <div class="p-4">
        <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-100 mb-2">Amber Glass Bottle Set</h3>
        <p class="text-gray-600 dark:text-gray-400 text-sm mb-3">Set of three reusable amber glass bottles with sleek dispensers.</p>
        <div class="flex justify-between items-center mb-4">
          <span class="text-xl font-bold text-gray-900 dark:text-gray-50">$35.00</span>
        </div>
        <button class="w-full bg-green-700 hover:bg-green-800 text-white font-bold py-2 px-4 rounded-md shadow-md transition duration-300 ease-in-out">Add to Cart</button>
      </div>
    </div>

    <!-- Product Card 6 -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden transform transition duration-300 hover:scale-105 border border-gray-200 dark:border-gray-700">
      <img class="w-full h-48 object-cover" src="https://picsum.photos/seed/product6/600/400" alt="Product Image">
      <div class="p-4">
        <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-100 mb-2">Hemp Fabric Basket</h3>
        <p class="text-gray-600 dark:text-gray-400 text-sm mb-3">Eco-friendly storage basket made from durable hemp fabric.</p>
        <div class="flex justify-between items-center mb-4">
          <span class="text-xl font-bold text-gray-900 dark:text-gray-50">$50.00</span>
          <span class="text-sm text-gray-500 dark:text-gray-400 line-through">$70.00</span>
        </div>
        <button class="w-full bg-green-700 hover:bg-green-800 text-white font-bold py-2 px-4 rounded-md shadow-md transition duration-300 ease-in-out">Add to Cart</button>
      </div>
    </div>

  </div>
</div>

Skeuomorphic_E-commerce_Container

Skeuomorphic E-commerce Container Component in Pastel tones with Dark Mode 지원

열다 미리 보기

                <div class="relative m-4 rounded-xl bg-gradient-to-br from-purple-200 via-pink-200 to-red-200 p-8 shadow-2xl dark:from-purple-800 dark:via-pink-800 dark:to-red-800">
  <div class="absolute inset-0 rounded-xl border-4 border-white border-opacity-30 dark:border-gray-700"></div>

  <div class="relative z-10">
    <h2 class="mb-6 text-center font-serif text-4xl font-bold tracking-wide text-gray-800 drop-shadow-md dark:text-white">
      Skeuomorphic Product Showcase
    </h2>

    <div class="grid grid-cols-1 gap-8 md:grid-cols-2 lg:grid-cols-3">
      <!-- Product Card 1 -->
      <div class="relative transform rounded-xl bg-gradient-to-br from-white via-gray-50 to-gray-200 p-6 shadow-xl transition-all duration-300 hover:-translate-y-1 hover:shadow-2xl dark:from-gray-700 dark:via-gray-800 dark:to-gray-900">
        <div class="absolute inset-0 rounded-xl border-2 border-gray-100 dark:border-gray-600"></div>
        <img
          src="https://picsum.photos/seed/product1/400/300"
          alt="Product Image 1"
          class="mb-4 w-full rounded-lg shadow-md"
        />
        <h3 class="mb-2 text-xl font-semibold text-gray-800 dark:text-white">Vintage Camera</h3>
        <p class="mb-4 text-gray-600 dark:text-gray-300">A classic piece for photography enthusiasts.</p>
        <div class="flex items-center justify-between">
          <span class="text-2xl font-bold text-purple-700 dark:text-purple-300">$299.99</span>
          <button class="rounded-full bg-purple-600 px-5 py-2 font-semibold text-white shadow-lg transition-colors duration-300 hover:bg-purple-700 dark:bg-purple-700 dark:hover:bg-purple-600">
            Add to Cart
          </button>
        </div>
      </div>

      <!-- Product Card 2 -->
      <div class="relative transform rounded-xl bg-gradient-to-br from-white via-gray-50 to-gray-200 p-6 shadow-xl transition-all duration-300 hover:-translate-y-1 hover:shadow-2xl dark:from-gray-700 dark:via-gray-800 dark:to-gray-900">
        <div class="absolute inset-0 rounded-xl border-2 border-gray-100 dark:border-gray-600"></div>
        <img
          src="https://picsum.photos/seed/product2/400/300"
          alt="Product Image 2"
          class="mb-4 w-full rounded-lg shadow-md"
        />
        <h3 class="mb-2 text-xl font-semibold text-gray-800 dark:text-white">Leather Bound Journal</h3>
        <p class="mb-4 text-gray-600 dark:text-gray-300">Handcrafted for your deepest thoughts.</p>
        <div class="flex items-center justify-between">
          <span class="text-2xl font-bold text-purple-700 dark:text-purple-300">$45.00</span>
          <button class="rounded-full bg-purple-600 px-5 py-2 font-semibold text-white shadow-lg transition-colors duration-300 hover:bg-purple-700 dark:bg-purple-700 dark:hover:bg-purple-600">
            Add to Cart
          </button>
        </div>
      </div>

      <!-- Product Card 3 -->
      <div class="relative transform rounded-xl bg-gradient-to-br from-white via-gray-50 to-gray-200 p-6 shadow-xl transition-all duration-300 hover:-translate-y-1 hover:shadow-2xl dark:from-gray-700 dark:via-gray-800 dark:to-gray-900">
        <div class="absolute inset-0 rounded-xl border-2 border-gray-100 dark:border-gray-600"></div>
        <img
          src="https://picsum.photos/seed/product3/400/300"
          alt="Product Image 3"
          class="mb-4 w-full rounded-lg shadow-md"
        />
        <h3 class="mb-2 text-xl font-semibold text-gray-800 dark:text-white">Artisan Coffee Mug</h3>
        <p class="mb-4 text-gray-600 dark:text-gray-300">Enjoy your brew in style.</p>
        <div class="flex items-center justify-between">
          <span class="text-2xl font-bold text-purple-700 dark:text-purple-300">$22.50</span>
          <button class="rounded-full bg-purple-600 px-5 py-2 font-semibold text-white shadow-lg transition-colors duration-300 hover:bg-purple-700 dark:bg-purple-700 dark:hover:bg-purple-600">
            Add to Cart
          </button>
        </div>
      </div>
    </div>

    <div class="mt-10 flex justify-center">
      <button class="transform rounded-full bg-gradient-to-r from-green-400 to-blue-500 px-8 py-3 font-bold text-white shadow-lg transition-all duration-300 hover:scale-105 hover:from-green-500 hover:to-blue-600 dark:from-green-700 dark:to-blue-800 dark:hover:from-green-800 dark:hover:to-blue-900">
        View All Products
      </button>
    </div>
  </div>
</div>

컨테이너 구성 요소

파스텔 색상, 다크 모드 지원, Tailwind CSS를 사용하는 복잡한 인터랙티브 요소를 갖춘 전자 상거래를 위한 반응형 머티리얼 디자인 컨테이너입니다.

열다 미리 보기

                <div class="min-h-screen bg-gradient-to-br from-purple-50 to-pink-100 dark:from-gray-900 dark:to-gray-800 p-8 flex items-center justify-center">
  <div class="shadow-2xl rounded-3xl overflow-hidden max-w-6xl w-full bg-white dark:bg-gray-700 transition-all duration-300 transform hover:scale-[1.01] hover:shadow-purple-400/30 dark:hover:shadow-pink-400/20">
    <div class="md:flex">
      <!-- Product Image Section -->
      <div class="md:flex-shrink-0 md:w-1/2 relative">
        <img class="w-full h-96 object-cover object-center transform transition-transform duration-500 hover:scale-105" src="https://picsum.photos/seed/picsum/600/400" alt="Product Image">
        <div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent"></div>
        <div class="absolute bottom-0 left-0 p-6">
          <h1 class="text-4xl font-extrabold text-white mb-2">Premium Gadget Pro</h1>
          <p class="text-purple-200 text-lg">Unleash your potential with unparalleled performance.</p>
        </div>
        <span class="absolute top-4 left-4 bg-purple-500 text-white text-sm font-bold px-3 py-1 rounded-full shadow-lg">NEW ARRIVAL</span>
      </div>

      <!-- Product Details Section -->
      <div class="p-8 md:w-1/2 flex flex-col justify-between">
        <div>
          <span class="text-sm text-purple-600 dark:text-purple-300 font-semibold mb-2 block">Electronics > Smartphones</span>
          <h2 class="text-4xl font-bold text-gray-800 dark:text-white mb-4">Flagship Smartphone X</h2>
          <p class="text-gray-600 dark:text-gray-300 leading-relaxed mb-6">Experience cutting-edge technology with our revolutionary smartphone. Featuring a stunning display, an advanced camera system, and all-day battery life.</p>
          
          <div class="flex items-center mb-6">
            <span class="text-5xl font-extrabold text-purple-700 dark:text-purple-300 mr-3">$999</span>
            <span class="text-xl text-gray-400 line-through">$1200</span>
            <span class="ml-3 bg-green-200 text-green-800 text-sm font-bold px-3 py-1 rounded-full">17% OFF</span>
          </div>

          <!-- Color Options -->
          <div class="mb-6">
            <h3 class="text-lg font-semibold text-gray-800 dark:text-white mb-3">Color:</h3>
            <div class="flex space-x-3">
              <button class="w-10 h-10 rounded-full bg-blue-500 border-4 border-purple-400 focus:outline-none focus:ring-4 focus:ring-blue-300 transition-all duration-200"></button>
              <button class="w-10 h-10 rounded-full bg-pink-500 border-2 border-transparent hover:border-purple-400 focus:outline-none focus:ring-4 focus:ring-pink-300 transition-all duration-200"></button>
              <button class="w-10 h-10 rounded-full bg-gray-800 border-2 border-transparent hover:border-purple-400 focus:outline-none focus:ring-4 focus:ring-gray-600 transition-all duration-200"></button>
            </div>
          </div>

          <!-- Quantity Selector -->
          <div class="mb-8">
            <h3 class="text-lg font-semibold text-gray-800 dark:text-white mb-3">Quantity:</h3>
            <div class="flex items-center space-x-3">
              <button class="bg-gray-200 dark:bg-gray-600 text-gray-700 dark:text-white p-2 rounded-lg hover:bg-gray-300 dark:hover:bg-gray-500 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-purple-400">-</button>
              <span class="text-xl font-bold text-gray-800 dark:text-white">1</span>
              <button class="bg-gray-200 dark:bg-gray-600 text-gray-700 dark:text-white p-2 rounded-lg hover:bg-gray-300 dark:hover:bg-gray-500 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-purple-400">+</button>
            </div>
          </div>
        </div>

        <!-- Call to Action Buttons -->
        <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
          <button class="bg-purple-600 hover:bg-purple-700 text-white font-bold py-3 px-6 rounded-xl shadow-lg transform hover:scale-105 transition-all duration-200 focus:outline-none focus:ring-4 focus:ring-purple-300">Add to Cart</button>
          <button class="bg-pink-500 hover:bg-pink-600 text-white font-bold py-3 px-6 rounded-xl shadow-lg transform hover:scale-105 transition-all duration-200 focus:outline-none focus:ring-4 focus:ring-pink-300">Buy Now</button>
        </div>
      </div>
    </div>
    
    <!-- Customer Reviews Section -->
    <div class="p-8 border-t border-gray-200 dark:border-gray-600">
      <h3 class="text-2xl font-bold text-gray-800 dark:text-white mb-6">Customer Reviews</h3>
      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        <!-- Review Card 1 -->
        <div class="bg-gray-50 dark:bg-gray-600 p-6 rounded-2xl shadow-md transition-all duration-200 transform hover:scale-[1.02] hover:shadow-lg">
          <div class="flex items-center mb-4">
            <img class="w-12 h-12 rounded-full mr-4 object-cover" src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar">
            <div>
              <p class="font-semibold text-gray-800 dark:text-white">Jane Doe</p>
              <div class="flex text-yellow-400 text-sm">
                <i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star-half-alt"></i>
              </div>
            </div>
          </div>
          <p class="text-gray-600 dark:text-gray-200 leading-relaxed">
            "Absolutely love this product! The camera is incredible and the battery lasts forever. Highly recommend it to everyone."
          </p>
        </div>
        
        <!-- Review Card 2 -->
        <div class="bg-gray-50 dark:bg-gray-600 p-6 rounded-2xl shadow-md transition-all duration-200 transform hover:scale-[1.02] hover:shadow-lg">
          <div class="flex items-center mb-4">
            <img class="w-12 h-12 rounded-full mr-4 object-cover" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
            <div>
              <p class="font-semibold text-gray-800 dark:text-white">John Smith</p>
              <div class="flex text-yellow-400 text-sm">
                <i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i>
              </div>
            </div>
          </div>
          <p class="text-gray-600 dark:text-gray-200 leading-relaxed">
            "Fast shipping and the phone exceeded my expectations. So smooth and powerful. Best purchase this year!"
          </p>
        </div>

        <!-- Review Card 3 -->
        <div class="bg-gray-50 dark:bg-gray-600 p-6 rounded-2xl shadow-md transition-all duration-200 transform hover:scale-[1.02] hover:shadow-lg">
          <div class="flex items-center mb-4">
            <img class="w-12 h-12 rounded-full mr-4 object-cover" src="https://randomuser.me/api/portraits/women/76.jpg" alt="User Avatar">
            <div>
              <p class="font-semibold text-gray-800 dark:text-white">Emily White</p>
              <div class="flex text-yellow-400 text-sm">
                <i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="far fa-star"></i>
              </div>
            </div>
          </div>
          <p class="text-gray-600 dark:text-gray-200 leading-relaxed">
            "Great phone, though it took a bit to get used to the new OS. Still, fantastic performance and beautiful design."
          </p>
        </div>
      </div>
    </div>

    <!-- Related Products Section -->
    <div class="p-8 border-t border-gray-200 dark:border-gray-600">
      <h3 class="text-2xl font-bold text-gray-800 dark:text-white mb-6">Related Products</h3>
      <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
        <!-- Related Product Card 1 -->
        <div class="bg-gray-50 dark:bg-gray-600 rounded-2xl shadow-md overflow-hidden transition-all duration-200 transform hover:scale-[1.03] hover:shadow-lg">
          <img class="w-full h-48 object-cover" src="https://picsum.photos/seed/related1/400/300" alt="Related Product">
          <div class="p-4">
            <h4 class="font-semibold text-gray-800 dark:text-white mb-1">Wireless Headphones</h4>
            <p class="text-sm text-gray-600 dark:text-gray-300 mb-2">Immersive audio experience.</p>
            <p class="text-lg font-bold text-purple-700 dark:text-purple-300">$149</p>
            <button class="mt-4 w-full bg-purple-500 text-white py-2 rounded-lg text-sm hover:bg-purple-600 focus:outline-none focus:ring-2 focus:ring-purple-400 transition-colors duration-200">View Details</button>
          </div>
        </div>

        <!-- Related Product Card 2 -->
        <div class="bg-gray-50 dark:bg-gray-600 rounded-2xl shadow-md overflow-hidden transition-all duration-200 transform hover:scale-[1.03] hover:shadow-lg">
          <img class="w-full h-48 object-cover" src="https://picsum.photos/seed/related2/400/300" alt="Related Product">
          <div class="p-4">
            <h4 class="font-semibold text-gray-800 dark:text-white mb-1">Smartwatch Elite</h4>
            <p class="text-sm text-gray-600 dark:text-gray-300 mb-2">Track your fitness and stay connected.</p>
            <p class="text-lg font-bold text-purple-700 dark:text-purple-300">$299</p>
            <button class="mt-4 w-full bg-purple-500 text-white py-2 rounded-lg text-sm hover:bg-purple-600 focus:outline-none focus:ring-2 focus:ring-purple-400 transition-colors duration-200">View Details</button>
          </div>
        </div>

        <!-- Related Product Card 3 -->
        <div class="bg-gray-50 dark:bg-gray-600 rounded-2xl shadow-md overflow-hidden transition-all duration-200 transform hover:scale-[1.03] hover:shadow-lg">
          <img class="w-full h-48 object-cover" src="https://picsum.photos/seed/related3/400/300" alt="Related Product">
          <div class="p-4">
            <h4 class="font-semibold text-gray-800 dark:text-white mb-1">Portable Power Bank</h4>
            <p class="text-sm text-gray-600 dark:text-gray-300 mb-2">Never run out of battery.</p>
            <p class="text-lg font-bold text-purple-700 dark:text-purple-300">$59</p>
            <button class="mt-4 w-full bg-purple-500 text-white py-2 rounded-lg text-sm hover:bg-purple-600 focus:outline-none focus:ring-2 focus:ring-purple-400 transition-colors duration-200">View Details</button>
          </div>
        </div>

        <!-- Related Product Card 4 -->
        <div class="bg-gray-50 dark:bg-gray-600 rounded-2xl shadow-md overflow-hidden transition-all duration-200 transform hover:scale-[1.03] hover:shadow-lg">
          <img class="w-full h-48 object-cover" src="https://picsum.photos/seed/related4/400/300" alt="Related Product">
          <div class="p-4">
            <h4 class="font-semibold text-gray-800 dark:text-white mb-1">Noise-Cancelling Earbuds</h4>
            <p class="text-sm text-gray-600 dark:text-gray-300 mb-2">Pure sound, no distractions.</p>
            <p class="text-lg font-bold text-purple-700 dark:text-purple-300">$199</p>
            <button class="mt-4 w-full bg-purple-500 text-white py-2 rounded-lg text-sm hover:bg-purple-600 focus:outline-none focus:ring-2 focus:ring-purple-400 transition-colors duration-200">View Details</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- Font Awesome for icons (optional) -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">

E-commerce 컨테이너 구성 요소

Glassmorphism E-commerce Container Component with Triadic Color Scheme and Complex Layout, including Dark Mode Support

열다 미리 보기

                <div class="container mx-auto p-8 max-w-screen-lg dark:bg-gray-800 dark:text-white bg-gray-100 text-gray-800 rounded-xl shadow-lg backdrop-filter backdrop-blur-lg bg-opacity-20 dark:bg-opacity-20 border border-gray-200 dark:border-gray-700">

  <!-- Header -->
  <header class="flex justify-between items-center mb-8">
    <h1 class="text-3xl font-bold text-blue-600 dark:text-blue-400">Featured Products</h1>
    <nav>
      <ul class="flex space-x-4">
        <li><a href="#" class="text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition duration-300">Home</a></li>
        <li><a href="#" class="text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition duration-300">Shop</a></li>
        <li><a href="#" class="text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition duration-300">About</a></li>
        <li><a href="#" class="text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition duration-300">Contact</a></li>
      </ul>
    </nav>
  </header>

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

    <!-- Product Card 1 -->
    <div class="bg-white dark:bg-gray-900 rounded-lg shadow-lg p-6 border border-green-200 dark:border-green-700 backdrop-filter backdrop-blur-md bg-opacity-30 dark:bg-opacity-30 transform transition duration-500 hover:scale-105">
      <img src="https://picsum.photos/seed/product1/400/300" alt="Product Image" class="rounded-md mb-4">
      <h2 class="text-xl font-semibold text-purple-700 dark:text-purple-400 mb-2">Product Name 1</h2>
      <p class="text-gray-600 dark:text-gray-400 mb-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
      <div class="flex justify-between items-center">
        <span class="text-2xl font-bold text-red-600 dark:text-red-400">$49.99</span>
        <button class="bg-red-500 dark:bg-red-700 text-white py-2 px-4 rounded-full hover:bg-red-600 dark:hover:bg-red-800 transition duration-300">Add to Cart</button>
      </div>
    </div>

    <!-- Product Card 2 -->
    <div class="bg-white dark:bg-gray-900 rounded-lg shadow-lg p-6 border border-purple-200 dark:border-purple-700 backdrop-filter backdrop-blur-md bg-opacity-30 dark:bg-opacity-30 transform transition duration-500 hover:scale-105">
        <img src="https://picsum.photos/seed/product2/400/300" alt="Product Image" class="rounded-md mb-4">
        <h2 class="text-xl font-semibold text-red-700 dark:text-red-400 mb-2">Product Name 2</h2>
        <p class="text-gray-600 dark:text-gray-400 mb-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        <div class="flex justify-between items-center">
          <span class="text-2xl font-bold text-green-600 dark:text-green-400">$29.50</span>
          <button class="bg-green-500 dark:bg-green-700 text-white py-2 px-4 rounded-full hover:bg-green-600 dark:hover:bg-green-800 transition duration-300">Add to Cart</button>
        </div>
      </div>

    <!-- Product Card 3 -->
    <div class="bg-white dark:bg-gray-900 rounded-lg shadow-lg p-6 border border-red-200 dark:border-red-700 backdrop-filter backdrop-blur-md bg-opacity-30 dark:bg-opacity-30 transform transition duration-500 hover:scale-105">
        <img src="https://picsum.photos/seed/product3/400/300" alt="Product Image" class="rounded-md mb-4">
        <h2 class="text-xl font-semibold text-green-700 dark:text-green-400 mb-2">Product Name 3</h2>
        <p class="text-gray-600 dark:text-gray-400 mb-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        <div class="flex justify-between items-center">
          <span class="text-2xl font-bold text-purple-600 dark:text-purple-400">$75.00</span>
          <button class="bg-purple-500 dark:bg-purple-700 text-white py-2 px-4 rounded-full hover:bg-purple-600 dark:hover:bg-purple-800 transition duration-300">Add to Cart</button>
        </div>
      </div>

  </div>

  <!-- Footer -->
  <footer class="mt-8 text-center text-gray-600 dark:text-gray-400">
    &copy; 2023 Your E-commerce Store. All rights reserved.
  </footer>

</div>

컨테이너 구성 요소

다크 모드를 지원하는 Tailwind CSS를 사용하는 대시보드용 미니멀리스트 컨테이너 구성 요소입니다.

열다 미리 보기

                <div class="bg-gray-100 dark:bg-gray-800 p-6 rounded-lg shadow-md">
    <h2 class="text-xl font-semibold text-gray-800 dark:text-white mb-4">Dashboard</h2>
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        <div class="bg-white dark:bg-gray-700 p-4 rounded-lg shadow">
            <h3 class="text-lg font-medium text-gray-800 dark:text-white mb-2">Data Card 1</h3>
            <img src="https://picsum.photos/200/100" alt="Data visualization image" class="w-full h-auto rounded-lg mb-2">
            <p class="text-gray-600 dark:text-gray-300">Some description of the data card.</p>
        </div>
        <div class="bg-white dark:bg-gray-700 p-4 rounded-lg shadow">
            <h3 class="text-lg font-medium text-gray-800 dark:text-white mb-2">Data Card 2</h3>
            <img src="https://picsum.photos/200/100" alt="Data visualization image" class="w-full h-auto rounded-lg mb-2">
            <p class="text-gray-600 dark:text-gray-300">Some description of the data card.</p>
        </div>
        <div class="bg-white dark:bg-gray-700 p-4 rounded-lg shadow">
            <h3 class="text-lg font-medium text-gray-800 dark:text-white mb-2">Data Card 3</h3>
            <img src="https://picsum.photos/200/100" alt="Data visualization image" class="w-full h-auto rounded-lg mb-2">
            <p class="text-gray-600 dark:text-gray-300">Some description of the data card.</p>
        </div>
    </div>
    <div class="mt-6 flex items-center justify-between">
        <div class="flex items-center">
            <img src="https://randomuser.me/api/portraits/thumb/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-2">
            <span class="text-gray-800 dark:text-white font-medium">User Name</span>
        </div>
        <button class="bg-gray-800 dark:bg-gray-200 text-white dark:text-gray-800 font-semibold py-2 px-4 rounded hover:bg-gray-700 dark:hover:bg-gray-300">Action</button>
    </div>
</div>

컨테이너 구성 요소

반응형 컨테이너 구성 요소(다크 모드 사용)

열다 미리 보기

                <div class="container mx-auto px-4 py-8 dark:bg-gray-800">
  <div class="max-w-md mx-auto bg-white rounded-xl shadow-md overflow-hidden md:max-w-2xl dark:bg-gray-700">
    <div class="md:flex">
      <div class="md:flex-shrink-0">
        <img class="h-48 w-full object-cover md:w-48" src="https://picsum.photos/seed/picsum/200/300" alt="Random image">
      </div>
      <div class="p-8">
        <div class="uppercase tracking-wide text-sm text-indigo-500 font-semibold dark:text-indigo-300">Case Study</div>
        <a href="#" class="block mt-1 text-lg leading-tight font-medium text-black hover:underline dark:text-white">Innovating with Microinteractions</a>
        <p class="mt-2 text-gray-500 dark:text-gray-300">Exploring the power of small, engaging animations to enhance user experience in portfolio websites. This triadic color scheme (using shades of indigo, red, and yellow in other potential elements) provides a vibrant yet balanced feel. Moderate complexity allows for subtle hover effects and transitions.</p>
        <div class="mt-4">
          <span class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2 dark:bg-gray-600 dark:text-gray-200">#microinteractions</span>
          <span class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2 dark:bg-gray-600 dark:text-gray-200">#tailwindcss</span>
          <span class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 dark:bg-gray-600 dark:text-gray-200">#portfolio</span>
        </div>
      </div>
    </div>
  </div>
</div>

3D 그레이스케일 비즈니스 컨테이너

비즈니스/기업 웹 사이트를 위한 3D 그레이스케일 컨테이너 구성 요소

열다 미리 보기

                <div class="min-h-screen bg-gray-100 dark:bg-gray-900 py-12 px-4 sm:px-6 lg:px-8">
  <div class="relative max-w-md mx-auto dark:bg-gray-800 bg-white rounded-xl shadow-2xl overflow-hidden md:max-w-2xl perspective">
    <div class="md:flex">
      <div class="md:flex-shrink-0">
        <img class="h-48 w-full object-cover md:w-48 view-3d" src="https://picsum.photos/seed/unsplash/600/400" alt="Modern building architecture">
      </div>
      <div class="p-8 flex flex-col justify-between leading-normal">
        <div class="mb-8">
          <p class="text-sm font-bold text-gray-500 dark:text-gray-400">Business Solutions</p>
          <h2 class="mt-2 text-2xl font-semibold text-gray-900 dark:text-white">Innovative Strategies for Growth</h2>
          <p class="mt-2 text-gray-600 dark:text-gray-300">We provide cutting-edge solutions to help your business thrive in a competitive market. Our strategies are tailored to your specific needs for maximum impact.</p>
        </div>
        <div class="flex items-center">
          <img class="w-10 h-10 rounded-full mr-4 view-3d-avatar" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar of the CEO">
          <div class="text-sm">
            <p class="text-gray-900 dark:text-white leading-none">John Smith</p>
            <p class="text-gray-600 dark:text-gray-400">CEO and Founder</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<style>
.perspective {
  perspective: 1000px;
}

.view-3d {
  transform: rotateY(5deg) rotateX(5deg);
  transition: transform 0.5s ease;
}

.view-3d:hover {
  transform: rotateY(0deg) rotateX(0deg);
}

.view-3d-avatar {
    transform: translateZ(20px);
    transition: transform 0.5s ease;
}

.view-3d-avatar:hover {
  transform: translateZ(0px);
}
</style>

Neumorphic 컨테이너 구성 요소

작업이나 제품을 보여주기 위한 반응형 뉴모픽 컨테이너 구성 요소로, Tailwind CSS를 사용하여 트라이어드 색 구성표와 어두운 테마 지원으로 설계되었습니다.

열다 미리 보기

                <div class="flex flex-col items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-800 p-4">
    <div class="bg-gray-300 dark:bg-gray-900 shadow-neumorphic rounded-lg p-6 w-full max-w-md">
        <div class="flex flex-col items-center justify-center mb-4">
            <img src="https://picsum.photos/200/150" alt="Portfolio Item" class="rounded-lg mb-2 shadow-neumorphic">
            <h2 class="text-lg font-bold text-gray-800 dark:text-gray-200">Portfolio Item Title</h2>
            <p class="text-gray-600 dark:text-gray-400">A brief description of the portfolio item goes here. It showcases the work done and highlights key features.</p>
        </div>
        <div class="flex items-center mt-4">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full shadow-neumorphic">
            <span class="ml-2 text-gray-800 dark:text-gray-200">John Doe</span>
        </div>
        <div class="mt-4">
            <a href="#" class="text-blue-500 dark:text-blue-300 hover:underline transition ease-in-out duration-200">View Details</a>
        </div>
    </div>
</div>

<style>
    .shadow-neumorphic {
        box-shadow: 8px 8px 15px rgba(0, 0, 0, 0.3),
                    -8px -8px 15px rgba(255, 255, 255, 0.5);
    }
</style>

Glassmorphism 컨테이너 구성 요소

포트폴리오를 위해 설계된 트라이어드 색 구성표가 있는 반응형 Glassmorphism 컨테이너 구성 요소입니다. 다크 모드를 지원합니다.

열다 미리 보기

                <div class="flex items-center justify-center min-h-screen bg-gradient-to-br from-blue-200 via-purple-200 to-pink-200 dark:from-gray-800 dark:via-gray-700 dark:to-gray-600">
  <div class="container mx-auto p-8">
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">

      <!-- Feature 1 -->
      <div class="backdrop-filter backdrop-blur-xl bg-white bg-opacity-20 dark:bg-gray-700 dark:bg-opacity-20 rounded-xl p-8 shadow-lg transform transition duration-500 hover:scale-105">
        <h3 class="font-bold text-xl mb-4 text-gray-800 dark:text-white">Project Title 1</h3>
        <img src="https://picsum.photos/400/250?random=1" alt="Project Image 1" class="rounded-md mb-4">
        <p class="text-gray-700 dark:text-gray-300 mb-4">A brief description of the project. Showcasing skills and technologies used.</p>
        <a href="#" class="text-blue-700 dark:text-blue-300 hover:underline">View Details</a>
      </div>

      <!-- Feature 2 -->
      <div class="backdrop-filter backdrop-blur-xl bg-white bg-opacity-20 dark:bg-gray-700 dark:bg-opacity-20 rounded-xl p-8 shadow-lg transform transition duration-500 hover:scale-105">
        <h3 class="font-bold text-xl mb-4 text-gray-800 dark:text-white">Project Title 2</h3>
        <img src="https://picsum.photos/400/250?random=2" alt="Project Image 2" class="rounded-md mb-4">
        <p class="text-gray-700 dark:text-gray-300 mb-4">A brief description of the project. Showcasing skills and technologies used.</p>
        <a href="#" class="text-blue-700 dark:text-blue-300 hover:underline">View Details</a>
      </div>

      <!-- Feature 3 -->
      <div class="backdrop-filter backdrop-blur-xl bg-white bg-opacity-20 dark:bg-gray-700 dark:bg-opacity-20 rounded-xl p-8 shadow-lg transform transition duration-500 hover:scale-105">
        <h3 class="font-bold text-xl mb-4 text-gray-800 dark:text-white">Project Title 3</h3>
        <img src="https://picsum.photos/400/250?random=3" alt="Project Image 3" class="rounded-md mb-4">
        <p class="text-gray-700 dark:text-gray-300 mb-4">A brief description of the project. Showcasing skills and technologies used.</p>
        <a href="#" class="text-blue-700 dark:text-blue-300 hover:underline">View Details</a>
      </div>
      
      <!-- Add more features as needed -->

        <!-- Contact/Profile Section -->
        <div class="md:col-span-2 lg:col-span-3 backdrop-filter backdrop-blur-xl bg-white bg-opacity-20 dark:bg-gray-700 dark:bg-opacity-20 rounded-xl p-8 shadow-lg text-center">
            <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar" class="rounded-full w-24 h-24 mx-auto mb-4">
            <h3 class="font-bold text-xl mb-2 text-gray-800 dark:text-white">Your Name</h3>
            <p class="text-gray-700 dark:text-gray-300 mb-4">Web Developer | Designer | Portfolio Owner</p>
            <div class="flex justify-center space-x-4">
                <a href="#" class="text-gray-700 dark:text-gray-300 hover:text-blue-700 dark:hover:text-blue-300"><i class="fab fa-twitter"></i></a>
                <a href="#" class="text-gray-700 dark:text-gray-300 hover:text-blue-700 dark:hover:text-blue-300"><i class="fab fa-linkedin"></i></a>
                <a href="#" class="text-gray-700 dark:text-gray-300 hover:text-blue-700 dark:hover:text-blue-300"><i class="fab fa-github"></i></a>
            </div>
        </div>

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

컨테이너 구성 요소

어두운 테마와 반응형 디자인을 갖춘 스큐어모픽 포트폴리오 컨테이너 구성 요소로, 인터랙티브 요소로 작업과 제품을 선보입니다.

열다 미리 보기

                <div class="bg-gray-800 p-5 rounded-lg shadow-lg dark:bg-gray-900 transition-all">
    <h2 class="text-3xl font-bold text-gray-200 dark:text-gray-100 mb-5">My Portfolio</h2>
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
        <div class="max-w-sm rounded overflow-hidden shadow-lg bg-gray-700 dark:bg-gray-800">
            <img class="w-full" src="https://picsum.photos/300/200?random=1" alt="Portfolio Item">
            <div class="p-5">
                <div class="font-bold text-xl mb-2 text-gray-200 dark:text-gray-100">Project Title 1</div>
                <p class="text-gray-300 dark:text-gray-400">A brief description of the project showcasing my skills and efforts on this particular piece.</p>
            </div>
        </div>
        <div class="max-w-sm rounded overflow-hidden shadow-lg bg-gray-700 dark:bg-gray-800">
            <img class="w-full" src="https://picsum.photos/300/200?random=2" alt="Portfolio Item">
            <div class="p-5">
                <div class="font-bold text-xl mb-2 text-gray-200 dark:text-gray-100">Project Title 2</div>
                <p class="text-gray-300 dark:text-gray-400">A brief description of another project showcasing unique features and creative solutions.</p>
            </div>
        </div>
        <div class="max-w-sm rounded overflow-hidden shadow-lg bg-gray-700 dark:bg-gray-800">
            <img class="w-full" src="https://picsum.photos/300/200?random=3" alt="Portfolio Item">
            <div class="p-5">
                <div class="font-bold text-xl mb-2 text-gray-200 dark:text-gray-100">Project Title 3</div>
                <p class="text-gray-300 dark:text-gray-400">Description of the project highlighting my contributions and outcomes of the work.</p>
            </div>
        </div>
    </div>
    <div class="mt-5 text-center">
        <h3 class="text-xl font-bold text-gray-200 dark:text-gray-100 mb-3">Contact Me</h3>
        <div class="flex justify-center space-x-4">
            <a href="#" class="flex items-center text-gray-300 dark:text-gray-400 hover:text-gray-200 dark:hover:text-gray-100">
                <img src="https://randomuser.me/api/portraits/men/1.jpg" class="w-10 h-10 rounded-full mr-2" alt="Avatar"> My Name
            </a>
        </div>
    </div>
</div>