Home
Rathanak Phan
E-commerce Website UI Design

E-commerce Website UI Design

Here is a well-structured UI Design for a general e-commerce website template. This can be used as a reference for designers and developers to build or evaluate the UI components needed for an e-commerce site.
View https://github.com/Rathanak-Phan/general-e-commerce-website-template

This tailwind example is contributed by Rathanak Phan, on 10-Jun-2025. Component is made with Tailwind CSS v3. It is responsive. similar terms for this example are Service rates, Subscription plans,Product Showcase, Product card

Pricing Product eCommerce

Author Rathanak Phan

1.4k

Fork Fullscreen

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>ShopEase - Premium Shopping Experience</title>
    <script src="https://cdn.tailwindcss.com/3.4.16"></script>
    <script>
      tailwind.config = {
        theme: {
          extend: {
            colors: { primary: "#4f46e5", secondary: "#f97316" },
            borderRadius: {
              none: "0px",
              sm: "4px",
              DEFAULT: "8px",
              md: "12px",
              lg: "16px",
              xl: "20px",
              "2xl": "24px",
              "3xl": "32px",
              full: "9999px",
              button: "8px",
            },
          },
        },
      };
    </script>
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=Pacifico&family=Inter:wght@300;400;500;600;700&display=swap"
      rel="stylesheet"
    />
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/remixicon/4.6.0/remixicon.min.css"
    />
    <style>
      :where([class^="ri-"])::before { content: "\f3c2"; }
      body {
          font-family: 'Inter', sans-serif;
      }
      .hero-section {
          background-image: url('https://readdy.ai/api/search-image?query=modern%20e-commerce%20website%20hero%20image%20with%20stylish%20clothing%20items%20arranged%20on%20a%20clean%20minimalist%20background%2C%20soft%20gradient%20lighting%2C%20professional%20product%20photography%20style%2C%20high-end%20fashion%20items%20displayed%20elegantly%2C%20neutral%20colors%20with%20subtle%20accent%20colors%2C%20plenty%20of%20whitespace%20on%20the%20left%20side%20for%20text&width=1920&height=600&seq=hero1&orientation=landscape');
          background-size: cover;
          background-position: center right;
      }
      input[type="number"]::-webkit-inner-spin-button,
      input[type="number"]::-webkit-outer-spin-button {
          -webkit-appearance: none;
          margin: 0;
      }
      .custom-checkbox {
          position: relative;
          cursor: pointer;
      }
      .custom-checkbox input {
          position: absolute;
          opacity: 0;
          cursor: pointer;
      }
      .checkmark {
          position: absolute;
          top: 0;
          left: 0;
          height: 18px;
          width: 18px;
          background-color: #fff;
          border: 1px solid #d1d5db;
          border-radius: 4px;
      }
      .custom-checkbox:hover input ~ .checkmark {
          background-color: #f3f4f6;
      }
      .custom-checkbox input:checked ~ .checkmark {
          background-color: #4f46e5;
          border-color: #4f46e5;
      }
      .checkmark:after {
          content: "";
          position: absolute;
          display: none;
      }
      .custom-checkbox input:checked ~ .checkmark:after {
          display: block;
      }
      .custom-checkbox .checkmark:after {
          left: 6px;
          top: 2px;
          width: 5px;
          height: 10px;
          border: solid white;
          border-width: 0 2px 2px 0;
          transform: rotate(45deg);
      }
      .switch {
          position: relative;
          display: inline-block;
          width: 44px;
          height: 24px;
      }
      .switch input {
          opacity: 0;
          width: 0;
          height: 0;
      }
      .slider {
          position: absolute;
          cursor: pointer;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          background-color: #e5e7eb;
          transition: .4s;
          border-radius: 34px;
      }
      .slider:before {
          position: absolute;
          content: "";
          height: 18px;
          width: 18px;
          left: 3px;
          bottom: 3px;
          background-color: white;
          transition: .4s;
          border-radius: 50%;
      }
      input:checked + .slider {
          background-color: #4f46e5;
      }
      input:checked + .slider:before {
          transform: translateX(20px);
      }
      .custom-range {
          -webkit-appearance: none;
          width: 100%;
          height: 6px;
          border-radius: 5px;
          background: #e5e7eb;
          outline: none;
      }
      .custom-range::-webkit-slider-thumb {
          -webkit-appearance: none;
          appearance: none;
          width: 18px;
          height: 18px;
          border-radius: 50%;
          background: #4f46e5;
          cursor: pointer;
      }
      .custom-range::-moz-range-thumb {
          width: 18px;
          height: 18px;
          border-radius: 50%;
          background: #4f46e5;
          cursor: pointer;
          border: none;
      }
      .dropdown-content {
          display: none;
          position: absolute;
          background-color: white;
          min-width: 160px;
          box-shadow: 0 8px 16px rgba(0,0,0,0.1);
          z-index: 50;
          border-radius: 8px;
      }
    </style>
  </head>
  <body class="bg-white">
    
    <header class="sticky top-0 z-50 bg-white shadow-sm">
      <div
        class="container mx-auto px-4 py-4 flex items-center justify-between"
      >
        
        <a href="#" class="font-['Pacifico'] text-2xl text-primary">logo</a>

<nav class="hidden md:flex space-x-8">
          <a
            href="#"
            class="text-gray-900 font-medium hover:text-primary transition-colors"
            >Home</a
          >
          <div class="relative group">
            <button
              class="text-gray-900 font-medium hover:text-primary transition-colors flex items-center"
            >
              Shop
              <div class="w-4 h-4 ml-1 flex items-center justify-center">
                <i class="ri-arrow-down-s-line"></i>
              </div>
            </button>
            <div
              class="absolute left-0 mt-2 w-48 bg-white shadow-lg rounded hidden group-hover:block"
            >
              <a
                href="#"
                class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50"
                >Women</a
              >
              <a
                href="#"
                class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50"
                >Men</a
              >
              <a
                href="#"
                class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50"
                >Accessories</a
              >
              <a
                href="#"
                class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50"
                >Footwear</a
              >
            </div>
          </div>
          <a
            href="#"
            class="text-gray-900 font-medium hover:text-primary transition-colors"
            >New Arrivals</a
          >
          <a
            href="#"
            class="text-gray-900 font-medium hover:text-primary transition-colors"
            >Sale</a
          >
          <a
            href="#"
            class="text-gray-900 font-medium hover:text-primary transition-colors"
            >About</a
          >
        </nav>

<div class="flex items-center space-x-6">
          
          <div class="relative">
            <button
              id="searchToggle"
              class="w-10 h-10 flex items-center justify-center text-gray-700 hover:text-primary transition-colors"
            >
              <i class="ri-search-line text-xl"></i>
            </button>
            <div
              id="searchDropdown"
              class="hidden absolute right-0 mt-2 w-72 bg-white shadow-lg rounded-lg p-4"
            >
              <div class="relative">
                <input
                  type="text"
                  placeholder="Search products..."
                  class="w-full pl-10 pr-4 py-2 border border-gray-200 rounded focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary text-sm"
                />
                <div
                  class="absolute left-3 top-1/2 transform -translate-y-1/2 w-4 h-4 flex items-center justify-center text-gray-400"
                >
                  <i class="ri-search-line"></i>
                </div>
              </div>
            </div>
          </div>

<div class="relative group">
            <button
              class="w-10 h-10 flex items-center justify-center text-gray-700 hover:text-primary transition-colors"
            >
              <i class="ri-user-line text-xl"></i>
            </button>
            <div
              class="absolute right-0 mt-2 w-48 bg-white shadow-lg rounded hidden group-hover:block"
            >
              <a
                href="#"
                class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50"
                >Sign In</a
              >
              <a
                href="#"
                class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50"
                >Register</a
              >
              <a
                href="#"
                class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50"
                >My Account</a
              >
              <a
                href="#"
                class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50"
                >Orders</a
              >
            </div>
          </div>

<div class="relative">
            <button
              id="cartToggle"
              class="w-10 h-10 flex items-center justify-center text-gray-700 hover:text-primary transition-colors"
            >
              <i class="ri-shopping-bag-line text-xl"></i>
              <span
                class="absolute -top-1 -right-1 bg-primary text-white text-xs rounded-full w-5 h-5 flex items-center justify-center"
                >3</span
              >
            </button>
            <div
              id="cartDropdown"
              class="hidden absolute right-0 mt-2 w-80 bg-white shadow-lg rounded-lg p-4"
            >
              <h3 class="font-medium text-gray-900 mb-3">Your Cart (3)</h3>
              <div class="space-y-3 max-h-80 overflow-y-auto">
                <div class="flex items-center space-x-3">
                  <img
                    src="https://readdy.ai/api/search-image?query=minimalist%20white%20t-shirt%20on%20clean%20background%2C%20professional%20product%20photography%2C%20high%20quality%2C%20detailed%20fabric%20texture&width=80&height=80&seq=prod1&orientation=squarish"
                    alt="Product"
                    class="w-16 h-16 object-cover rounded"
                  />
                  <div class="flex-1">
                    <h4 class="text-sm font-medium">Essential White T-Shirt</h4>
                    <p class="text-xs text-gray-500">Size: M | Qty: 1</p>
                    <p class="text-sm font-medium">$24.99</p>
                  </div>
                  <button class="text-gray-400 hover:text-gray-600">
                    <i class="ri-close-line"></i>
                  </button>
                </div>
                <div class="flex items-center space-x-3">
                  <img
                    src="https://readdy.ai/api/search-image?query=minimalist%20black%20jeans%20on%20clean%20background%2C%20professional%20product%20photography%2C%20high%20quality%2C%20detailed%20fabric%20texture&width=80&height=80&seq=prod2&orientation=squarish"
                    alt="Product"
                    class="w-16 h-16 object-cover rounded"
                  />
                  <div class="flex-1">
                    <h4 class="text-sm font-medium">Slim Fit Black Jeans</h4>
                    <p class="text-xs text-gray-500">Size: 32 | Qty: 1</p>
                    <p class="text-sm font-medium">$59.99</p>
                  </div>
                  <button class="text-gray-400 hover:text-gray-600">
                    <i class="ri-close-line"></i>
                  </button>
                </div>
                <div class="flex items-center space-x-3">
                  <img
                    src="https://readdy.ai/api/search-image?query=minimalist%20leather%20watch%20on%20clean%20background%2C%20professional%20product%20photography%2C%20high%20quality%2C%20detailed%20texture&width=80&height=80&seq=prod3&orientation=squarish"
                    alt="Product"
                    class="w-16 h-16 object-cover rounded"
                  />
                  <div class="flex-1">
                    <h4 class="text-sm font-medium">Classic Leather Watch</h4>
                    <p class="text-xs text-gray-500">Color: Brown | Qty: 1</p>
                    <p class="text-sm font-medium">$129.99</p>
                  </div>
                  <button class="text-gray-400 hover:text-gray-600">
                    <i class="ri-close-line"></i>
                  </button>
                </div>
              </div>
              <div class="mt-4 pt-3 border-t border-gray-100">
                <div class="flex justify-between mb-3">
                  <span class="text-sm text-gray-600">Subtotal</span>
                  <span class="text-sm font-medium">$214.97</span>
                </div>
                <div class="space-y-2">
                  <a
                    href="#"
                    class="block w-full py-2 px-4 bg-primary text-white text-center font-medium rounded-button hover:bg-primary/90 transition-colors whitespace-nowrap"
                    >Checkout</a
                  >
                  <a
                    href="#"
                    class="block w-full py-2 px-4 bg-gray-100 text-gray-800 text-center font-medium rounded-button hover:bg-gray-200 transition-colors whitespace-nowrap"
                    >View Cart</a
                  >
                </div>
              </div>
            </div>
          </div>

<button
            id="mobileMenuToggle"
            class="md:hidden w-10 h-10 flex items-center justify-center text-gray-700"
          >
            <i class="ri-menu-line text-2xl"></i>
          </button>
        </div>
      </div>

<div
        id="mobileMenu"
        class="hidden md:hidden bg-white border-t border-gray-100"
      >
        <div class="container mx-auto px-4 py-3 space-y-3">
          <a href="#" class="block py-2 text-gray-900 font-medium">Home</a>
          <div>
            <button
              id="mobileShopToggle"
              class="flex items-center justify-between w-full py-2 text-gray-900 font-medium"
            >
              Shop
              <i class="ri-arrow-down-s-line"></i>
            </button>
            <div id="mobileShopMenu" class="hidden pl-4 space-y-2 mt-1">
              <a href="#" class="block py-1 text-gray-700">Women</a>
              <a href="#" class="block py-1 text-gray-700">Men</a>
              <a href="#" class="block py-1 text-gray-700">Accessories</a>
              <a href="#" class="block py-1 text-gray-700">Footwear</a>
            </div>
          </div>
          <a href="#" class="block py-2 text-gray-900 font-medium"
            >New Arrivals</a
          >
          <a href="#" class="block py-2 text-gray-900 font-medium">Sale</a>
          <a href="#" class="block py-2 text-gray-900 font-medium">About</a>
        </div>
      </div>
    </header>

<section class="hero-section relative">
      <div class="container mx-auto px-4 py-24 md:py-32 w-full">
        <div class="max-w-lg">
          <h1 class="text-4xl md:text-5xl font-bold text-gray-900 mb-4">
            Summer Collection 2025
          </h1>
          <p class="text-lg text-gray-700 mb-8">
            Discover our latest arrivals designed for comfort and style. Premium
            quality that lasts.
          </p>
          <div class="flex flex-wrap gap-4">
            <a
              href="#"
              class="py-3 px-6 bg-primary text-white font-medium rounded-button hover:bg-primary/90 transition-colors whitespace-nowrap"
              >Shop Now</a
            >
            <a
              href="#"
              class="py-3 px-6 bg-white text-gray-800 font-medium rounded-button border border-gray-200 hover:bg-gray-50 transition-colors whitespace-nowrap"
              >Explore Collection</a
            >
          </div>
        </div>
      </div>
    </section>

<section class="py-16 bg-gray-50">
      <div class="container mx-auto px-4">
        <h2 class="text-3xl font-bold text-center mb-12">Shop by Category</h2>
        <div class="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-4 gap-6">
          <a href="#" class="group">
            <div class="relative overflow-hidden rounded-lg aspect-[3/4]">
              <img
                src="https://readdy.ai/api/search-image?query=elegant%20womens%20clothing%20collection%2C%20minimal%20background%2C%20professional%20fashion%20photography%2C%20soft%20lighting%2C%20high-end%20apparel%20displayed%20neatly&width=400&height=500&seq=cat1&orientation=portrait"
                alt="Women's Collection"
                class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-105"
              />
              <div class="absolute inset-0 bg-black/20 flex items-end p-6">
                <div>
                  <h3 class="text-xl font-semibold text-white mb-1">Women</h3>
                  <p class="text-white/80 text-sm">View Collection</p>
                </div>
              </div>
            </div>
          </a>
          <a href="#" class="group">
            <div class="relative overflow-hidden rounded-lg aspect-[3/4]">
              <img
                src="https://readdy.ai/api/search-image?query=stylish%20mens%20clothing%20collection%2C%20minimal%20background%2C%20professional%20fashion%20photography%2C%20soft%20lighting%2C%20high-end%20apparel%20displayed%20neatly&width=400&height=500&seq=cat2&orientation=portrait"
                alt="Men's Collection"
                class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-105"
              />
              <div class="absolute inset-0 bg-black/20 flex items-end p-6">
                <div>
                  <h3 class="text-xl font-semibold text-white mb-1">Men</h3>
                  <p class="text-white/80 text-sm">View Collection</p>
                </div>
              </div>
            </div>
          </a>
          <a href="#" class="group">
            <div class="relative overflow-hidden rounded-lg aspect-[3/4]">
              <img
                src="https://readdy.ai/api/search-image?query=premium%20accessories%20collection%20including%20bags%2C%20jewelry%2C%20watches%2C%20minimal%20background%2C%20professional%20product%20photography%2C%20soft%20lighting%2C%20high-end%20items%20displayed%20neatly&width=400&height=500&seq=cat3&orientation=portrait"
                alt="Accessories Collection"
                class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-105"
              />
              <div class="absolute inset-0 bg-black/20 flex items-end p-6">
                <div>
                  <h3 class="text-xl font-semibold text-white mb-1">
                    Accessories
                  </h3>
                  <p class="text-white/80 text-sm">View Collection</p>
                </div>
              </div>
            </div>
          </a>
          <a href="#" class="group">
            <div class="relative overflow-hidden rounded-lg aspect-[3/4]">
              <img
                src="https://readdy.ai/api/search-image?query=luxury%20footwear%20collection%20including%20shoes%2C%20boots%2C%20sneakers%2C%20minimal%20background%2C%20professional%20product%20photography%2C%20soft%20lighting%2C%20high-end%20items%20displayed%20neatly&width=400&height=500&seq=cat4&orientation=portrait"
                alt="Footwear Collection"
                class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-105"
              />
              <div class="absolute inset-0 bg-black/20 flex items-end p-6">
                <div>
                  <h3 class="text-xl font-semibold text-white mb-1">
                    Footwear
                  </h3>
                  <p class="text-white/80 text-sm">View Collection</p>
                </div>
              </div>
            </div>
          </a>
        </div>
      </div>
    </section>

<section class="py-16">
      <div class="container mx-auto px-4">
        <div class="flex justify-between items-center mb-12">
          <h2 class="text-3xl font-bold">Featured Products</h2>
          <div class="flex space-x-1 px-1 py-1 bg-gray-100 rounded-full">
            <button
              class="px-4 py-1.5 bg-white text-gray-800 rounded-full shadow-sm text-sm font-medium whitespace-nowrap"
            >
              All
            </button>
            <button
              class="px-4 py-1.5 text-gray-600 rounded-full text-sm font-medium hover:bg-white hover:shadow-sm transition whitespace-nowrap"
            >
              New Arrivals
            </button>
            <button
              class="px-4 py-1.5 text-gray-600 rounded-full text-sm font-medium hover:bg-white hover:shadow-sm transition whitespace-nowrap"
            >
              Best Sellers
            </button>
          </div>
        </div>

<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
          
          <div class="group">
            <div class="relative overflow-hidden rounded-lg mb-4">
              <span
                class="absolute top-3 left-3 bg-primary text-white text-xs px-2 py-1 rounded"
                >New</span
              >
              <img
                src="https://readdy.ai/api/search-image?query=elegant%20white%20blouse%20on%20minimal%20light%20background%2C%20professional%20fashion%20photography%2C%20high%20quality%20product%20image%2C%20detailed%20fabric%20texture&width=500&height=600&seq=prod4&orientation=portrait"
                alt="White Blouse"
                class="w-full h-80 object-cover object-top"
              />
              <div
                class="absolute inset-0 bg-black/5 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center"
              >
                <button
                  class="bg-white text-gray-900 w-10 h-10 rounded-full flex items-center justify-center shadow-md mx-1 hover:bg-gray-100 transition"
                >
                  <i class="ri-eye-line"></i>
                </button>
                <button
                  class="bg-white text-gray-900 w-10 h-10 rounded-full flex items-center justify-center shadow-md mx-1 hover:bg-gray-100 transition"
                >
                  <i class="ri-heart-line"></i>
                </button>
                <button
                  class="bg-primary text-white w-10 h-10 rounded-full flex items-center justify-center shadow-md mx-1 hover:bg-primary/90 transition"
                >
                  <i class="ri-shopping-bag-line"></i>
                </button>
              </div>
            </div>
            <div>
              <h3 class="font-medium text-gray-900 mb-1">
                Elegant White Blouse
              </h3>
              <div class="flex items-center mb-1">
                <div class="flex text-amber-400 text-sm">
                  <i class="ri-star-fill"></i>
                  <i class="ri-star-fill"></i>
                  <i class="ri-star-fill"></i>
                  <i class="ri-star-fill"></i>
                  <i class="ri-star-half-fill"></i>
                </div>
                <span class="text-xs text-gray-500 ml-1">(42)</span>
              </div>
              <p class="text-gray-900 font-medium">$49.99</p>
            </div>
          </div>

<div class="group">
            <div class="relative overflow-hidden rounded-lg mb-4">
              <span
                class="absolute top-3 left-3 bg-amber-500 text-white text-xs px-2 py-1 rounded"
                >Best Seller</span
              >
              <img
                src="https://readdy.ai/api/search-image?query=premium%20denim%20jeans%20on%20minimal%20light%20background%2C%20professional%20fashion%20photography%2C%20high%20quality%20product%20image%2C%20detailed%20fabric%20texture&width=500&height=600&seq=prod5&orientation=portrait"
                alt="Denim Jeans"
                class="w-full h-80 object-cover object-top"
              />
              <div
                class="absolute inset-0 bg-black/5 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center"
              >
                <button
                  class="bg-white text-gray-900 w-10 h-10 rounded-full flex items-center justify-center shadow-md mx-1 hover:bg-gray-100 transition"
                >
                  <i class="ri-eye-line"></i>
                </button>
                <button
                  class="bg-white text-gray-900 w-10 h-10 rounded-full flex items-center justify-center shadow-md mx-1 hover:bg-gray-100 transition"
                >
                  <i class="ri-heart-line"></i>
                </button>
                <button
                  class="bg-primary text-white w-10 h-10 rounded-full flex items-center justify-center shadow-md mx-1 hover:bg-primary/90 transition"
                >
                  <i class="ri-shopping-bag-line"></i>
                </button>
              </div>
            </div>
            <div>
              <h3 class="font-medium text-gray-900 mb-1">
                Premium Denim Jeans
              </h3>
              <div class="flex items-center mb-1">
                <div class="flex text-amber-400 text-sm">
                  <i class="ri-star-fill"></i>
                  <i class="ri-star-fill"></i>
                  <i class="ri-star-fill"></i>
                  <i class="ri-star-fill"></i>
                  <i class="ri-star-fill"></i>
                </div>
                <span class="text-xs text-gray-500 ml-1">(128)</span>
              </div>
              <p class="text-gray-900 font-medium">$79.99</p>
            </div>
          </div>

<div class="group">
            <div class="relative overflow-hidden rounded-lg mb-4">
              <img
                src="https://readdy.ai/api/search-image?query=stylish%20leather%20jacket%20on%20minimal%20light%20background%2C%20professional%20fashion%20photography%2C%20high%20quality%20product%20image%2C%20detailed%20leather%20texture&width=500&height=600&seq=prod6&orientation=portrait"
                alt="Leather Jacket"
                class="w-full h-80 object-cover object-top"
              />
              <div
                class="absolute inset-0 bg-black/5 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center"
              >
                <button
                  class="bg-white text-gray-900 w-10 h-10 rounded-full flex items-center justify-center shadow-md mx-1 hover:bg-gray-100 transition"
                >
                  <i class="ri-eye-line"></i>
                </button>
                <button
                  class="bg-white text-gray-900 w-10 h-10 rounded-full flex items-center justify-center shadow-md mx-1 hover:bg-gray-100 transition"
                >
                  <i class="ri-heart-line"></i>
                </button>
                <button
                  class="bg-primary text-white w-10 h-10 rounded-full flex items-center justify-center shadow-md mx-1 hover:bg-primary/90 transition"
                >
                  <i class="ri-shopping-bag-line"></i>
                </button>
              </div>
            </div>
            <div>
              <h3 class="font-medium text-gray-900 mb-1">
                Classic Leather Jacket
              </h3>
              <div class="flex items-center mb-1">
                <div class="flex text-amber-400 text-sm">
                  <i class="ri-star-fill"></i>
                  <i class="ri-star-fill"></i>
                  <i class="ri-star-fill"></i>
                  <i class="ri-star-fill"></i>
                  <i class="ri-star-line"></i>
                </div>
                <span class="text-xs text-gray-500 ml-1">(76)</span>
              </div>
              <p class="text-gray-900 font-medium">$199.99</p>
            </div>
          </div>

<div class="group">
            <div class="relative overflow-hidden rounded-lg mb-4">
              <span
                class="absolute top-3 left-3 bg-rose-500 text-white text-xs px-2 py-1 rounded"
                >Sale</span
              >
              <img
                src="https://readdy.ai/api/search-image?query=elegant%20summer%20dress%20on%20minimal%20light%20background%2C%20professional%20fashion%20photography%2C%20high%20quality%20product%20image%2C%20detailed%20fabric%20texture&width=500&height=600&seq=prod7&orientation=portrait"
                alt="Summer Dress"
                class="w-full h-80 object-cover object-top"
              />
              <div
                class="absolute inset-0 bg-black/5 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center"
              >
                <button
                  class="bg-white text-gray-900 w-10 h-10 rounded-full flex items-center justify-center shadow-md mx-1 hover:bg-gray-100 transition"
                >
                  <i class="ri-eye-line"></i>
                </button>
                <button
                  class="bg-white text-gray-900 w-10 h-10 rounded-full flex items-center justify-center shadow-md mx-1 hover:bg-gray-100 transition"
                >
                  <i class="ri-heart-line"></i>
                </button>
                <button
                  class="bg-primary text-white w-10 h-10 rounded-full flex items-center justify-center shadow-md mx-1 hover:bg-primary/90 transition"
                >
                  <i class="ri-shopping-bag-line"></i>
                </button>
              </div>
            </div>
            <div>
              <h3 class="font-medium text-gray-900 mb-1">
                Floral Summer Dress
              </h3>
              <div class="flex items-center mb-1">
                <div class="flex text-amber-400 text-sm">
                  <i class="ri-star-fill"></i>
                  <i class="ri-star-fill"></i>
                  <i class="ri-star-fill"></i>
                  <i class="ri-star-fill"></i>
                  <i class="ri-star-half-fill"></i>
                </div>
                <span class="text-xs text-gray-500 ml-1">(54)</span>
              </div>
              <div class="flex items-center">
                <p class="text-gray-900 font-medium">$59.99</p>
                <p class="text-gray-500 line-through text-sm ml-2">$79.99</p>
              </div>
            </div>
          </div>
        </div>

<div class="text-center mt-12">
          <a
            href="#"
            class="inline-block py-3 px-8 border border-gray-300 text-gray-800 font-medium rounded-button hover:bg-gray-50 transition-colors whitespace-nowrap"
            >View All Products</a
          >
        </div>
      </div>
    </section>

<section class="py-16 bg-gray-900 text-white">
      <div class="container mx-auto px-4">
        <div class="flex flex-col md:flex-row items-center">
          <div class="md:w-1/2 mb-8 md:mb-0">
            <h2 class="text-3xl md:text-4xl font-bold mb-4">Summer Sale</h2>
            <p class="text-xl text-gray-300 mb-6">
              Up to 50% off on selected items. Limited time offer.
            </p>
            <div class="flex gap-4 mb-8">
              <div class="bg-white/10 rounded-lg p-4 text-center">
                <span class="block text-3xl font-bold">00</span>
                <span class="text-sm text-gray-300">Days</span>
              </div>
              <div class="bg-white/10 rounded-lg p-4 text-center">
                <span class="block text-3xl font-bold">12</span>
                <span class="text-sm text-gray-300">Hours</span>
              </div>
              <div class="bg-white/10 rounded-lg p-4 text-center">
                <span class="block text-3xl font-bold">45</span>
                <span class="text-sm text-gray-300">Minutes</span>
              </div>
              <div class="bg-white/10 rounded-lg p-4 text-center">
                <span class="block text-3xl font-bold">30</span>
                <span class="text-sm text-gray-300">Seconds</span>
              </div>
            </div>
            <a
              href="#"
              class="inline-block py-3 px-8 bg-white text-gray-900 font-medium rounded-button hover:bg-gray-100 transition-colors whitespace-nowrap"
              >Shop the Sale</a
            >
          </div>
          <div class="md:w-1/2">
            <img
              src="https://readdy.ai/api/search-image?query=stylish%20summer%20clothing%20collection%20with%20discount%20tags%2C%20professional%20fashion%20photography%2C%20multiple%20items%20arranged%20elegantly%2C%20high-end%20apparel%20on%20minimal%20background&width=600&height=400&seq=sale1&orientation=landscape"
              alt="Summer Sale"
              class="rounded-lg w-full"
            />
          </div>
        </div>
      </div>
    </section>

<section class="py-16">
      <div class="container mx-auto px-4">
        <h2 class="text-3xl font-bold text-center mb-12">New Arrivals</h2>

<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
          
          <div class="group">
            <div class="relative overflow-hidden rounded-lg mb-4">
              <span
                class="absolute top-3 left-3 bg-primary text-white text-xs px-2 py-1 rounded"
                >New</span
              >
              <img
                src="https://readdy.ai/api/search-image?query=elegant%20silk%20scarf%20on%20minimal%20light%20background%2C%20professional%20fashion%20photography%2C%20high%20quality%20product%20image%2C%20detailed%20fabric%20texture&width=500&height=600&seq=prod8&orientation=portrait"
                alt="Silk Scarf"
                class="w-full h-80 object-cover object-top"
              />
              <div
                class="absolute inset-0 bg-black/5 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center"
              >
                <button
                  class="bg-white text-gray-900 w-10 h-10 rounded-full flex items-center justify-center shadow-md mx-1 hover:bg-gray-100 transition"
                >
                  <i class="ri-eye-line"></i>
                </button>
                <button
                  class="bg-white text-gray-900 w-10 h-10 rounded-full flex items-center justify-center shadow-md mx-1 hover:bg-gray-100 transition"
                >
                  <i class="ri-heart-line"></i>
                </button>
                <button
                  class="bg-primary text-white w-10 h-10 rounded-full flex items-center justify-center shadow-md mx-1 hover:bg-primary/90 transition"
                >
                  <i class="ri-shopping-bag-line"></i>
                </button>
              </div>
            </div>
            <div>
              <h3 class="font-medium text-gray-900 mb-1">Luxury Silk Scarf</h3>
              <div class="flex items-center mb-1">
                <div class="flex text-amber-400 text-sm">
                  <i class="ri-star-fill"></i>
                  <i class="ri-star-fill"></i>
                  <i class="ri-star-fill"></i>
                  <i class="ri-star-fill"></i>
                  <i class="ri-star-line"></i>
                </div>
                <span class="text-xs text-gray-500 ml-1">(12)</span>
              </div>
              <p class="text-gray-900 font-medium">$39.99</p>
            </div>
          </div>

<div class="group">
            <div class="relative overflow-hidden rounded-lg mb-4">
              <span
                class="absolute top-3 left-3 bg-primary text-white text-xs px-2 py-1 rounded"
                >New</span
              >
              <img
                src="https://readdy.ai/api/search-image?query=premium%20leather%20handbag%20on%20minimal%20light%20background%2C%20professional%20fashion%20photography%2C%20high%20quality%20product%20image%2C%20detailed%20leather%20texture&width=500&height=600&seq=prod9&orientation=portrait"
                alt="Leather Handbag"
                class="w-full h-80 object-cover object-top"
              />
              <div
                class="absolute inset-0 bg-black/5 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center"
              >
                <button
                  class="bg-white text-gray-900 w-10 h-10 rounded-full flex items-center justify-center shadow-md mx-1 hover:bg-gray-100 transition"
                >
                  <i class="ri-eye-line"></i>
                </button>
                <button
                  class="bg-white text-gray-900 w-10 h-10 rounded-full flex items-center justify-center shadow-md mx-1 hover:bg-gray-100 transition"
                >
                  <i class="ri-heart-line"></i>
                </button>
                <button
                  class="bg-primary text-white w-10 h-10 rounded-full flex items-center justify-center shadow-md mx-1 hover:bg-primary/90 transition"
                >
                  <i class="ri-shopping-bag-line"></i>
                </button>
              </div>
            </div>
            <div>
              <h3 class="font-medium text-gray-900 mb-1">
                Designer Leather Handbag
              </h3>
              <div class="flex items-center mb-1">
                <div class="flex text-amber-400 text-sm">
                  <i class="ri-star-fill"></i>
                  <i class="ri-star-fill"></i>
                  <i class="ri-star-fill"></i>
                  <i class="ri-star-fill"></i>
                  <i class="ri-star-half-fill"></i>
                </div>
                <span class="text-xs text-gray-500 ml-1">(8)</span>
              </div>
              <p class="text-gray-900 font-medium">$149.99</p>
            </div>
          </div>

<div class="group">
            <div class="relative overflow-hidden rounded-lg mb-4">
              <span
                class="absolute top-3 left-3 bg-primary text-white text-xs px-2 py-1 rounded"
                >New</span
              >
              <img
                src="https://readdy.ai/api/search-image?query=stylish%20sunglasses%20on%20minimal%20light%20background%2C%20professional%20product%20photography%2C%20high%20quality%20image%2C%20detailed%20texture&width=500&height=600&seq=prod10&orientation=portrait"
                alt="Sunglasses"
                class="w-full h-80 object-cover object-top"
              />
              <div
                class="absolute inset-0 bg-black/5 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center"
              >
                <button
                  class="bg-white text-gray-900 w-10 h-10 rounded-full flex items-center justify-center shadow-md mx-1 hover:bg-gray-100 transition"
                >
                  <i class="ri-eye-line"></i>
                </button>
                <button
                  class="bg-white text-gray-900 w-10 h-10 rounded-full flex items-center justify-center shadow-md mx-1 hover:bg-gray-100 transition"
                >
                  <i class="ri-heart-line"></i>
                </button>
                <button
                  class="bg-primary text-white w-10 h-10 rounded-full flex items-center justify-center shadow-md mx-1 hover:bg-primary/90 transition"
                >
                  <i class="ri-shopping-bag-line"></i>
                </button>
              </div>
            </div>
            <div>
              <h3 class="font-medium text-gray-900 mb-1">Premium Sunglasses</h3>
              <div class="flex items-center mb-1">
                <div class="flex text-amber-400 text-sm">
                  <i class="ri-star-fill"></i>
                  <i class="ri-star-fill"></i>
                  <i class="ri-star-fill"></i>
                  <i class="ri-star-fill"></i>
                  <i class="ri-star-line"></i>
                </div>
                <span class="text-xs text-gray-500 ml-1">(6)</span>
              </div>
              <p class="text-gray-900 font-medium">$89.99</p>
            </div>
          </div>
        </div>

<div class="text-center mt-12">
          <a
            href="#"
            class="inline-block py-3 px-8 border border-gray-300 text-gray-800 font-medium rounded-button hover:bg-gray-50 transition-colors whitespace-nowrap"
            >View All New Arrivals</a
          >
        </div>
      </div>
    </section>

<section class="py-16 bg-gray-50">
      <div class="container mx-auto px-4">
        <h2 class="text-3xl font-bold text-center mb-12">
          What Our Customers Say
        </h2>

<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
          
          <div class="bg-white p-6 rounded-lg shadow-sm">
            <div class="flex text-amber-400 mb-4">
              <i class="ri-star-fill"></i>
              <i class="ri-star-fill"></i>
              <i class="ri-star-fill"></i>
              <i class="ri-star-fill"></i>
              <i class="ri-star-fill"></i>
            </div>
            <p class="text-gray-700 mb-6">
              "The quality of the clothes is exceptional. I've ordered multiple
              times and have never been disappointed. The customer service is
              also top-notch!"
            </p>
            <div class="flex items-center">
              <div
                class="w-12 h-12 rounded-full bg-gray-200 flex items-center justify-center text-gray-500 mr-4"
              >
                <i class="ri-user-3-line text-xl"></i>
              </div>
              <div>
                <h4 class="font-medium text-gray-900">Emily Richardson</h4>
                <p class="text-sm text-gray-500">Loyal Customer</p>
              </div>
            </div>
          </div>

<div class="bg-white p-6 rounded-lg shadow-sm">
            <div class="flex text-amber-400 mb-4">
              <i class="ri-star-fill"></i>
              <i class="ri-star-fill"></i>
              <i class="ri-star-fill"></i>
              <i class="ri-star-fill"></i>
              <i class="ri-star-half-fill"></i>
            </div>
            <p class="text-gray-700 mb-6">
              "Fast shipping and the products look exactly like the pictures.
              The sizing guide was very helpful. Will definitely shop here
              again!"
            </p>
            <div class="flex items-center">
              <div
                class="w-12 h-12 rounded-full bg-gray-200 flex items-center justify-center text-gray-500 mr-4"
              >
                <i class="ri-user-3-line text-xl"></i>
              </div>
              <div>
                <h4 class="font-medium text-gray-900">Michael Thompson</h4>
                <p class="text-sm text-gray-500">Verified Buyer</p>
              </div>
            </div>
          </div>

<div class="bg-white p-6 rounded-lg shadow-sm">
            <div class="flex text-amber-400 mb-4">
              <i class="ri-star-fill"></i>
              <i class="ri-star-fill"></i>
              <i class="ri-star-fill"></i>
              <i class="ri-star-fill"></i>
              <i class="ri-star-fill"></i>
            </div>
            <p class="text-gray-700 mb-6">
              "I love the sustainable approach this brand takes. The packaging
              is eco-friendly and the clothes are made from high-quality,
              sustainable materials."
            </p>
            <div class="flex items-center">
              <div
                class="w-12 h-12 rounded-full bg-gray-200 flex items-center justify-center text-gray-500 mr-4"
              >
                <i class="ri-user-3-line text-xl"></i>
              </div>
              <div>
                <h4 class="font-medium text-gray-900">Sophia Martinez</h4>
                <p class="text-sm text-gray-500">Repeat Customer</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

<section class="py-16">
      <div class="container mx-auto px-4">
        <h2 class="text-3xl font-bold text-center mb-4">
          Follow Us on Instagram
        </h2>
        <p class="text-gray-600 text-center mb-12">@shopease_official</p>

<section class="py-16 bg-gray-900 text-white">
      <div class="container mx-auto px-4">
        <div class="max-w-2xl mx-auto text-center">
          <h2 class="text-3xl font-bold mb-4">Subscribe to Our Newsletter</h2>
          <p class="text-gray-300 mb-8">
            Stay updated with our latest collections, exclusive offers, and
            style tips.
          </p>
          <form class="flex flex-col sm:flex-row gap-4 max-w-md mx-auto">
            <input
              type="email"
              placeholder="Your email address"
              class="flex-1 px-4 py-3 rounded-button border-none text-gray-900 focus:outline-none focus:ring-2 focus:ring-primary/20"
            />
            <button
              type="submit"
              class="px-6 py-3 bg-primary text-white font-medium rounded-button hover:bg-primary/90 transition-colors whitespace-nowrap"
            >
              Subscribe
            </button>
          </form>
          <p class="text-sm text-gray-400 mt-4">
            By subscribing, you agree to our Privacy Policy and consent to
            receive updates from our company.
          </p>
        </div>
      </div>
    </section>

<footer class="bg-white border-t border-gray-100 pt-16 pb-8">
      <div class="container mx-auto px-4">
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-8">
          
          <div class="lg:col-span-2">
            <a
              href="#"
              class="font-['Pacifico'] text-2xl text-primary inline-block mb-4"
              >logo</a
            >
            <p class="text-gray-600 mb-6 max-w-md">
              We offer premium quality clothing and accessories for men and
              women. Our mission is to provide sustainable fashion that lasts.
            </p>
            <div class="flex space-x-4">
              <a
                href="#"
                class="w-10 h-10 rounded-full bg-gray-100 flex items-center justify-center text-gray-600 hover:bg-gray-200 transition-colors"
              >
                <i class="ri-facebook-fill"></i>
              </a>
              <a
                href="#"
                class="w-10 h-10 rounded-full bg-gray-100 flex items-center justify-center text-gray-600 hover:bg-gray-200 transition-colors"
              >
                <i class="ri-instagram-line"></i>
              </a>
              <a
                href="#"
                class="w-10 h-10 rounded-full bg-gray-100 flex items-center justify-center text-gray-600 hover:bg-gray-200 transition-colors"
              >
                <i class="ri-twitter-x-line"></i>
              </a>
              <a
                href="#"
                class="w-10 h-10 rounded-full bg-gray-100 flex items-center justify-center text-gray-600 hover:bg-gray-200 transition-colors"
              >
                <i class="ri-pinterest-line"></i>
              </a>
            </div>
          </div>

<div>
            <h3 class="text-gray-900 font-semibold mb-4">Shop</h3>
            <ul class="space-y-3">
              <li>
                <a
                  href="#"
                  class="text-gray-600 hover:text-primary transition-colors"
                  >Women</a
                >
              </li>
              <li>
                <a
                  href="#"
                  class="text-gray-600 hover:text-primary transition-colors"
                  >Men</a
                >
              </li>
              <li>
                <a
                  href="#"
                  class="text-gray-600 hover:text-primary transition-colors"
                  >Accessories</a
                >
              </li>
              <li>
                <a
                  href="#"
                  class="text-gray-600 hover:text-primary transition-colors"
                  >Footwear</a
                >
              </li>
              <li>
                <a
                  href="#"
                  class="text-gray-600 hover:text-primary transition-colors"
                  >New Arrivals</a
                >
              </li>
              <li>
                <a
                  href="#"
                  class="text-gray-600 hover:text-primary transition-colors"
                  >Sale</a
                >
              </li>
            </ul>
          </div>

<div>
            <h3 class="text-gray-900 font-semibold mb-4">Help</h3>
            <ul class="space-y-3">
              <li>
                <a
                  href="#"
                  class="text-gray-600 hover:text-primary transition-colors"
                  >Customer Service</a
                >
              </li>
              <li>
                <a
                  href="#"
                  class="text-gray-600 hover:text-primary transition-colors"
                  >My Account</a
                >
              </li>
              <li>
                <a
                  href="#"
                  class="text-gray-600 hover:text-primary transition-colors"
                  >Find a Store</a
                >
              </li>
              <li>
                <a
                  href="#"
                  class="text-gray-600 hover:text-primary transition-colors"
                  >Shipping & Returns</a
                >
              </li>
              <li>
                <a
                  href="#"
                  class="text-gray-600 hover:text-primary transition-colors"
                  >FAQs</a
                >
              </li>
            </ul>
          </div>

<div>
            <h3 class="text-gray-900 font-semibold mb-4">About</h3>
            <ul class="space-y-3">
              <li>
                <a
                  href="#"
                  class="text-gray-600 hover:text-primary transition-colors"
                  >About Us</a
                >
              </li>
              <li>
                <a
                  href="#"
                  class="text-gray-600 hover:text-primary transition-colors"
                  >Sustainability</a
                >
              </li>
              <li>
                <a
                  href="#"
                  class="text-gray-600 hover:text-primary transition-colors"
                  >Careers</a
                >
              </li>
              <li>
                <a
                  href="#"
                  class="text-gray-600 hover:text-primary transition-colors"
                  >Press</a
                >
              </li>
              <li>
                <a
                  href="#"
                  class="text-gray-600 hover:text-primary transition-colors"
                  >Contact Us</a
                >
              </li>
            </ul>
          </div>
        </div>

<div class="mt-12 pt-8 border-t border-gray-100">
          <div class="flex flex-col md:flex-row justify-between items-center">
            <p class="text-gray-500 text-sm mb-4 md:mb-0">
              &copy; 2025 ShopEase. All rights reserved.
            </p>
            <div class="flex flex-wrap justify-center gap-4">
              <a href="#" class="text-gray-500 text-sm hover:text-gray-700"
                >Privacy Policy</a
              >
              <a href="#" class="text-gray-500 text-sm hover:text-gray-700"
                >Terms of Service</a
              >
              <a href="#" class="text-gray-500 text-sm hover:text-gray-700"
                >Cookies Settings</a
              >
            </div>
            <div class="flex items-center space-x-3 mt-4 md:mt-0">
              <i class="ri-visa-fill text-2xl text-gray-600"></i>
              <i class="ri-mastercard-fill text-2xl text-gray-600"></i>
              <i class="ri-paypal-fill text-2xl text-gray-600"></i>
              <i class="ri-apple-fill text-2xl text-gray-600"></i>
            </div>
          </div>
        </div>
      </div>
    </footer>

<script id="headerInteractions">
      document.addEventListener("DOMContentLoaded", function () {
        // Search Toggle
        const searchToggle = document.getElementById("searchToggle");
        const searchDropdown = document.getElementById("searchDropdown");

if (searchToggle && searchDropdown) {
          searchToggle.addEventListener("click", function () {
            searchDropdown.classList.toggle("hidden");
          });

document.addEventListener("click", function (event) {
            if (
              !searchToggle.contains(event.target) &&
              !searchDropdown.contains(event.target)
            ) {
              searchDropdown.classList.add("hidden");
            }
          });
        }

// Cart Toggle
        const cartToggle = document.getElementById("cartToggle");
        const cartDropdown = document.getElementById("cartDropdown");

if (cartToggle && cartDropdown) {
          cartToggle.addEventListener("click", function () {
            cartDropdown.classList.toggle("hidden");
          });

document.addEventListener("click", function (event) {
            if (
              !cartToggle.contains(event.target) &&
              !cartDropdown.contains(event.target)
            ) {
              cartDropdown.classList.add("hidden");
            }
          });
        }

// Mobile Menu Toggle
        const mobileMenuToggle = document.getElementById("mobileMenuToggle");
        const mobileMenu = document.getElementById("mobileMenu");

if (mobileMenuToggle && mobileMenu) {
          mobileMenuToggle.addEventListener("click", function () {
            mobileMenu.classList.toggle("hidden");
          });
        }

// Mobile Shop Menu Toggle
        const mobileShopToggle = document.getElementById("mobileShopToggle");
        const mobileShopMenu = document.getElementById("mobileShopMenu");

if (mobileShopToggle && mobileShopMenu) {
          mobileShopToggle.addEventListener("click", function () {
            mobileShopMenu.classList.toggle("hidden");
          });
        }
      });
    </script>
  </body>
</html>

Related Examples

Product Page
Showcase for the product.

Author:
Prem..

3 years ago

31.7k
Product card for eCommerce website

Author:
Steven Kuhn

3 years ago

12.3k
Pricing cards
pricing section with 3 cards

Author:
Noob

3 years ago

11.5k
Product / Service pricing section

Author:
Sophia Baker

2 years ago

12.5k
Product card
sleek and modern product card

Author:
OmKar Mehta

1 year ago

6.2k
Product details page
Beautiful product detail page with -multiple images -color options -quantity selection -buy now and add to wishlist buttons

Author:
Dika Rahman

1 year ago

12k
Product Page
Showcase for the product.

Author:
muhamadrofii911

1 year ago

2.2k
E-commerce product card withTailwind CSS

Author:
Quentin Rivers

1 year ago

2.1k
Product card

Author:
Anum Shahana

10 months ago

1.3k
Modern E-commerce Product Card with TailwindCSS
This product card is designed for e-commerce platforms using TailwindCSS. It features a discount badge, product image carousel, quick view and quick order buttons, ratings, product name, brand details, dynamic pricing with a strike-through original price, and a prominent add-to-cart button. The clean and professional layout is perfect for showcasing products on online stores.

Author:
SHARIFUL ISLAM

8 months ago

1.6k
Modern Responsive Footer with Tailwind CSS
This sleek and modern responsive footer is built using HTML and Tailwind CSS. It features three sections: brand information, useful links, and social media icons. The footer includes smooth hover effects, subtle fade-in animations, and a fully responsive design that adapts seamlessly to different screen sizes. Perfect for websites looking for a professional and stylish footer section.

Author:
Ayyamperumal S

8 months ago

1.4k
Checkout Card
A modern and responsive checkout card built with HTML & Tailwind CSS, featuring a clean UI, smooth shadows, and interactive hover effects. It includes secure payment options, a clear pricing breakdown, and adapts seamlessly to all screen sizes. Perfect for e-commerce and digital platforms to enhance user experience.

Author:
Rajesh Maheshwari

8 months ago

1.2k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components