구성 요소 전자 상거래 구성 요소 E-commerce Components 구성 요소

E-commerce Components 구성 요소

트라이어딕 색 구성표가 있는 다크 모드를 위해 설계된 반응형 전자 상거래 구성 요소로, 제품 목록, 장바구니 아이콘 및 사용자 아바타를 제공합니다.

미리 보기

HTML 코드

<div class="bg-gray-900 text-white min-h-screen p-8">
    <header class="flex justify-between items-center mb-8">
        <h1 class="text-3xl font-bold">ShopEase</h1>
        <div class="relative">
            <button class="bg-blue-600 p-2 rounded-full hover:bg-blue-500 focus:outline-none">
                <svg class="w-6 h-6" fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M13 2H7v2h6a1 1 0 011 1v12a1 1 0 01-1 1H7a1 1 0 01-1-1v-6H4v7a1 1 0 001 1h10a1 1 0 001-1V5a1 1 0 00-1-1z"/></svg>
            </button>
            <span class="absolute top-0 right-0 bg-red-600 text-white text-xs font-bold rounded-full px-1">3</span>
        </div>
    </header>

    <main class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
        <!-- Product Card -->
        <div class="bg-gray-800 rounded-lg overflow-hidden shadow-lg">
            <img src="https://picsum.photos/200/300" alt="Product Image" class="w-full h-48 object-cover">
            <div class="p-4">
                <h2 class="text-xl font-semibold">Product Title</h2>
                <p class="text-gray-400">$29.99</p>
                <button class="mt-2 bg-green-600 text-white py-1 px-4 rounded hover:bg-green-500 focus:outline-none">Add to Cart</button>
            </div>
        </div>
        
        <div class="bg-gray-800 rounded-lg overflow-hidden shadow-lg">
            <img src="https://picsum.photos/200/300?random=1" alt="Product Image" class="w-full h-48 object-cover">
            <div class="p-4">
                <h2 class="text-xl font-semibold">Another Product</h2>
                <p class="text-gray-400">$54.99</p>
                <button class="mt-2 bg-green-600 text-white py-1 px-4 rounded hover:bg-green-500 focus:outline-none">Add to Cart</button>
            </div>
        </div>
        
        <div class="bg-gray-800 rounded-lg overflow-hidden shadow-lg">
            <img src="https://picsum.photos/200/300?random=2" alt="Product Image" class="w-full h-48 object-cover">
            <div class="p-4">
                <h2 class="text-xl font-semibold">Cool Gadget</h2>
                <p class="text-gray-400">$19.99</p>
                <button class="mt-2 bg-green-600 text-white py-1 px-4 rounded hover:bg-green-500 focus:outline-none">Add to Cart</button>
            </div>
        </div>
    </main>

    <footer class="mt-10 text-center">
        <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-12 h-12 rounded-full mx-auto mb-2">
        <p class="font-semibold">Welcome, User!</p>
    </footer>
</div>

관련 구성 요소

농업을 위한 전자 상거래 제품 카드

농업 전자 상거래 웹사이트를 위한 장난스럽고 쾌활한 제품 카드 구성 요소로, 둥근 요소, 바다/파란색 톤, 반응형 디자인 및 다크 모드 지원을 특징으로 합니다.

열다

E-commerce Components 구성 요소

미니멀리스트 비즈니스 웹사이트를 위한 전자 상거래 구성 요소로, 반응형 디자인과 어두운 테마 지원을 제공합니다.

열다

E-commerce Dashboard 구성 요소

잔인하고 생동감 넘치는 디자인의 간단한 전자 상거래 대시보드 구성 요소로, 반응형 레이아웃과 어두운 테마 지원을 특징으로 합니다.

열다