구성 요소 위시리스트 위시리스트 컴포넌트

위시리스트 컴포넌트

어두운 테마 대시보드를 위해 스큐어모픽 요소와 보색으로 디자인된 반응형 위시리스트 구성 요소입니다.

미리 보기

HTML 코드

<div class="max-w-xs mx-auto bg-gray-800 rounded-lg shadow-lg overflow-hidden dark:bg-gray-900">
    <div class="p-4">
        <h2 class="text-2xl font-bold text-white mb-2">Wishlist</h2>
        <ul class="space-y-4">
            <li class="bg-gray-700 dark:bg-gray-800 p-3 rounded-md flex items-center justify-between">
                <div class="flex items-center space-x-3">
                    <img src="https://picsum.photos/50/50" alt="Product Image" class="w-12 h-12 rounded-md shadow-md" />
                    <div>
                        <h3 class="text-lg text-white">Product Name 1</h3>
                        <p class="text-sm text-gray-400">$20.00</p>
                    </div>
                </div>
                <button class="bg-blue-500 hover:bg-blue-600 text-white font-bold py-1 px-3 rounded-md">Add to Cart</button>
            </li>
            <li class="bg-gray-700 dark:bg-gray-800 p-3 rounded-md flex items-center justify-between">
                <div class="flex items-center space-x-3">
                    <img src="https://picsum.photos/50/51" alt="Product Image" class="w-12 h-12 rounded-md shadow-md" />
                    <div>
                        <h3 class="text-lg text-white">Product Name 2</h3>
                        <p class="text-sm text-gray-400">$30.00</p>
                    </div>
                </div>
                <button class="bg-blue-500 hover:bg-blue-600 text-white font-bold py-1 px-3 rounded-md">Add to Cart</button>
            </li>
            <li class="bg-gray-700 dark:bg-gray-800 p-3 rounded-md flex items-center justify-between">
                <div class="flex items-center space-x-3">
                    <img src="https://picsum.photos/50/52" alt="Product Image" class="w-12 h-12 rounded-md shadow-md" />
                    <div>
                        <h3 class="text-lg text-white">Product Name 3</h3>
                        <p class="text-sm text-gray-400">$40.00</p>
                    </div>
                </div>
                <button class="bg-blue-500 hover:bg-blue-600 text-white font-bold py-1 px-3 rounded-md">Add to Cart</button>
            </li>
        </ul>
    </div>
</div>

관련 구성 요소

위시리스트 컴포넌트

컨설팅/서비스를 위한 반응형 위시리스트 구성 요소로, 머티리얼 디자인 원칙, 네온/일렉트릭 색 구성표 및 다크 모드 지원을 특징으로 합니다. 이미지, 제목, 설명 및 '견적 요청' 버튼과 함께 항목에 대한 '제거' 버튼이 있는 서비스를 표시합니다.

열다

위시리스트 컴포넌트

3D 디자인, 유사한 색 구성표 및 대시보드 목적을 위한 단순 복잡성을 갖춘 위시리스트 구성 요소, 반응형 디자인 및 어두운 테마 지원.

열다

위시리스트 컴포넌트

스포츠/피트니스 애플리케이션을 위한 반응형 위시리스트 구성 요소로, 마이크로 인터랙션, 고대비 색 구성표 및 다크 모드 지원을 특징으로 합니다. 사용자는 항목을 추가/제거하고 시각적 피드백을 볼 수 있습니다.

열다