CCHub Logo CCHub Tailwind Collection
구성 요소 위시리스트 위시리스트 부동산 구성 요소

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

부동산 부동산을 위한 반응형 및 고대비 위시리스트 구성 요소로, 머티리얼 디자인 원칙에서 영감을 받았으며 다크 모드를 지원합니다.

미리 보기

HTML 코드 

<div class="p-4 sm:p-6 md:p-8 bg-gray-100 dark:bg-gray-900 min-h-screen font-sans">
  <div class="max-w-7xl mx-auto">
    <h2 class="text-3xl sm:text-4xl font-extrabold text-gray-900 dark:text-white mb-8 sm:mb-10 text-center">
      Your Wishlist
    </h2>

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

      <!-- Property Card 1 -->
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-xl hover:shadow-2xl transition-all duration-300 overflow-hidden flex flex-col">
        <div class="relative pb-2/3">
          <img class="absolute h-full w-full object-cover" src="https://picsum.photos/id/1018/600/400" alt="Modern House With Large Windows">
          <button class="absolute top-3 right-3 p-2 rounded-full bg-white dark:bg-gray-700 text-red-500 hover:text-red-600 dark:text-red-400 dark:hover:text-red-500 shadow-md transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-opacity-50" aria-label="Remove from wishlist">
            <svg class="h-6 w-6 fill-current" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/>
            </svg>
          </button>
        </div>
        <div class="p-4 sm:p-5 flex flex-col flex-grow">
          <h3 class="text-lg sm:text-xl font-semibold text-gray-900 dark:text-white mb-2 line-clamp-2">Luxury Villa with Ocean View</h3>
          <p class="text-sm text-gray-600 dark:text-gray-300 mb-3">123 Ocean Blvd, Malibu, CA</p>
          <div class="flex items-center text-gray-700 dark:text-gray-200 text-sm mb-4">
            <span class="flex items-center mr-4"><svg class="h-4 w-4 mr-1" fill="currentColor" viewBox="0 0 20 20"><path d="M10 2a.75.75 0 01.75.75v5.5a.75.75 0 01-1.5 0v-5.5A.75.75 0 0110 2zM4 9.75a.75.75 0 01.75-.75h10.5a.75.75 0 010 1.5H4.75a.75.75 0 01-.75-.75zM10 17.25a.75.75 0 01-.75-.75v-5.5a.75.75 0 011.5 0v5.5a.75.75 0 01-.75.75z"></path><path fill-rule="evenodd" d="M4.25 15.5A.75.75 0 013.5 14.75V5.25a.75.75 0 011.5 0v9.5a.75.75 0 01-.75.75zM15.75 15.5a.75.75 0 01-.75-.75v-9.5a.75.75 0 011.5 0v9.5a.75.75 0 01-.75.75z" clip-rule="evenodd"></path></svg> 4 Beds</span>
            <span class="flex items-center mr-4"><svg class="h-4 w-4 mr-1" fill="currentColor" viewBox="0 0 20 20"><path d="M10 2a.75.75 0 01.75.75v5.5a.75.75 0 01-1.5 0v-5.5A.75.75 0 0110 2zM4 9.75a.75.75 0 01.75-.75h10.5a.75.75 0 010 1.5H4.75a.75.75 0 01-.75-.75zM10 17.25a.75.75 0 01-.75-.75v-5.5a.75.75 0 011.5 0v5.5a.75.75 0 01-.75.75z"></path><path fill-rule="evenodd" d="M4.25 10A.75.75 0 013.5 9.25V5.25a.75.75 0 011.5 0V9.25a.75.75 0 01-.75.75zM15.75 10A.75.75 0 0115 9.25V5.25a.75.75 0 011.5 0V9.25a.75.75 0 01-.75.75z" clip-rule="evenodd"></path></svg> 3 Baths</span>
            <span class="flex items-center"><svg class="h-4 w-4 mr-1" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M7 2a2 2 0 00-2 2v12a2 2 0 002 2h6a2 2 0 002-2V4a2 2 0 00-2-2H7zm0 2h6v8H7V4zm0 10v1a1 1 0 001 1h4a1 1 0 001-1v-1H7z" clip-rule="evenodd"></path></svg> 2,500 sqft</span>
          </div>
          <div class="mt-auto flex justify-between items-baseline pt-2">
            <p class="text-2xl sm:text-3xl font-bold text-indigo-700 dark:text-indigo-400">$2,500,000</p>
            <a href="#" class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-indigo-600 hover:bg-indigo-700 dark:bg-indigo-500 dark:hover:bg-indigo-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:focus:ring-offset-gray-900 transition-colors duration-200">
              View Details
            </a>
          </div>
        </div>
      </div>

      <!-- Property Card 2 -->
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-xl hover:shadow-2xl transition-all duration-300 overflow-hidden flex flex-col">
        <div class="relative pb-2/3">
          <img class="absolute h-full w-full object-cover" src="https://picsum.photos/id/1020/600/400" alt="Apartment Complex with City View">
           <button class="absolute top-3 right-3 p-2 rounded-full bg-white dark:bg-gray-700 text-red-500 hover:text-red-600 dark:text-red-400 dark:hover:text-red-500 shadow-md transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-opacity-50" aria-label="Remove from wishlist">
            <svg class="h-6 w-6 fill-current" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/>
            </svg>
          </button>
        </div>
        <div class="p-4 sm:p-5 flex flex-col flex-grow">
          <h3 class="text-lg sm:text-xl font-semibold text-gray-900 dark:text-white mb-2 line-clamp-2">Chic Downtown Loft</h3>
          <p class="text-sm text-gray-600 dark:text-gray-300 mb-3">456 City St, New York, NY</p>
          <div class="flex items-center text-gray-700 dark:text-gray-200 text-sm mb-4">
            <span class="flex items-center mr-4"><svg class="h-4 w-4 mr-1" fill="currentColor" viewBox="0 0 20 20"><path d="M10 2a.75.75 0 01.75.75v5.5a.75.75 0 01-1.5 0v-5.5A.75.75 0 0110 2zM4 9.75a.75.75 0 01.75-.75h10.5a.75.75 0 010 1.5H4.75a.75.75 0 01-.75-.75zM10 17.25a.75.75 0 01-.75-.75v-5.5a.75.75 0 011.5 0v5.5a.75.75 0 01-.75.75z"></path><path fill-rule="evenodd" d="M4.25 15.5A.75.75 0 013.5 14.75V5.25a.75.75 0 011.5 0v9.5a.75.75 0 01-.75.75zM15.75 15.5a.75.75 0 01-.75-.75v-9.5a.75.75 0 011.5 0v9.5a.75.75 0 01-.75.75z" clip-rule="evenodd"></path></svg> 2 Beds</span>
            <span class="flex items-center mr-4"><svg class="h-4 w-4 mr-1" fill="currentColor" viewBox="0 0 20 20"><path d="M10 2a.75.75 0 01.75.75v5.5a.75.75 0 01-1.5 0v-5.5A.75.75 0 0110 2zM4 9.75a.75.75 0 01.75-.75h10.5a.75.75 0 010 1.5H4.75a.75.75 0 01-.75-.75zM10 17.25a.75.75 0 01-.75-.75v-5.5a.75.75 0 011.5 0v5.5a.75.75 0 01-.75.75z"></path><path fill-rule="evenodd" d="M4.25 10A.75.75 0 013.5 9.25V5.25a.75.75 0 011.5 0V9.25a.75.75 0 01-.75.75zM15.75 10A.75.75 0 0115 9.25V5.25a.75.75 0 011.5 0V9.25a.75.75 0 01-.75.75z" clip-rule="evenodd"></path></svg> 2 Baths</span>
            <span class="flex items-center"><svg class="h-4 w-4 mr-1" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M7 2a2 2 0 00-2 2v12a2 2 0 002 2h6a2 2 0 002-2V4a2 2 0 00-2-2H7zm0 2h6v8H7V4zm0 10v1a1 1 0 001 1h4a1 1 0 001-1v-1H7z" clip-rule="evenodd"></path></svg> 1,200 sqft</span>
          </div>
          <div class="mt-auto flex justify-between items-baseline pt-2">
            <p class="text-2xl sm:text-3xl font-bold text-indigo-700 dark:text-indigo-400">$850,000</p>
            <a href="#" class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-indigo-600 hover:bg-indigo-700 dark:bg-indigo-500 dark:hover:bg-indigo-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:focus:ring-offset-gray-900 transition-colors duration-200">
              View Details
            </a>
          </div>
        </div>
      </div>

      <!-- Property Card 3 -->
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-xl hover:shadow-2xl transition-all duration-300 overflow-hidden flex flex-col">
        <div class="relative pb-2/3">
          <img class="absolute h-full w-full object-cover" src="https://picsum.photos/id/1025/600/400" alt="Suburban Family House">
           <button class="absolute top-3 right-3 p-2 rounded-full bg-white dark:bg-gray-700 text-red-500 hover:text-red-600 dark:text-red-400 dark:hover:text-red-500 shadow-md transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-opacity-50" aria-label="Remove from wishlist">
            <svg class="h-6 w-6 fill-current" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/>
            </svg>
          </button>
        </div>
        <div class="p-4 sm:p-5 flex flex-col flex-grow">
          <h3 class="text-lg sm:text-xl font-semibold text-gray-900 dark:text-white mb-2 line-clamp-2">Spacious Family Home with Garden</h3>
          <p class="text-sm text-gray-600 dark:text-gray-300 mb-3">789 Evergreen Ln, Suburbia, TX</p>
          <div class="flex items-center text-gray-700 dark:text-gray-200 text-sm mb-4">
            <span class="flex items-center mr-4"><svg class="h-4 w-4 mr-1" fill="currentColor" viewBox="0 0 20 20"><path d="M10 2a.75.75 0 01.75.75v5.5a.75.75 0 01-1.5 0v-5.5A.75.75 0 0110 2zM4 9.75a.75.75 0 01.75-.75h10.5a.75.75 0 010 1.5H4.75a.75.75 0 01-.75-.75zM10 17.25a.75.75 0 01-.75-.75v-5.5a.75.75 0 011.5 0v5.5a.75.75 0 01-.75.75z"></path><path fill-rule="evenodd" d="M4.25 15.5A.75.75 0 013.5 14.75V5.25a.75.75 0 011.5 0v9.5a.75.75 0 01-.75.75zM15.75 15.5a.75.75 0 01-.75-.75v-9.5a.75.75 0 011.5 0v9.5a.75.75 0 01-.75.75z" clip-rule="evenodd"></path></svg> 5 Beds</span>
            <span class="flex items-center mr-4"><svg class="h-4 w-4 mr-1" fill="currentColor" viewBox="0 0 20 20"><path d="M10 2a.75.75 0 01.75.75v5.5a.75.75 0 01-1.5 0v-5.5A.75.75 0 0110 2zM4 9.75a.75.75 0 01.75-.75h10.5a.75.75 0 010 1.5H4.75a.75.75 0 01-.75-.75zM10 17.25a.75.75 0 01-.75-.75v-5.5a.75.75 0 011.5 0v5.5a.75.75 0 01-.75.75z"></path><path fill-rule="evenodd" d="M4.25 10A.75.75 0 013.5 9.25V5.25a.75.75 0 011.5 0V9.25a.75.75 0 01-.75.75zM15.75 10A.75.75 0 0115 9.25V5.25a.75.75 0 011.5 0V9.25a.75.75 0 01-.75.75z" clip-rule="evenodd"></path></svg> 4 Baths</span>
            <span class="flex items-center"><svg class="h-4 w-4 mr-1" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M7 2a2 2 0 00-2 2v12a2 2 0 002 2h6a2 2 0 002-2V4a2 2 0 00-2-2H7zm0 2h6v8H7V4zm0 10v1a1 1 0 001 1h4a1 1 0 001-1v-1H7z" clip-rule="evenodd"></path></svg> 3,800 sqft</span>
          </div>
          <div class="mt-auto flex justify-between items-baseline pt-2">
            <p class="text-2xl sm:text-3xl font-bold text-indigo-700 dark:text-indigo-400">$650,000</p>
            <a href="#" class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-indigo-600 hover:bg-indigo-700 dark:bg-indigo-500 dark:hover:bg-indigo-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:focus:ring-offset-gray-900 transition-colors duration-200">
              View Details
            </a>
          </div>
        </div>
      </div>

      <!-- Property Card 4 -->
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-xl hover:shadow-2xl transition-all duration-300 overflow-hidden flex flex-col">
        <div class="relative pb-2/3">
          <img class="absolute h-full w-full object-cover" src="https://picsum.photos/id/1037/600/400" alt="Small Countryside Cottage">
           <button class="absolute top-3 right-3 p-2 rounded-full bg-white dark:bg-gray-700 text-red-500 hover:text-red-600 dark:text-red-400 dark:hover:text-red-500 shadow-md transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-opacity-50" aria-label="Remove from wishlist">
            <svg class="h-6 w-6 fill-current" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/>
            </svg>
          </button>
        </div>
        <div class="p-4 sm:p-5 flex flex-col flex-grow">
          <h3 class="text-lg sm:text-xl font-semibold text-gray-900 dark:text-white mb-2 line-clamp-2">Cozy Countryside Retreat</h3>
          <p class="text-sm text-gray-600 dark:text-gray-300 mb-3">456 Rural Rd, Countryside, GA</p>
          <div class="flex items-center text-gray-700 dark:text-gray-200 text-sm mb-4">
            <span class="flex items-center mr-4"><svg class="h-4 w-4 mr-1" fill="currentColor" viewBox="0 0 20 20"><path d="M10 2a.75.75 0 01.75.75v5.5a.75.75 0 01-1.5 0v-5.5A.75.75 0 0110 2zM4 9.75a.75.75 0 01.75-.75h10.5a.75.75 0 010 1.5H4.75a.75.75 0 01-.75-.75zM10 17.25a.75.75 0 01-.75-.75v-5.5a.75.75 0 011.5 0v5.5a.75.75 0 01-.75.75z"></path><path fill-rule="evenodd" d="M4.25 15.5A.75.75 0 013.5 14.75V5.25a.75.75 0 011.5 0v9.5a.75.75 0 01-.75.75zM15.75 15.5a.75.75 0 01-.75-.75v-9.5a.75.75 0 011.5 0v9.5a.75.75 0 01-.75.75z" clip-rule="evenodd"></path></svg> 3 Beds</span>
            <span class="flex items-center mr-4"><svg class="h-4 w-4 mr-1" fill="currentColor" viewBox="0 0 20 20"><path d="M10 2a.75.75 0 01.75.75v5.5a.75.75 0 01-1.5 0v-5.5A.75.75 0 0110 2zM4 9.75a.75.75 0 01.75-.75h10.5a.75.75 0 010 1.5H4.75a.75.75 0 01-.75-.75zM10 17.25a.75.75 0 01-.75-.75v-5.5a.75.75 0 011.5 0v5.5a.75.75 0 01-.75.75z"></path><path fill-rule="evenodd" d="M4.25 10A.75.75 0 013.5 9.25V5.25a.75.75 0 011.5 0V9.25a.75.75 0 01-.75.75zM15.75 10A.75.75 0 0115 9.25V5.25a.75.75 0 011.5 0V9.25a.75.75 0 01-.75.75z" clip-rule="evenodd"></path></svg> 2 Baths</span>
            <span class="flex items-center"><svg class="h-4 w-4 mr-1" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M7 2a2 2 0 00-2 2v12a2 2 0 002 2h6a2 2 0 002-2V4a2 2 0 00-2-2H7zm0 2h6v8H7V4zm0 10v1a1 1 0 001 1h4a1 1 0 001-1v-1H7z" clip-rule="evenodd"></path></svg> 1,800 sqft</span>
          </div>
          <div class="mt-auto flex justify-between items-baseline pt-2">
            <p class="text-2xl sm:text-3xl font-bold text-indigo-700 dark:text-indigo-400">$380,000</p>
            <a href="#" class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-indigo-600 hover:bg-indigo-700 dark:bg-indigo-500 dark:hover:bg-indigo-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:focus:ring-offset-gray-900 transition-colors duration-200">
              View Details
            </a>
          </div>
        </div>
      </div>

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

관련 구성 요소

위시리스트 컴포넌트

소셜 미디어 목적을 위한 보색 구성표가 있는 Complex Skeuomorphism Wishlist 구성 요소. 반응형, 어두운 테마 지원.

열다

위시리스트 컴포넌트

스포츠/피트니스 애플리케이션에 맞게 조정된 고정공간/개발자 미학을 가진 간단하고 반응이 빠른 위시리스트 구성 요소입니다. 강조 색상이 있는 흑백, 다크 모드 지원이 특징이며 시맨틱 HTML을 사용합니다.

열다

위시리스트 컴포넌트

비영리/자선 단체를 위해 설계된 깔끔하고 신뢰할 수 있는 위시리스트 구성 요소로, 트라이어딕 색 구성표와 다크 모드 지원으로 완전한 응답성을 제공합니다.

열다