검색 구성 요소

모든 구성 요소

사용 가능한 모든 Tailwind CSS 구성 요소 찾아보기

이미지 라이트박스 구성 요소

미니멀한 플랫 디자인, 단색 색 구성표 및 적당한 복잡성을 갖춘 반응형 이미지 라이트박스 구성 요소로 소셜 미디어 인터페이스에 적합합니다. Tailwind CSS의 dark: 접두사를 사용하여 어두운 테마를 지원하며 JavaScript가 필요하지 않습니다. 이미지의 출처는 picsum.photos입니다.

열다 미리 보기

                <div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900 p-4">
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
        <!-- Image 1 -->
        <div class="relative group cursor-pointer">
            <img src="https://picsum.photos/seed/image1/600/400" alt="Image 1" class="rounded-lg shadow-md transition-transform transform group-hover:scale-105">
            <div class="absolute inset-0 bg-black bg-opacity-50 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity rounded-lg">
                <p class="text-white text-lg font-semibold">View Image</p>
            </div>
        </div>

        <!-- Image 2 -->
        <div class="relative group cursor-pointer">
            <img src="https://picsum.photos/seed/image2/600/400" alt="Image 2" class="rounded-lg shadow-md transition-transform transform group-hover:scale-105">
            <div class="absolute inset-0 bg-black bg-opacity-50 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity rounded-lg">
                <p class="text-white text-lg font-semibold">View Image</p>
            </div>
        </div>

        <!-- Image 3 -->
        <div class="relative group cursor-pointer">
            <img src="https://picsum.photos/seed/image3/600/400" alt="Image 3" class="rounded-lg shadow-md transition-transform transform group-hover:scale-105">
            <div class="absolute inset-0 bg-black bg-opacity-50 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity rounded-lg">
                <p class="text-white text-lg font-semibold">View Image</p>
            </div>
        </div>

        <!-- Image 4 -->
        <div class="relative group cursor-pointer">
            <img src="https://picsum.photos/seed/image4/600/400" alt="Image 4" class="rounded-lg shadow-md transition-transform transform group-hover:scale-105">
            <div class="absolute inset-0 bg-black bg-opacity-50 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity rounded-lg">
                <p class="text-white text-lg font-semibold">View Image</p>
            </div>
        </div>

        <!-- Image 5 -->
        <div class="relative group cursor-pointer">
            <img src="https://picsum.photos/seed/image5/600/400" alt="Image 5" class="rounded-lg shadow-md transition-transform transform group-hover:scale-105">
            <div class="absolute inset-0 bg-black bg-opacity-50 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity rounded-lg">
                <p class="text-white text-lg font-semibold">View Image</p>
            </div>
        </div>

        <!-- Image 6 -->
        <div class="relative group cursor-pointer">
            <img src="https://picsum.photos/seed/image6/600/400" alt="Image 6" class="rounded-lg shadow-md transition-transform transform group-hover:scale-105">
            <div class="absolute inset-0 bg-black bg-opacity-50 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity rounded-lg">
                <p class="text-white text-lg font-semibold">View Image</p>
            </div>
        </div>
    </div>

    <!-- Lightbox Overlay (Hidden by default, would be shown with JS) -->
    <div id="lightbox" class="fixed inset-0 bg-black bg-opacity-75 flex items-center justify-center z-50 hidden">
        <div class="relative">
            <img src="" alt="Lightbox Image" id="lightbox-image" class="max-w-3xl max-h-3xl rounded-lg shadow-lg">
            <button class="absolute top-4 right-4 text-white text-3xl">&times;</button>
        </div>
    </div>
</div>

인포그래픽 구성 요소

스큐어모피즘 디자인 스타일과 생생한 색 구성표를 가진 복잡한 인포그래픽 구성 요소로 전자 상거래 플랫폼에 적합합니다. 반응형이며 Tailwind CSS를 사용하여 다크 모드를 지원합니다. 대화형 요소와 함께 다양한 제품 통계를 표시합니다.

열다 미리 보기

                <div class="bg-gray-100 dark:bg-gray-900 min-h-screen p-8">
  <div class="max-w-7xl mx-auto">
    <h1 class="text-4xl font-extrabold text-gray-900 dark:text-white mb-12 text-center drop-shadow-lg">E-commerce Performance Dashboard</h1>

    <!-- Skeuomorphism Container for the Dashboard -->
    <div class="bg-gradient-to-br from-gray-300 to-gray-500 dark:from-gray-700 dark:to-gray-900 p-8 rounded-3xl shadow-inset-xl border-t border-l border-gray-400 dark:border-gray-600 relative overflow-hidden transform transition-all duration-300 hover:scale-[1.01] hover:shadow-2xl">
      
      <!-- Top Bezel / Highlight -->
      <div class="absolute inset-x-0 top-0 h-4 bg-gradient-to-b from-white opacity-20 dark:from-gray-300 dark:opacity-10 rounded-t-3xl"></div>
      <!-- Bottom Bezel / Shadow -->
      <div class="absolute inset-x-0 bottom-0 h-4 bg-gradient-to-t from-black opacity-10 dark:from-gray-900 dark:opacity-20 rounded-b-3xl"></div>

      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">

        <!-- Sales Overview Card -->
        <div class="bg-gradient-to-br from-emerald-400 to-teal-500 dark:from-emerald-700 dark:to-teal-800 p-6 rounded-2xl shadow-xl border border-emerald-300 dark:border-emerald-600 transform transition-transform duration-300 hover:scale-105 hover:shadow-2xl relative overflow-hidden group">
          <div class="absolute -inset-1 bg-gradient-to-r from-emerald-600 to-teal-700 dark:from-emerald-800 dark:to-teal-900 rounded-2xl opacity-0 group-hover:opacity-20 transition-opacity duration-300"></div>

          <div class="relative z-10 flex items-center justify-between mb-4">
            <h3 class="text-white text-xl font-bold drop-shadow-md">Total Sales</h3>
            <div class="bg-white/20 dark:bg-white/10 rounded-full p-2 backdrop-blur-sm shadow-inner-lg">
              <svg class="w-6 h-6 text-white" 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="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.592 1L21 6m-2 4a3 3 0 010 6m-9-4h4m-unset-24 0a3 3 0 010 6m-9-4h4L3 13.786A3.001 3.001 0 001 19c0 1.657 1.343 3 3 3h16c1.657 0 3-1.343 3-3 0-1.268-.787-2.378-1L12 21v-4m0-4c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2"></path></svg>
            </div>
          </div>
          <p class="text-white text-5xl font-extrabold mb-2 drop-shadow-lg">$1,234,567</p>
          <p class="text-emerald-100 text-sm opacity-90"><span class="text-white font-semibold">+15%</span> from last month</p>
          <div class="absolute bottom-4 right-4 text-white/50 dark:text-white/30 text-xs font-semibold">Updated 5 min ago</div>
        </div>

        <!-- New Customers Card -->
        <div class="bg-gradient-to-br from-purple-500 to-indigo-600 dark:from-purple-700 dark:to-indigo-800 p-6 rounded-2xl shadow-xl border border-purple-400 dark:border-purple-600 transform transition-transform duration-300 hover:scale-105 hover:shadow-2xl relative overflow-hidden group">
          <div class="absolute -inset-1 bg-gradient-to-r from-purple-600 to-indigo-700 dark:from-purple-800 dark:to-indigo-900 rounded-2xl opacity-0 group-hover:opacity-20 transition-opacity duration-300"></div>
          <div class="relative z-10 flex items-center justify-between mb-4">
            <h3 class="text-white text-xl font-bold drop-shadow-md">New Customers</h3>
            <div class="bg-white/20 dark:bg-white/10 rounded-full p-2 backdrop-blur-sm shadow-inner-lg">
              <svg class="w-6 h-6 text-white" 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 20h2a2 2 0 002-2V4a2 2 0 00-2-2H5a2 2 0 00-2 2v14a2 2 0 002 2h2m0 0l4-4m-4 4l4 4m0-4 4 4m0-4L9 15l4 4"></path></svg>
            </div>
          </div>
          <p class="text-white text-5xl font-extrabold mb-2 drop-shadow-lg">8,765</p>
          <p class="text-purple-100 text-sm opacity-90"><span class="text-white font-semibold">+22%</span> from last month</p>
          <div class="absolute bottom-4 right-4 text-white/50 dark:text-white/30 text-xs font-semibold">Updated 30 min ago</div>
        </div>

        <!-- Conversion Rate Card -->
        <div class="bg-gradient-to-br from-red-500 to-rose-600 dark:from-red-700 dark:to-rose-800 p-6 rounded-2xl shadow-xl border border-red-400 dark:border-red-600 transform transition-transform duration-300 hover:scale-105 hover:shadow-2xl relative overflow-hidden group">
          <div class="absolute -inset-1 bg-gradient-to-r from-red-600 to-rose-700 dark:from-red-800 dark:to-rose-900 rounded-2xl opacity-0 group-hover:opacity-20 transition-opacity duration-300"></div>
          <div class="relative z-10 flex items-center justify-between mb-4">
            <h3 class="text-white text-xl font-bold drop-shadow-md">Conversion Rate</h3>
            <div class="bg-white/20 dark:bg-white/10 rounded-full p-2 backdrop-blur-sm shadow-inner-lg">
              <svg class="w-6 h-6 text-white" 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="M13 7h8m0 0v8m0-8L11 9m-11 5h8m0 0v8m0-8L3 14m-3 5h8m0 0v8m0-8L3 19"></path></svg>
            </div>
          </div>
          <p class="text-white text-5xl font-extrabold mb-2 drop-shadow-lg">3.24%</p>
          <p class="text-red-100 text-sm opacity-90"><span class="text-white font-semibold">+0.5%</span> from last month</p>
          <div class="absolute bottom-4 right-4 text-white/50 dark:text-white/30 text-xs font-semibold">Updated 1 hr ago</div>
        </div>

        <!-- Average Order Value Card -->
        <div class="bg-gradient-to-br from-blue-500 to-cyan-600 dark:from-blue-700 dark:to-cyan-800 p-6 rounded-2xl shadow-xl border border-blue-400 dark:border-blue-600 transform transition-transform duration-300 hover:scale-105 hover:shadow-2xl relative overflow-hidden group">
          <div class="absolute -inset-1 bg-gradient-to-r from-blue-600 to-cyan-700 dark:from-blue-800 dark:to-cyan-900 rounded-2xl opacity-0 group-hover:opacity-20 transition-opacity duration-300"></div>
          <div class="relative z-10 flex items-center justify-between mb-4">
            <h3 class="text-white text-xl font-bold drop-shadow-md">Avg. Order Value</h3>
            <div class="bg-white/20 dark:bg-white/10 rounded-full p-2 backdrop-blur-sm shadow-inner-lg">
              <svg class="w-6 h-6 text-white" 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 19V6l12-3v13M9 19c0 1.105-1.12 2-2.5 2S4 20.105 4 19s1.12-2 2.5-2 2.5.895 2.5 2zm12 0c0 1.105-1.12 2-2.5 2S16 20.105 16 19s1.12-2 2.5-2 2.5.895 2.5 2zm-8-19v13m0-12h8"></path></svg>
            </div>
          </div>
          <p class="text-white text-5xl font-extrabold mb-2 drop-shadow-lg">$127.50</p>
          <p class="text-blue-100 text-sm opacity-90"><span class="text-white font-semibold">-$5.00</span> from last month</p>
          <div class="absolute bottom-4 right-4 text-white/50 dark:text-white/30 text-xs font-semibold">Updated 2 hrs ago</div>
        </div>

        <!-- Top Products Section -->
        <div class="lg:col-span-2 bg-gradient-to-br from-slate-200 to-slate-400 dark:from-slate-700 dark:to-slate-800 p-6 rounded-2xl shadow-xl border border-slate-300 dark:border-slate-600 transform transition-transform duration-300 hover:scale-105 hover:shadow-2xl relative overflow-hidden group">
          <div class="absolute -inset-1 bg-gradient-to-r from-slate-300 to-slate-500 dark:from-slate-800 dark:to-slate-900 rounded-2xl opacity-0 group-hover:opacity-20 transition-opacity duration-300"></div>
          <div class="relative z-10">
            <h3 class="text-gray-900 dark:text-white text-2xl font-bold mb-6 drop-shadow-md">Top Selling Products</h3>
            <div class="space-y-4">

              <!-- Product Item 1 -->
              <div class="flex items-center bg-gray-50/70 dark:bg-gray-800/70 rounded-xl p-3 shadow-inner-lg border border-gray-200 dark:border-gray-700 backdrop-blur-sm transform transition-transform duration-200 hover:translate-x-1">
                <img src="https://picsum.photos/id/178/80/80" alt="Product 1" class="w-16 h-16 rounded-lg mr-4 shadow-md object-cover border border-gray-300 dark:border-gray-600">
                <div class="flex-grow">
                  <p class="text-gray-800 dark:text-gray-100 font-semibold text-lg">Stylish Wireless Headphones</p>
                  <p class="text-gray-600 dark:text-gray-300 text-sm">Electronics</p>
                </div>
                <span class="text-emerald-600 dark:text-emerald-400 font-bold text-lg">$199.99</span>
              </div>

              <!-- Product Item 2 -->
              <div class="flex items-center bg-gray-50/70 dark:bg-gray-800/70 rounded-xl p-3 shadow-inner-lg border border-gray-200 dark:border-gray-700 backdrop-blur-sm transform transition-transform duration-200 hover:translate-x-1">
                <img src="https://picsum.photos/id/180/80/80" alt="Product 2" class="w-16 h-16 rounded-lg mr-4 shadow-md object-cover border border-gray-300 dark:border-gray-600">
                <div class="flex-grow">
                  <p class="text-gray-800 dark:text-gray-100 font-semibold text-lg">Ergonomic Office Chair</p>
                  <p class="text-gray-600 dark:text-gray-300 text-sm">Home & Office</p>
                </div>
                <span class="text-emerald-600 dark:text-emerald-400 font-bold text-lg">$349.00</span>
              </div>

              <!-- Product Item 3 -->
              <div class="flex items-center bg-gray-50/70 dark:bg-gray-800/70 rounded-xl p-3 shadow-inner-lg border border-gray-200 dark:border-gray-700 backdrop-blur-sm transform transition-transform duration-200 hover:translate-x-1">
                <img src="https://picsum.photos/id/182/80/80" alt="Product 3" class="w-16 h-16 rounded-lg mr-4 shadow-md object-cover border border-gray-300 dark:border-gray-600">
                <div class="flex-grow">
                  <p class="text-gray-800 dark:text-gray-100 font-semibold text-lg">Premium Coffee Maker</p>
                  <p class="text-gray-600 dark:text-gray-300 text-sm">Kitchen Appliances</p>
                </div>
                <span class="text-emerald-600 dark:text-emerald-400 font-bold text-lg">$89.50</span>
              </div>

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

        <!-- Recent Orders Section -->
        <div class="bg-gradient-to-br from-orange-400 to-amber-500 dark:from-orange-700 dark:to-amber-800 p-6 rounded-2xl shadow-xl border border-orange-300 dark:border-orange-600 transform transition-transform duration-300 hover:scale-105 hover:shadow-2xl relative overflow-hidden group">
          <div class="absolute -inset-1 bg-gradient-to-r from-orange-600 to-amber-700 dark:from-orange-800 dark:to-amber-900 rounded-2xl opacity-0 group-hover:opacity-20 transition-opacity duration-300"></div>
          <div class="relative z-10">
            <h3 class="text-white text-2xl font-bold mb-6 drop-shadow-md">Recent Orders</h3>
            <div class="space-y-4">

              <!-- Order Item 1 -->
              <div class="flex items-center bg-white/20 dark:bg-white/10 rounded-xl p-3 shadow-inner-lg border border-white/30 dark:border-white/20 backdrop-blur-sm transform transition-transform duration-200 hover:translate-x-1">
                <img src="https://randomuser.me/api/portraits/thumb/men/32.jpg" alt="Customer Avatar" class="w-12 h-12 rounded-full mr-4 shadow-md object-cover border border-white/50 dark:border-white/30">
                <div class="flex-grow">
                  <p class="text-white font-semibold text-lg">John Doe</p>
                  <p class="text-orange-100 text-sm">Order #12345 - $249.99</p>
                </div>
                <span class="text-white text-sm opacity-80">2 min ago</span>
              </div>

              <!-- Order Item 2 -->
              <div class="flex items-center bg-white/20 dark:bg-white/10 rounded-xl p-3 shadow-inner-lg border border-white/30 dark:border-white/20 backdrop-blur-sm transform transition-transform duration-200 hover:translate-x-1">
                <img src="https://randomuser.me/api/portraits/thumb/women/44.jpg" alt="Customer Avatar" class="w-12 h-12 rounded-full mr-4 shadow-md object-cover border border-white/50 dark:border-white/30">
                <div class="flex-grow">
                  <p class="text-white font-semibold text-lg">Jane Smith</p>
                  <p class="text-orange-100 text-sm">Order #12344 - $75.00</p>
                </div>
                <span class="text-white text-sm opacity-80">15 min ago</span>
              </div>

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

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

<style>
  /* Custom Utility for Inset Shadow */
  .shadow-inset-xl {
    box-shadow: inset 0 8px 16px rgba(0, 0, 0, 0.2), inset 0 -8px 16px rgba(255, 255, 255, 0.2);
  }
  .dark .shadow-inset-xl {
    box-shadow: inset 0 8px 16px rgba(0, 0, 0, 0.4), inset 0 -8px 16px rgba(100, 100, 100, 0.1);
  }

  .shadow-inner-lg {
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
  }
  .dark .shadow-inner-lg {
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3);
  }
  
  /* Drop shadow for text to enhance relief effect */
  .drop-shadow-lg {
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
  }
  .dark .drop-shadow-lg {
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
  }
</style>

Breadcrumb Navigation 구성 요소

반응형 이동 경로 탐색 구성 요소는 대시보드를 위한 생생한 색 구성표와 함께 브루탈리즘 스타일로 설계되었으며 다크 모드를 지원합니다.

열다 미리 보기

                <nav class="bg-gray-800 p-4 rounded-lg dark:bg-gray-900">
    <ol class="list-reset flex text-sm text-white">
        <li class="mr-2">
            <a href="#" class="text-blue-500 hover:text-blue-400 dark:text-blue-300 dark:hover:text-blue-200">
                Home
            </a>
            <span class="text-gray-600 dark:text-gray-400">/</span>
        </li>
        <li class="mr-2">
            <a href="#" class="text-blue-500 hover:text-blue-400 dark:text-blue-300 dark:hover:text-blue-200">
                Dashboard
            </a>
            <span class="text-gray-600 dark:text-gray-400">/</span>
        </li>
        <li class="mr-2">
            <a href="#" class="text-blue-500 hover:text-blue-400 dark:text-blue-300 dark:hover:text-blue-200">
                Analytics
            </a>
            <span class="text-gray-600 dark:text-gray-400">/</span>
        </li>
        <li class="text-gray-600 dark:text-gray-400">Current Page</li>
    </ol>
</nav>

<div class="p-4 bg-gray-700 rounded-lg dark:bg-gray-800 mt-4">
    <h2 class="text-xl text-white font-bold">
        Breadcrumb Navigation in Brutalism Style
    </h2>
    <p class="text-gray-400 dark:text-gray-300">
        Use the breadcrumbs above to navigate through the dashboard.
    </p>
    <div class="mt-4">
        <img class="w-full h-40 object-cover rounded" src="https://picsum.photos/800/200" alt="Dashboard Image">
    </div>
    <div class="mt-4">
        <h3 class="text-lg text-white">Team Members</h3>
        <div class="flex space-x-4 mt-2">
            <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar">
            <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/women/1.jpg" alt="Avatar">
            <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/2.jpg" alt="Avatar">
        </div>
    </div>
</div>

인포그래픽 구성 요소

3D 디자인 요소, 파스텔 색상 구성표, 대시보드에 대한 중간 정도의 복잡성을 갖춘 반응형 인포그래픽 구성 요소이며 다크 모드를 지원합니다. JavaScript는 없으며 Tailwind CSS가 있는 HTML만 있습니다.

열다 미리 보기

                <div class="min-h-screen bg-gray-100 dark:bg-gray-900 p-8 flex items-center justify-center"><div class="container mx-auto"><h1 class="text-4xl font-bold text-center mb-12 text-gray-800 dark:text-white">Infographics Dashboard</h1><div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"><div class="bg-white dark:bg-gray-800 rounded-lg shadow-xl p-6 relative overflow-hidden group"><div class="absolute inset-0 bg-gradient-to-br from-purple-200 via-pink-200 to-blue-200 opacity-70 dark:from-purple-700 dark:via-pink-700 dark:to-blue-700 blur-3xl transform scale-150 group-hover:scale-100 transition-all duration-500"></div><div class="relative z-10"><div class="text-center text-gray-700 dark:text-gray-200 mb-6"><h2 class="text-2xl font-semibold mb-2">Total Sales</h2><p class="text-5xl font-extrabold text-purple-600 dark:text-purple-400">$12,345</p></div><div class="relative h-48"><div class="absolute bottom-0 left-0 w-full flex justify-around items-end"><div class="w-12 h-24 bg-purple-400 dark:bg-purple-600 rounded-t-lg shadow-lg transform -skew-x-12 origin-bottom transition-all duration-300 group-hover:h-32" style="height: 50%;"></div><div class="w-12 h-32 bg-pink-400 dark:bg-pink-600 rounded-t-lg shadow-lg transform -skew-x-12 origin-bottom transition-all duration-300 group-hover:h-40" style="height: 70%;"></div><div class="w-12 h-28 bg-blue-400 dark:bg-blue-600 rounded-t-lg shadow-lg transform -skew-x-12 origin-bottom transition-all duration-300 group-hover:h-36" style="height: 60%;"></div></div></div></div></div><div class="bg-white dark:bg-gray-800 rounded-lg shadow-xl p-6 relative overflow-hidden group"><div class="absolute inset-0 bg-gradient-to-br from-green-200 via-yellow-200 to-red-200 opacity-70 dark:from-green-700 dark:via-yellow-700 dark:to-red-700 blur-3xl transform scale-150 group-hover:scale-100 transition-all duration-500"></div><div class="relative z-10"><div class="text-center text-gray-700 dark:text-gray-200 mb-6"><h2 class="text-2xl font-semibold mb-2">New Users</h2><p class="text-5xl font-extrabold text-green-600 dark:text-green-400">876</p></div><div class="relative h-48 flex items-center justify-center"><div class="w-36 h-36 bg-green-400 dark:bg-green-600 rounded-full flex items-center justify-center shadow-lg transform translate-z-10 group-hover:scale-110 transition-transform duration-300"><div class="w-24 h-24 bg-white dark:bg-gray-800 rounded-full flex items-center justify-center"><svg class="w-16 h-16 text-green-700 dark:text-green-300" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z" clip-rule="evenodd"></path></svg></div></div></div></div></div><div class="bg-white dark:bg-gray-800 rounded-lg shadow-xl p-6 relative overflow-hidden group"><div class="absolute inset-0 bg-gradient-to-br from-orange-200 via-red-200 to-yellow-200 opacity-70 dark:from-orange-700 dark:via-red-700 dark:to-yellow-700 blur-3xl transform scale-150 group-hover:scale-100 transition-all duration-500"></div><div class="relative z-10"><div class="text-center text-gray-700 dark:text-gray-200 mb-6"><h2 class="text-2xl font-semibold mb-2">Revenue Breakdown</h2><p class="text-5xl font-extrabold text-orange-600 dark:text-orange-400">65%</p></div><div class="relative h-48 flex items-center justify-center"><div class="w-36 h-36 rounded-full bg-orange-400 dark:bg-orange-600 flex items-center justify-center shadow-lg" style="transform: rotateX(60deg) rotateZ(45deg); outlook: 1px solid transparent;"><div class="w-24 h-24 rounded-full bg-white dark:bg-gray-800 absolute" style="transform: translateZ(10px);"></div><div class="w-32 h-32 rounded-full border-8 border-orange-200 dark:border-orange-500 absolute" style="clip-path: polygon(50% 0%, 100% 0%, 100% 100%, 0% 100%, 0% 40%, 50% 50%); transform: rotate(-45deg);"></div></div></div></div></div><div class="bg-white dark:bg-gray-800 rounded-lg shadow-xl p-6 relative overflow-hidden group md:col-span-2 lg:col-span-full"><div class="absolute inset-0 bg-gradient-to-br from-teal-200 via-cyan-200 to-indigo-200 opacity-70 dark:from-teal-700 dark:via-cyan-700 dark:to-indigo-700 blur-3xl transform scale-150 group-hover:scale-100 transition-all duration-500"></div><div class="relative z-10"><div class="text-center text-gray-700 dark:text-gray-200 mb-6"><h2 class="text-2xl font-semibold mb-2">User Demographics</h2><p class="text-4xl font-extrabold text-teal-600 dark:text-teal-400">Global Reach</p></div><div class="flex justify-center items-center flex-wrap gap-4"><div class="w-24 h-24 rounded-full overflow-hidden shadow-lg transform hover:scale-110 transition-transform duration-300"><img src="https://picsum.photos/seed/avatar1/200/200" alt="User Avatar" class="object-cover w-full h-full"></div><div class="w-24 h-24 rounded-full overflow-hidden shadow-lg transform hover:scale-110 transition-transform duration-300"><img src="https://picsum.photos/seed/avatar2/200/200" alt="User Avatar" class="object-cover w-full h-full"></div><div class="w-24 h-24 rounded-full overflow-hidden shadow-lg transform hover:scale-110 transition-transform duration-300"><img src="https://picsum.photos/seed/avatar3/200/200" alt="User Avatar" class="object-cover w-full h-full"></div><div class="w-24 h-24 rounded-full overflow-hidden shadow-lg transform hover:scale-110 transition-transform duration-300"><img src="https://picsum.photos/seed/avatar4/200/200" alt="User Avatar" class="object-cover w-full h-full"></div><div class="w-24 h-24 rounded-full overflow-hidden shadow-lg transform hover:scale-110 transition-transform duration-300"><img src="https://picsum.photos/seed/avatar5/200/200" alt="User Avatar" class="object-cover w-full h-full"></div></div></div></div></div></div></div>

Product Gallery 구성 요소

스큐어모픽 디자인, 단색 색 구성표 및 어두운 테마 지원을 갖춘 반응형 제품 갤러리 구성 요소로, Tailwind CSS로 구축되었습니다. 블로그 및 콘텐츠 소비에 적합한 간단한 레이아웃이 특징이며 미묘한 그림자와 그라디언트로 실제 요소를 모방합니다.

열다 미리 보기

                <div class="min-h-screen bg-gray-100 dark:bg-gray-900 p-8 flex items-center justify-center font-sans">
  <div class="container max-w-4xl mx-auto bg-white dark:bg-gray-800 rounded-3xl shadow-2xl p-8 border-gray-200 dark:border-gray-700 border-b-8 border-r-4 transition-all duration-300 ease-in-out">
    <h1 class="text-4xl font-extrabold text-gray-800 dark:text-gray-100 mb-8 text-center tracking-tight drop-shadow-md">Our Gallery</h1>

    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">

      <!-- Product Card 1 -->
      <div class="bg-gray-50 dark:bg-gray-700 rounded-2xl shadow-lg hover:shadow-xl transform hover:-translate-y-1 transition-all duration-300 ease-in-out p-6 border-t-4 border-l-4 border-gray-200 dark:border-gray-600 relative overflow-hidden group">
        <div class="absolute inset-0 bg-gradient-to-br from-gray-100 to-gray-200 dark:from-gray-700 dark:to-gray-800 opacity-20 group-hover:opacity-30 rounded-2xl transition-opacity duration-300"></div>
        <img src="https://picsum.photos/seed/product1/400/300" alt="Product Image" class="w-full h-48 object-cover rounded-xl mb-4 shadow-inner border border-gray-200 dark:border-gray-600">
        <h2 class="text-2xl font-bold text-gray-800 dark:text-gray-100 mb-2">Vintage Camera</h2>
        <p class="text-gray-600 dark:text-gray-300 leading-relaxed">A classic camera with a modern touch, perfect for capturing timeless moments.</p>
        <span class="block text-right text-xl font-semibold text-gray-700 dark:text-gray-200 mt-4">$299</span>
      </div>

      <!-- Product Card 2 -->
      <div class="bg-gray-50 dark:bg-gray-700 rounded-2xl shadow-lg hover:shadow-xl transform hover:-translate-y-1 transition-all duration-300 ease-in-out p-6 border-t-4 border-l-4 border-gray-200 dark:border-gray-600 relative overflow-hidden group">
        <div class="absolute inset-0 bg-gradient-to-br from-gray-100 to-gray-200 dark:from-gray-700 dark:to-gray-800 opacity-20 group-hover:opacity-30 rounded-2xl transition-opacity duration-300"></div>
        <img src="https://picsum.photos/seed/product2/400/300" alt="Product Image" class="w-full h-48 object-cover rounded-xl mb-4 shadow-inner border border-gray-200 dark:border-gray-600">
        <h2 class="text-2xl font-bold text-gray-800 dark:text-gray-100 mb-2">Leather Journal</h2>
        <p class="text-gray-600 dark:text-gray-300 leading-relaxed">Handcrafted leather journal for your thoughts and creative expressions.</p>
        <span class="block text-right text-xl font-semibold text-gray-700 dark:text-gray-200 mt-4">$45</span>
      </div>

      <!-- Product Card 3 -->
      <div class="bg-gray-50 dark:bg-gray-700 rounded-2xl shadow-lg hover:shadow-xl transform hover:-translate-y-1 transition-all duration-300 ease-in-out p-6 border-t-4 border-l-4 border-gray-200 dark:border-gray-600 relative overflow-hidden group">
        <div class="absolute inset-0 bg-gradient-to-br from-gray-100 to-gray-200 dark:from-gray-700 dark:to-gray-800 opacity-20 group-hover:opacity-30 rounded-2xl transition-opacity duration-300"></div>
        <img src="https://picsum.photos/seed/product3/400/300" alt="Product Image" class="w-full h-48 object-cover rounded-xl mb-4 shadow-inner border border-gray-200 dark:border-gray-600">
        <h2 class="text-2xl font-bold text-gray-800 dark:text-gray-100 mb-2">Classic Turntable</h2>
        <p class="text-gray-600 dark:text-gray-300 leading-relaxed">Experience the warm, rich sound of vinyl with this elegant turntable.</p>
        <span class="block text-right text-xl font-semibold text-gray-700 dark:text-gray-200 mt-4">$549</span>
      </div>

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

갤러리 구성 요소

glassmorphism 효과, 생생한 색상 및 어두운 테마 지원을 제공하는 반응형 갤러리 구성 요소로, 대시보드에 적합합니다.

열다 미리 보기

                <div class="min-h-screen bg-gray-100 dark:bg-gray-900 p-8">
  <div class="container mx-auto">
    <h1 class="text-4xl font-bold text-center mb-8 text-gray-800 dark:text-white">Our Vibrant Gallery</h1>
    <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
      <!-- Gallery Item 1 -->
      <div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg overflow-hidden backdrop-filter backdrop-blur-lg bg-opacity-20 dark:bg-opacity-20 transform transition duration-500 hover:scale-105 group">
        <img src="https://picsum.photos/seed/picsum1/400/300" alt="Gallery Image 1" class="w-full h-48 object-cover">
        <div class="p-4">
          <h3 class="font-bold text-xl mb-2 text-purple-800 dark:text-purple-300">Project Alpha</h3>
          <p class="text-gray-700 dark:text-gray-300 text-sm">A sleek design project showcasing modern aesthetics.</p>
        </div>
      </div>

      <!-- Gallery Item 2 -->
      <div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg overflow-hidden backdrop-filter backdrop-blur-lg bg-opacity-20 dark:bg-opacity-20 transform transition duration-500 hover:scale-105 group">
        <img src="https://picsum.photos/seed/picsum2/400/300" alt="Gallery Image 2" class="w-full h-48 object-cover">
        <div class="p-4">
          <h3 class="font-bold text-xl mb-2 text-red-800 dark:text-red-300">Innovate Beta</h3>
          <p class="text-gray-700 dark:text-gray-300 text-sm">Cutting-edge technology integrated with user-centric design.</p>
        </div>
      </div>

      <!-- Gallery Item 3 -->
      <div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg overflow-hidden backdrop-filter backdrop-blur-lg bg-opacity-20 dark:bg-opacity-20 transform transition duration-500 hover:scale-105 group">
        <img src="https://picsum.photos/seed/picsum3/400/300" alt="Gallery Image 3" class="w-full h-48 object-cover">
        <div class="p-4">
          <h3 class="font-bold text-xl mb-2 text-green-800 dark:text-green-300">Data Drive</h3>
          <p class="text-gray-700 dark:text-gray-300 text-sm">Visualizing complex data into intuitive and actionable insights.</p>
        </div>
      </div>

      <!-- Gallery Item 4 -->
      <div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg overflow-hidden backdrop-filter backdrop-blur-lg bg-opacity-20 dark:bg-opacity-20 transform transition duration-500 hover:scale-105 group">
        <img src="https://picsum.photos/seed/picsum4/400/300" alt="Gallery Image 4" class="w-full h-48 object-cover">
        <div class="p-4">
          <h3 class="font-bold text-xl mb-2 text-blue-800 dark:text-blue-300">Analytics Flow</h3>
          <p class="text-gray-700 dark:text-gray-300 text-sm">Interactive dashboards for real-time performance monitoring.</p>
        </div>
      </div>

      <!-- Gallery Item 5 -->
      <div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg overflow-hidden backdrop-filter backdrop-blur-lg bg-opacity-20 dark:bg-opacity-20 transform transition duration-500 hover:scale-105 group">
        <img src="https://picsum.photos/seed/picsum5/400/300" alt="Gallery Image 5" class="w-full h-48 object-cover">
        <div class="p-4">
          <h3 class="font-bold text-xl mb-2 text-yellow-800 dark:text-yellow-300">Growth Metrics</h3>
          <p class="text-gray-700 dark:text-gray-300 text-sm">Tracking key growth indicators with dynamic charts.</p>
        </div>
      </div>

      <!-- Gallery Item 6 -->
      <div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg overflow-hidden backdrop-filter backdrop-blur-lg bg-opacity-20 dark:bg-opacity-20 transform transition duration-500 hover:scale-105 group">
        <img src="https://picsum.photos/seed/picsum6/400/300" alt="Gallery Image 6" class="w-full h-48 object-cover">
        <div class="p-4">
          <h3 class="font-bold text-xl mb-2 text-pink-800 dark:text-pink-300">User Insights</h3>
          <p class="text-gray-700 dark:text-gray-300 text-sm">Understanding user behavior through comprehensive reports.</p>
        </div>
      </div>
    </div>
  </div>
</div>

Notifications 구성 요소

Tailwind CSS로 구축된 생생한 색 구성표, 복잡한 인터페이스, 반응형 디자인 및 어두운 테마 지원을 갖춘 전자 상거래를 위한 Skeuomorphic Notifications 구성 요소입니다.

열다 미리 보기

                <div class="relative min-h-screen bg-gradient-to-br from-gray-100 to-gray-300 dark:from-gray-900 dark:to-gray-700 p-8 flex items-center justify-center font-sans">

  <!-- Skeuomorphic Notification Container -->
  <div class="bg-gradient-to-br from-gray-200 to-gray-400 dark:from-gray-800 dark:to-gray-600 rounded-3xl shadow-2xl p-6 md:p-10 w-full max-w-lg
              border-t border-l border-gray-50 dark:border-gray-700
              border-b border-r border-gray-400 dark:border-gray-900
              transform transition-all duration-300 hover:scale-105">

    <!-- Header -->
    <div class="flex justify-between items-center mb-8 pb-4 border-b border-gray-300 dark:border-gray-500">
      <h2 class="text-3xl font-extrabold text-gray-800 dark:text-gray-100 drop-shadow-md tracking-wide">Notifications</h2>
      <div class="relative">
        <button class="w-12 h-12 rounded-full bg-gradient-to-br from-rose-500 to-rose-700 dark:from-rose-700 dark:to-rose-900 p-1
                       shadow-lg hover:shadow-xl transform hover:-translate-y-1 transition-all duration-200
                       focus:outline-none focus:ring-4 focus:ring-rose-300 dark:focus:ring-rose-600
                       flex items-center justify-center">
          <span class="text-white text-xl font-bold">5</span>
        </button>
        <span class="absolute top-0 right-0 block h-4 w-4 bg-lime-400 dark:bg-lime-600 rounded-full ring-2 ring-white dark:ring-gray-800 animate-pulse"></span>
      </div>
    </div>

    <!-- Notification List -->
    <div class="space-y-6 max-h-96 overflow-y-auto pr-2 custom-scrollbar">

      <!-- Notification Item 1: New Order -->
      <div class="flex items-center bg-gradient-to-br from-white to-gray-100 dark:from-gray-700 dark:to-gray-800 p-4 rounded-xl shadow-md
                  border-t border-l border-gray-100 dark:border-gray-600
                  border-b border-r border-gray-300 dark:border-gray-900
                  transform transition-all duration-200 hover:shadow-lg hover:-translate-y-0.5">
        <div class="flex-shrink-0 w-14 h-14 rounded-full bg-gradient-to-br from-green-400 to-green-600 dark:from-green-600 dark:to-green-800
                    flex items-center justify-center shadow-inner-lg shadow-green-500/50 dark:shadow-green-900/50 mr-4">
          <svg class="w-7 h-7 text-white" 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="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.592 1L21 6m-4 3l4 2m-4 2l4 2m-4 2l4 2M3 6l4 2m-4 6l4 2m-4 2l4 2M12 18h.01"></path></svg>
        </div>
        <div class="flex-grow">
          <p class="text-lg font-semibold text-gray-800 dark:text-gray-200">New Order Placed!</p>
          <p class="text-sm text-gray-600 dark:text-gray-400">Order #12345 for $120.00 has been confirmed.</p>
          <p class="text-xs text-gray-500 dark:text-gray-500 mt-1">2 minutes ago</p>
        </div>
      </div>

      <!-- Notification Item 2: Product Restock -->
      <div class="flex items-center bg-gradient-to-br from-white to-gray-100 dark:from-gray-700 dark:to-gray-800 p-4 rounded-xl shadow-md
                  border-t border-l border-gray-100 dark:border-gray-600
                  border-b border-r border-gray-300 dark:border-gray-900
                  transform transition-all duration-200 hover:shadow-lg hover:-translate-y-0.5">
        <div class="flex-shrink-0 w-14 h-14 rounded-full bg-gradient-to-br from-blue-400 to-blue-600 dark:from-blue-600 dark:to-blue-800
                    flex items-center justify-center shadow-inner-lg shadow-blue-500/50 dark:shadow-blue-900/50 mr-4">
          <svg class="w-7 h-7 text-white" 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 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"></path></svg>
        </div>
        <div class="flex-grow">
          <p class="text-lg font-semibold text-gray-800 dark:text-gray-200">Product Restocked!</p>
          <p class="text-sm text-gray-600 dark:text-gray-400">Your favorite

사이트 맵 구성 요소

단색 색 구성표를 사용하여 소셜 미디어 인터페이스용으로 설계된 레트로/빈티지 사이트 맵 구성 요소입니다. 더 나은 가독성과 미적 매력을 위해 어두운 테마의 간단한 레이아웃이 특징입니다.

열다 미리 보기

                <div class="max-w-4xl mx-auto p-6 bg-gray-900 dark:bg-gray-800 rounded-lg shadow-md">
    <h1 class="text-4xl text-white font-bold text-center mb-6">Site Map</h1>
    <ul class="list-disc list-inside space-y-4">
        <li class="flex items-center space-x-4">
            <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Profile Picture" class="w-12 h-12 rounded-full border-2 border-gray-600">
            <div>
                <a href="#" class="text-white hover:text-gray-400">Home</a>
                <p class="text-gray-400 text-sm">Our homepage with latest updates</p>
            </div>
        </li>
        <li class="flex items-center space-x-4">
            <img src="https://randomuser.me/api/portraits/women/32.jpg" alt="Profile Picture" class="w-12 h-12 rounded-full border-2 border-gray-600">
            <div>
                <a href="#" class="text-white hover:text-gray-400">Profile</a>
                <p class="text-gray-400 text-sm">Your personal profile page</p>
            </div>
        </li>
        <li class="flex items-center space-x-4">
            <img src="https://randomuser.me/api/portraits/men/33.jpg" alt="Profile Picture" class="w-12 h-12 rounded-full border-2 border-gray-600">
            <div>
                <a href="#" class="text-white hover:text-gray-400">Messages</a>
                <p class="text-gray-400 text-sm">View your messages</p>
            </div>
        </li>
        <li class="flex items-center space-x-4">
            <img src="https://randomuser.me/api/portraits/women/33.jpg" alt="Profile Picture" class="w-12 h-12 rounded-full border-2 border-gray-600">
            <div>
                <a href="#" class="text-white hover:text-gray-400">Settings</a>
                <p class="text-gray-400 text-sm">Manage your account settings</p>
            </div>
        </li>
    </ul>
    <div class="mt-6">
        <h2 class="text-2xl text-white font-bold mb-2">Gallery</h2>
        <div class="grid grid-cols-2 gap-4">  
            <img src="https://picsum.photos/200/200?random=1" alt="Gallery Image 1" class="rounded-lg">
            <img src="https://picsum.photos/200/200?random=2" alt="Gallery Image 2" class="rounded-lg">
            <img src="https://picsum.photos/200/200?random=3" alt="Gallery Image 3" class="rounded-lg">
            <img src="https://picsum.photos/200/200?random=4" alt="Gallery Image 4" class="rounded-lg">
        </div>
    </div>
</div>

컨테이너 구성 요소

파스텔 색상, 다크 모드 지원, Tailwind CSS를 사용하는 복잡한 인터랙티브 요소를 갖춘 전자 상거래를 위한 반응형 머티리얼 디자인 컨테이너입니다.

열다 미리 보기

                <div class="min-h-screen bg-gradient-to-br from-purple-50 to-pink-100 dark:from-gray-900 dark:to-gray-800 p-8 flex items-center justify-center">
  <div class="shadow-2xl rounded-3xl overflow-hidden max-w-6xl w-full bg-white dark:bg-gray-700 transition-all duration-300 transform hover:scale-[1.01] hover:shadow-purple-400/30 dark:hover:shadow-pink-400/20">
    <div class="md:flex">
      <!-- Product Image Section -->
      <div class="md:flex-shrink-0 md:w-1/2 relative">
        <img class="w-full h-96 object-cover object-center transform transition-transform duration-500 hover:scale-105" src="https://picsum.photos/seed/picsum/600/400" alt="Product Image">
        <div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent"></div>
        <div class="absolute bottom-0 left-0 p-6">
          <h1 class="text-4xl font-extrabold text-white mb-2">Premium Gadget Pro</h1>
          <p class="text-purple-200 text-lg">Unleash your potential with unparalleled performance.</p>
        </div>
        <span class="absolute top-4 left-4 bg-purple-500 text-white text-sm font-bold px-3 py-1 rounded-full shadow-lg">NEW ARRIVAL</span>
      </div>

      <!-- Product Details Section -->
      <div class="p-8 md:w-1/2 flex flex-col justify-between">
        <div>
          <span class="text-sm text-purple-600 dark:text-purple-300 font-semibold mb-2 block">Electronics > Smartphones</span>
          <h2 class="text-4xl font-bold text-gray-800 dark:text-white mb-4">Flagship Smartphone X</h2>
          <p class="text-gray-600 dark:text-gray-300 leading-relaxed mb-6">Experience cutting-edge technology with our revolutionary smartphone. Featuring a stunning display, an advanced camera system, and all-day battery life.</p>
          
          <div class="flex items-center mb-6">
            <span class="text-5xl font-extrabold text-purple-700 dark:text-purple-300 mr-3">$999</span>
            <span class="text-xl text-gray-400 line-through">$1200</span>
            <span class="ml-3 bg-green-200 text-green-800 text-sm font-bold px-3 py-1 rounded-full">17% OFF</span>
          </div>

          <!-- Color Options -->
          <div class="mb-6">
            <h3 class="text-lg font-semibold text-gray-800 dark:text-white mb-3">Color:</h3>
            <div class="flex space-x-3">
              <button class="w-10 h-10 rounded-full bg-blue-500 border-4 border-purple-400 focus:outline-none focus:ring-4 focus:ring-blue-300 transition-all duration-200"></button>
              <button class="w-10 h-10 rounded-full bg-pink-500 border-2 border-transparent hover:border-purple-400 focus:outline-none focus:ring-4 focus:ring-pink-300 transition-all duration-200"></button>
              <button class="w-10 h-10 rounded-full bg-gray-800 border-2 border-transparent hover:border-purple-400 focus:outline-none focus:ring-4 focus:ring-gray-600 transition-all duration-200"></button>
            </div>
          </div>

          <!-- Quantity Selector -->
          <div class="mb-8">
            <h3 class="text-lg font-semibold text-gray-800 dark:text-white mb-3">Quantity:</h3>
            <div class="flex items-center space-x-3">
              <button class="bg-gray-200 dark:bg-gray-600 text-gray-700 dark:text-white p-2 rounded-lg hover:bg-gray-300 dark:hover:bg-gray-500 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-purple-400">-</button>
              <span class="text-xl font-bold text-gray-800 dark:text-white">1</span>
              <button class="bg-gray-200 dark:bg-gray-600 text-gray-700 dark:text-white p-2 rounded-lg hover:bg-gray-300 dark:hover:bg-gray-500 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-purple-400">+</button>
            </div>
          </div>
        </div>

        <!-- Call to Action Buttons -->
        <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
          <button class="bg-purple-600 hover:bg-purple-700 text-white font-bold py-3 px-6 rounded-xl shadow-lg transform hover:scale-105 transition-all duration-200 focus:outline-none focus:ring-4 focus:ring-purple-300">Add to Cart</button>
          <button class="bg-pink-500 hover:bg-pink-600 text-white font-bold py-3 px-6 rounded-xl shadow-lg transform hover:scale-105 transition-all duration-200 focus:outline-none focus:ring-4 focus:ring-pink-300">Buy Now</button>
        </div>
      </div>
    </div>
    
    <!-- Customer Reviews Section -->
    <div class="p-8 border-t border-gray-200 dark:border-gray-600">
      <h3 class="text-2xl font-bold text-gray-800 dark:text-white mb-6">Customer Reviews</h3>
      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        <!-- Review Card 1 -->
        <div class="bg-gray-50 dark:bg-gray-600 p-6 rounded-2xl shadow-md transition-all duration-200 transform hover:scale-[1.02] hover:shadow-lg">
          <div class="flex items-center mb-4">
            <img class="w-12 h-12 rounded-full mr-4 object-cover" src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar">
            <div>
              <p class="font-semibold text-gray-800 dark:text-white">Jane Doe</p>
              <div class="flex text-yellow-400 text-sm">
                <i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star-half-alt"></i>
              </div>
            </div>
          </div>
          <p class="text-gray-600 dark:text-gray-200 leading-relaxed">
            "Absolutely love this product! The camera is incredible and the battery lasts forever. Highly recommend it to everyone."
          </p>
        </div>
        
        <!-- Review Card 2 -->
        <div class="bg-gray-50 dark:bg-gray-600 p-6 rounded-2xl shadow-md transition-all duration-200 transform hover:scale-[1.02] hover:shadow-lg">
          <div class="flex items-center mb-4">
            <img class="w-12 h-12 rounded-full mr-4 object-cover" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
            <div>
              <p class="font-semibold text-gray-800 dark:text-white">John Smith</p>
              <div class="flex text-yellow-400 text-sm">
                <i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i>
              </div>
            </div>
          </div>
          <p class="text-gray-600 dark:text-gray-200 leading-relaxed">
            "Fast shipping and the phone exceeded my expectations. So smooth and powerful. Best purchase this year!"
          </p>
        </div>

        <!-- Review Card 3 -->
        <div class="bg-gray-50 dark:bg-gray-600 p-6 rounded-2xl shadow-md transition-all duration-200 transform hover:scale-[1.02] hover:shadow-lg">
          <div class="flex items-center mb-4">
            <img class="w-12 h-12 rounded-full mr-4 object-cover" src="https://randomuser.me/api/portraits/women/76.jpg" alt="User Avatar">
            <div>
              <p class="font-semibold text-gray-800 dark:text-white">Emily White</p>
              <div class="flex text-yellow-400 text-sm">
                <i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="far fa-star"></i>
              </div>
            </div>
          </div>
          <p class="text-gray-600 dark:text-gray-200 leading-relaxed">
            "Great phone, though it took a bit to get used to the new OS. Still, fantastic performance and beautiful design."
          </p>
        </div>
      </div>
    </div>

    <!-- Related Products Section -->
    <div class="p-8 border-t border-gray-200 dark:border-gray-600">
      <h3 class="text-2xl font-bold text-gray-800 dark:text-white mb-6">Related Products</h3>
      <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
        <!-- Related Product Card 1 -->
        <div class="bg-gray-50 dark:bg-gray-600 rounded-2xl shadow-md overflow-hidden transition-all duration-200 transform hover:scale-[1.03] hover:shadow-lg">
          <img class="w-full h-48 object-cover" src="https://picsum.photos/seed/related1/400/300" alt="Related Product">
          <div class="p-4">
            <h4 class="font-semibold text-gray-800 dark:text-white mb-1">Wireless Headphones</h4>
            <p class="text-sm text-gray-600 dark:text-gray-300 mb-2">Immersive audio experience.</p>
            <p class="text-lg font-bold text-purple-700 dark:text-purple-300">$149</p>
            <button class="mt-4 w-full bg-purple-500 text-white py-2 rounded-lg text-sm hover:bg-purple-600 focus:outline-none focus:ring-2 focus:ring-purple-400 transition-colors duration-200">View Details</button>
          </div>
        </div>

        <!-- Related Product Card 2 -->
        <div class="bg-gray-50 dark:bg-gray-600 rounded-2xl shadow-md overflow-hidden transition-all duration-200 transform hover:scale-[1.03] hover:shadow-lg">
          <img class="w-full h-48 object-cover" src="https://picsum.photos/seed/related2/400/300" alt="Related Product">
          <div class="p-4">
            <h4 class="font-semibold text-gray-800 dark:text-white mb-1">Smartwatch Elite</h4>
            <p class="text-sm text-gray-600 dark:text-gray-300 mb-2">Track your fitness and stay connected.</p>
            <p class="text-lg font-bold text-purple-700 dark:text-purple-300">$299</p>
            <button class="mt-4 w-full bg-purple-500 text-white py-2 rounded-lg text-sm hover:bg-purple-600 focus:outline-none focus:ring-2 focus:ring-purple-400 transition-colors duration-200">View Details</button>
          </div>
        </div>

        <!-- Related Product Card 3 -->
        <div class="bg-gray-50 dark:bg-gray-600 rounded-2xl shadow-md overflow-hidden transition-all duration-200 transform hover:scale-[1.03] hover:shadow-lg">
          <img class="w-full h-48 object-cover" src="https://picsum.photos/seed/related3/400/300" alt="Related Product">
          <div class="p-4">
            <h4 class="font-semibold text-gray-800 dark:text-white mb-1">Portable Power Bank</h4>
            <p class="text-sm text-gray-600 dark:text-gray-300 mb-2">Never run out of battery.</p>
            <p class="text-lg font-bold text-purple-700 dark:text-purple-300">$59</p>
            <button class="mt-4 w-full bg-purple-500 text-white py-2 rounded-lg text-sm hover:bg-purple-600 focus:outline-none focus:ring-2 focus:ring-purple-400 transition-colors duration-200">View Details</button>
          </div>
        </div>

        <!-- Related Product Card 4 -->
        <div class="bg-gray-50 dark:bg-gray-600 rounded-2xl shadow-md overflow-hidden transition-all duration-200 transform hover:scale-[1.03] hover:shadow-lg">
          <img class="w-full h-48 object-cover" src="https://picsum.photos/seed/related4/400/300" alt="Related Product">
          <div class="p-4">
            <h4 class="font-semibold text-gray-800 dark:text-white mb-1">Noise-Cancelling Earbuds</h4>
            <p class="text-sm text-gray-600 dark:text-gray-300 mb-2">Pure sound, no distractions.</p>
            <p class="text-lg font-bold text-purple-700 dark:text-purple-300">$199</p>
            <button class="mt-4 w-full bg-purple-500 text-white py-2 rounded-lg text-sm hover:bg-purple-600 focus:outline-none focus:ring-2 focus:ring-purple-400 transition-colors duration-200">View Details</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- Font Awesome for icons (optional) -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">

Navigation Components 컴포넌트

Glassmorphism, 단색, 보통, 전자 상거래 내비게이션 구성 요소, 다크 모드 지원

열다 미리 보기

                <nav class="p-4 backdrop-filter backdrop-blur-lg bg-opacity-20 bg-gray-100 dark:bg-gray-800 dark:bg-opacity-20 text-gray-800 dark:text-white shadow-lg">
  <div class="container mx-auto flex flex-wrap items-center justify-between">

    <!-- Logo or Brand Name -->
    <a href="#" class="text-xl font-bold p-2">ShopSphere</a>

    <!-- Mobile Menu Button -->
    <button class="lg:hidden p-2 rounded-md focus:outline-none focus:ring-2 focus:ring-gray-300">
      <svg class="w-6 h-6" 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 6h16M4 12h16m-4 6h4"></path>
      </svg>
    </button>

    <!-- Navigation Links -->
    <div class="hidden lg:flex flex-grow items-center justify-center" id="navbar-collapse">
      <ul class="flex flex-col lg:flex-row gap-1 lg:gap-4">
        <li><a href="#" class="block p-2 hover:bg-white hover:bg-opacity-30 rounded-md transition duration-300">Home</a></li>
        <li><a href="#" class="block p-2 hover:bg-white hover:bg-opacity-30 rounded-md transition duration-300">Products</a></li>
        <li><a href="#" class="block p-2 hover:bg-white hover:bg-opacity-30 rounded-md transition duration-300">Categories</a></li>
        <li><a href="#" class="block p-2 hover:bg-white hover:bg-opacity-30 rounded-md transition duration-300">About Us</a></li>
        <li><a href="#" class="block p-2 hover:bg-white hover:bg-opacity-30 rounded-md transition duration-300">Contact</a></li>
      </ul>
    </div>

    <!-- Search and Cart Icons -->
    <div class="flex items-center gap-2 p-2">
        <a href="#" class="p-2 hover:bg-white hover:bg-opacity-30 rounded-md transition duration-300">
            <svg class="w-6 h-6" 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="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg>
        </a>
        <a href="#" class="p-2 hover:bg-white hover:bg-opacity-30 rounded-md transition duration-300 relative">
            <svg class="w-6 h-6" 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 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z"></path></svg>
            <span class="absolute top-0 right-0 inline-flex items-center justify-center px-2 py-1 text-xs font-bold leading-none text-red-100 bg-red-600 rounded-full">3</span>
        </a>
    </div>

  </div>
</nav>

1 ... 154 155 156 157 158 ... 335

검색 구성 요소

카테고리

모든 구성 요소