위시리스트 컴포넌트

Tailwind CSS를 사용하여 다크 모드를 지원하는 반응형 위시리스트 컴포넌트. 이미지, 제목, 가격이 있는 항목 목록을 표시하고 버튼을 제거합니다. 생생한 색상의 대시보드를 위해 설계되었습니다.

미리 보기

HTML 코드

<div class="bg-gray-900 text-gray-200 min-h-screen p-8">
  <div class="max-w-4xl mx-auto">
    <h2 class="text-2xl font-bold mb-6 text-purple-400">My Wishlist</h2>
    <div class="space-y-6">

      <!-- Wishlist Item 1 -->
      <div class="flex flex-col md:flex-row items-center bg-gray-800 p-4 rounded-lg shadow-lg">
        <img src="https://picsum.photos/seed/item1/150/100" alt="Product Image" class="w-full md:w-32 h-auto md:h-24 object-cover rounded-md mb-4 md:mb-0 md:mr-6">
        <div class="flex-grow">
          <h3 class="text-xl font-semibold text-teal-400">Vibrant Product Title 1</h3>
          <p class="text-gray-400">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
          <p class="text-lg font-bold mt-2 text-orange-400">$199.99</p>
        </div>
        <button class="mt-4 md:mt-0 bg-red-600 hover:bg-red-700 text-white font-bold py-2 px-4 rounded">Remove</button>
      </div>

      <!-- Wishlist Item 2 -->
      <div class="flex flex-col md:flex-row items-center bg-gray-800 p-4 rounded-lg shadow-lg">
        <img src="https://picsum.photos/seed/item2/150/100" alt="Product Image" class="w-full md:w-32 h-auto md:h-24 object-cover rounded-md mb-4 md:mb-0 md:mr-6">
        <div class="flex-grow">
          <h3 class="text-xl font-semibold text-cyan-400">Exciting Product Title 2</h3>
          <p class="text-gray-400">Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
          <p class="text-lg font-bold mt-2 text-lime-400">$249.50</p>
        </div>
        <button class="mt-4 md:mt-0 bg-red-600 hover:bg-red-700 text-white font-bold py-2 px-4 rounded">Remove</button>
      </div>

      <!-- Wishlist Item 3 -->
      <div class="flex flex-col md:flex-row items-center bg-gray-800 p-4 rounded-lg shadow-lg">
        <img src="https://picsum.photos/seed/item3/150/100" alt="Product Image" class="w-full md:w-32 h-auto md:h-24 object-cover rounded-md mb-4 md:mb-0 md:mr-6">
        <div class="flex-grow">
          <h3 class="text-xl font-semibold text-pink-400">Dynamic Product Title 3</h3>
          <p class="text-gray-400">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p>
          <p class="text-lg font-bold mt-2 text-yellow-400">$99.00</p>
        </div>
        <button class="mt-4 md:mt-0 bg-red-600 hover:bg-red-700 text-white font-bold py-2 px-4 rounded">Remove</button>
      </div>

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

위시리스트 컴포넌트

미리 보기

HTML 코드

관련 구성 요소

위시리스트 컴포넌트

위시리스트 부동산 구성 요소

사이버펑크 위시리스트 구성 요소