CCHub Logo CCHub Tailwind Collection
구성 요소 목차 Glassmorphism_RealEstate_TableOfContents

Glassmorphism_RealEstate_TableOfContents

부동산 목록을 위한 glassmorphism 스타일의 Table of Contents 구성 요소로, 반투명 요소, 흐림 효과 및 자주색/보라색 색 구성표를 특징으로 합니다. 반응이 빠르고 다크 모드를 지원합니다.

미리 보기

HTML 코드 

<div class="p-4 md:p-8 lg:p-12 min-h-screen bg-gradient-to-br from-purple-50 to-indigo-100 dark:from-gray-900 dark:to-gray-800 flex items-center justify-center font-sans">
  <div class="w-full max-w-sm sm:max-w-md md:max-w-lg lg:max-w-xl xl:max-w-2xl bg-white/20 dark:bg-gray-800/30 backdrop-blur-md rounded-3xl shadow-xl border border-white/30 dark:border-gray-700/50 overflow-hidden relative">
    <div class="absolute inset-0 bg-gradient-to-br from-purple-200/50 to-indigo-300/50 dark:from-purple-900/50 dark:to-indigo-900/50 rounded-3xl opacity-30 blur-2xl -z-10"></div>

    <div class="p-6 md:p-8 lg:p-10">
      <h2 class="text-2xl md:text-3xl font-extrabold text-purple-900 dark:text-purple-200 mb-6 text-center drop-shadow-md">
        Property Details
      </h2>

      <nav class="">
        <ul class="space-y-4">
          <li>
            <a href="#overview" class="block p-4 rounded-xl transition-all duration-300 ease-in-out hover:scale-[1.02] active:scale-[0.98] focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-gray-900
              bg-purple-100/70 dark:bg-purple-900/60 backdrop-blur-sm shadow-md
              text-purple-800 dark:text-purple-100 font-semibold text-lg md:text-xl
              flex items-center group">
              <svg class="w-6 h-6 md:w-7 md:h-7 mr-3 text-purple-600 dark:text-purple-300 group-hover:rotate-6 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.75 17L9 20l-1 1h8l-1-1-1.25-3M15 10V5l-1-1H9l-1 1v5m3 0h.01M6 15h12a2 2 0 002-2V9a2 2 0 00-2-2H6a2 2 0 00-2 2v4a2 2 0 002 2z"></path>
              </svg>
              <span>Property Overview</span>
            </a>
          </li>

          <li>
            <a href="#gallery" class="block p-4 rounded-xl transition-all duration-300 ease-in-out hover:scale-[1.02] active:scale-[0.98] focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-gray-900
              bg-purple-100/70 dark:bg-purple-900/60 backdrop-blur-sm shadow-md
              text-purple-800 dark:text-purple-100 font-semibold text-lg md:text-xl
              flex items-center group">
              <svg class="w-6 h-6 md:w-7 md:h-7 mr-3 text-purple-600 dark:text-purple-300 group-hover:scale-110 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
              </svg>
              <span>Photo Gallery</span>
            </a>
          </li>

          <li>
            <a href="#features" class="block p-4 rounded-xl transition-all duration-300 ease-in-out hover:scale-[1.02] active:scale-[0.98] focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-gray-900
              bg-purple-100/70 dark:bg-purple-900/60 backdrop-blur-sm shadow-md
              text-purple-800 dark:text-purple-100 font-semibold text-lg md:text-xl
              flex items-center group">
              <svg class="w-6 h-6 md:w-7 md:h-7 mr-3 text-purple-600 dark:text-purple-300 group-hover:skew-y-3 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01"></path>
              </svg>
              <span>Key Features</span>
            </a>
          </li>

          <li>
            <a href="#floorplan" class="block p-4 rounded-xl transition-all duration-300 ease-in-out hover:scale-[1.02] active:scale-[0.98] focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-gray-900
              bg-purple-100/70 dark:bg-purple-900/60 backdrop-blur-sm shadow-md
              text-purple-800 dark:text-purple-100 font-semibold text-lg md:text-xl
              flex items-center group">
              <svg class="w-6 h-6 md:w-7 md:h-7 mr-3 text-purple-600 dark:text-purple-300 group-hover:animate-bounce transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"></path>
              </svg>
              <span>Floor Plans</span>
            </a>
          </li>

          <li>
            <a href="#location" class="block p-4 rounded-xl transition-all duration-300 ease-in-out hover:scale-[1.02] active:scale-[0.98] focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-gray-900
              bg-purple-100/70 dark:bg-purple-900/60 backdrop-blur-sm shadow-md
              text-purple-800 dark:text-purple-100 font-semibold text-lg md:text-xl
              flex items-center group">
              <svg class="w-6 h-6 md:w-7 md:h-7 mr-3 text-purple-600 dark:text-purple-300 group-hover:translate-x-1 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"></path>
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"></path>
              </svg>
              <span>Location & Map</span>
            </a>
          </li>

          <li>
            <a href="#contact" class="block p-4 rounded-xl transition-all duration-300 ease-in-out hover:scale-[1.02] active:scale-[0.98] focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-gray-900
              bg-purple-100/70 dark:bg-purple-900/60 backdrop-blur-sm shadow-md
              text-purple-800 dark:text-purple-100 font-semibold text-lg md:text-xl
              flex items-center group">
              <svg class="w-6 h-6 md:w-7 md:h-7 mr-3 text-purple-600 dark:text-purple-300 group-hover:rotate-12 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21L9.5 13.596a18.337 18.337 0 006.702 6.702l1.018-1.018a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"></path>
              </svg>
              <span>Contact Agent</span>
            </a>
          </li>
        </ul>
      </nav>
    </div>
  </div>
</div>

관련 구성 요소

Table of Contents 컴포넌트 - 3D Earth Tones

비즈니스 및 기업 웹 사이트를 위한 복잡한 3D에서 영감을 받은 목차 구성 요소로, 어스 톤과 다크 모드 지원으로 완전한 응답성을 제공합니다. 깊이와 몰입도를 제공하도록 설계되었습니다.

열다

Table of Contents 구성 요소

반응형 Table of Contents 구성 요소는 포트폴리오 쇼케이스를 위해 스큐어모픽 요소와 흙색으로 디자인되었으며 다크 모드를 지원합니다.

열다

목차

Table of Contents Microinteractions design, Analogous color scheme, Simple complexity 및 Social Media 목적을 가진 구성 요소. 어두운 테마 지원으로 반응형입니다. 자바스크립트 코드가 없습니다.

열다