검색 구성 요소

모든 구성 요소

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

Content Display Components 컴포넌트

glassmorphism 효과, 어두운 테마 지원 및 보색 구성표를 갖춘 간단하고 반응형 콘텐츠 표시 구성 요소로, 블로그 또는 콘텐츠 소비에 적합합니다.

                <div class="min-h-screen bg-gradient-to-br from-purple-200 via-pink-200 to-red-200 dark:from-gray-900 dark:via-purple-900 dark:to-pink-900 flex items-center justify-center p-4">
  <div class="backdrop-filter backdrop-blur-lg bg-opacity-20 bg-white dark:bg-gray-800 dark:bg-opacity-20 rounded-xl p-6 shadow-xl border border-gray-200 dark:border-gray-700 max-w-2xl w-full">
    <h1 class="text-3xl font-bold text-gray-800 dark:text-white mb-4">Glassmorphism Content Card</h1>
    
    <div class="mb-4">
      <img src="https://picsum.photos/600/300" alt="Blog Post Image" class="rounded-lg shadow-md mb-4">
      <h2 class="text-2xl font-semibold text-gray-700 dark:text-gray-200 mb-2">Lorem Ipsum Dolor Sit Amet</h2>
      <p class="text-gray-600 dark:text-gray-300 leading-relaxed">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
      </p>
    </div>
    
    <div class="flex items-center justify-between border-t border-gray-300 dark:border-gray-600 pt-4 mt-4">
      <div class="flex items-center">
        <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Author Avatar" class="w-10 h-10 rounded-full mr-3 border-2 border-purple-500 dark:border-pink-500">
        <div>
          <p class="font-semibold text-gray-700 dark:text-white">John Doe</p>
          <p class="text-sm text-gray-500 dark:text-gray-400">August 15, 2023</p>
        </div>
      </div>
      <a href="#" class="text-purple-600 dark:text-pink-400 hover:underline font-medium">Read More &rarr;</a>
    </div>
  </div>
</div>

Feedback Components 구성 요소

복잡하고 반응이 빠르며 어두운 테마로 지원되는 피드백 구성 요소 구성 요소는 대시보드에 대해 제공되며, 미니멀리스트/플랫 미학과 파스텔 색상 구성표로 설계되었습니다. Tailwind CSS 클래스와 함께 HTML만 사용하여 진행률 표시줄, 상태 표시기 및 최근 활동과 같은 다양한 피드백 요소를 표시합니다.

열다 미리 보기

                <div class="p-6 bg-white dark:bg-gray-800 shadow-lg rounded-lg">
  <h2 class="text-2xl font-semibold text-gray-800 dark:text-white mb-6">Feedback Overview</h2>

  <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
    <!-- Positive Feedback -->
    <div class="bg-gradient-to-r from-green-200 to-green-100 dark:from-green-700 dark:to-green-600 p-4 rounded-md flex items-center justify-between">
      <div class="flex items-center">
        <div class="p-3 bg-green-400 dark:bg-green-500 rounded-full mr-3">
          <svg class="h-6 w-6 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
          </svg>
        </div>
        <p class="text-green-800 dark:text-green-100 font-medium">Positive Feedback</p>
      </div>
      <span class="text-green-800 dark:text-green-100 text-xl font-bold">85%</span>
    </div>

    <!-- Negative Feedback -->
    <div class="bg-gradient-to-r from-red-200 to-red-100 dark:from-red-700 dark:to-red-600 p-4 rounded-md flex items-center justify-between">
      <div class="flex items-center">
        <div class="p-3 bg-red-400 dark:bg-red-500 rounded-full mr-3">
          <svg class="h-6 w-6 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
          </svg>
        </div>
        <p class="text-red-800 dark:text-red-100 font-medium">Negative Feedback</p>
      </div>
      <span class="text-red-800 dark:text-red-100 text-xl font-bold">15%</span>
    </div>
  </div>

  <!-- Feedback Progress Bar -->
  <div class="mb-8">
    <h3 class="text-lg font-semibold text-gray-700 dark:text-gray-200 mb-3">Overall Satisfaction</h3>
    <div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-4">
      <div class="bg-teal-400 h-4 rounded-full" style="width: 75%;"></div>
    </div>
    <p class="text-sm text-gray-500 dark:text-gray-400 mt-2 text-right">75% Satisfied</p>
  </div>

  <!-- Recent Feedback Activity -->
  <div>
    <h3 class="text-lg font-semibold text-gray-700 dark:text-gray-200 mb-4">Recent Activity</h3>
    <ul class="space-y-4">
      <li class="flex items-center">
        <img class="h-10 w-10 rounded-full object-cover mr-4" src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar">
        <div class="flex-grow">
          <p class="text-gray-800 dark:text-gray-100 font-medium">"Great service, very helpful!"</p>
          <p class="text-sm text-gray-500 dark:text-gray-400">- Jane Doe <span class="ml-2 px-2 py-0.5 bg-green-100 dark:bg-green-700 text-green-700 dark:text-green-100 text-xs font-semibold rounded-full">Positive</span></p>
        </div>
        <span class="text-sm text-gray-400 dark:text-gray-500">2 hours ago</span>
      </li>
      <li class="flex items-center">
        <img class="h-10 w-10 rounded-full object-cover mr-4" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
        <div class="flex-grow">
          <p class="text-gray-800 dark:text-gray-100 font-medium">"Room for improvement on delivery."</p>
          <p class="text-sm text-gray-500 dark:text-gray-400">- John Smith <span class="ml-2 px-2 py-0.5 bg-yellow-100 dark:bg-yellow-700 text-yellow-700 dark:text-yellow-100 text-xs font-semibold rounded-full">Neutral</span></p>
        </div>
        <span class="text-sm text-gray-400 dark:text-gray-500">1 day ago</span>
      </li>
      <li class="flex items-center">
        <img class="h-10 w-10 rounded-full object-cover mr-4" src="https://randomuser.me/api/portraits/women/60.jpg" alt="User Avatar">
        <div class="flex-grow">
          <p class="text-gray-800 dark:text-gray-100 font-medium">"Not satisfied with the product quality."</p>
          <p class="text-sm text-gray-500 dark:text-gray-400">- Emily White <span class="ml-2 px-2 py-0.5 bg-red-100 dark:bg-red-700 text-red-700 dark:text-red-100 text-xs font-semibold rounded-full">Negative</span></p>
        </div>
        <span class="text-sm text-gray-400 dark:text-gray-500">3 days ago</span>
      </li>
    </ul>
  </div>
</div>

Neumorphism Earth Tone 드롭다운 메뉴

흙색의 뉴모피즘(Neumorphism) 스타일의 드롭다운 메뉴로, 전자상거래에 적합합니다. 반응형이며 Tailwind CSS를 통한 어두운 테마 지원이 포함됩니다. JavaScript는 사용되지 않으며 다크 모드 변형을 포함하여 스타일링을 위한 HTML 및 Tailwind 유틸리티 클래스만 사용됩니다.

열다 미리 보기

                <div class="p-8 bg-gradient-to-br from-stone-200 to-stone-400 min-h-screen dark:from-stone-800 dark:to-stone-900 flex items-start justify-center font-sans">
  <div class="relative inline-block text-left">
    <div>
      <button type="button" class="inline-flex justify-center w-full rounded-xl shadow-neumorphic-light dark:shadow-neumorphic-dark px-6 py-3 bg-gradient-to-br from-stone-300 to-stone-200 dark:from-stone-700 dark:to-stone-800 text-stone-700 dark:text-stone-300 text-lg font-medium hover:from-stone-400 hover:to-stone-300 dark:hover:from-stone-600 dark:hover:to-stone-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-stone-100 focus:ring-stone-500 transition-all duration-300" id="options-menu" aria-haspopup="true" aria-expanded="true">
        Product Categories
        <svg class="-mr-1 ml-3 h-6 w-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
          <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
        </svg>
      </button>
    </div>

    <!-- Dropdown panel, show/hide based on menu state. -->
    <div class="origin-top-right absolute right-0 mt-4 w-72 rounded-xl shadow-neumorphic-light dark:shadow-neumorphic-dark bg-gradient-to-br from-stone-300 to-stone-200 dark:from-stone-700 dark:to-stone-800 ring-1 ring-black ring-opacity-5 focus:outline-none opacity-100 scale-100 transition-all duration-300 max-w-xs sm:max-w-md md:max-w-lg lg:max-w-xl" role="menu" aria-orientation="vertical" aria-labelledby="options-menu">
      <div class="py-2" role="none">
        <a href="#" class="block px-6 py-3 text-lg text-stone-700 dark:text-stone-300 hover:bg-stone-400 dark:hover:bg-stone-600 hover:text-white dark:hover:text-white rounded-lg mx-2 my-1 transition-colors duration-200" role="menuitem">Electronics</a>
        <a href="#" class="block px-6 py-3 text-lg text-stone-700 dark:text-stone-300 hover:bg-stone-400 dark:hover:bg-stone-600 hover:text-white dark:hover:text-white rounded-lg mx-2 my-1 transition-colors duration-200" role="menuitem">Apparel</a>
        <a href="#" class="block px-6 py-3 text-lg text-stone-700 dark:text-stone-300 hover:bg-stone-400 dark:hover:bg-stone-600 hover:text-white dark:hover:text-white rounded-lg mx-2 my-1 transition-colors duration-200" role="menuitem">Home Goods</a>
        <a href="#" class="block px-6 py-3 text-lg text-stone-700 dark:text-stone-300 hover:bg-stone-400 dark:hover:bg-stone-600 hover:text-white dark:hover:text-white rounded-lg mx-2 my-1 transition-colors duration-200" role="menuitem">Books & Media</a>
        <a href="#" class="block px-6 py-3 text-lg text-stone-700 dark:text-stone-300 hover:bg-stone-400 dark:hover:bg-stone-600 hover:text-white dark:hover:text-white rounded-lg mx-2 my-1 transition-colors duration-200" role="menuitem">Sports & Outdoors</a>
      </div>
    </div>
  </div>
</div>

<!-- Tailwind CSS Neumorphic Shadow Utility Classes -->
<style>
  .shadow-neumorphic-light {
    box-shadow: 8px 8px 16px #a8a8a8, -8px -8px 16px #ffffff;
  }
  .dark .shadow-neumorphic-dark {
    box-shadow: 8px 8px 16px #4a4a4a, -8px -8px 16px #222222;
  }
  @media (max-width: 640px) {
    .max-w-xs {
      max-width: 20rem; /* 320px */
    }
  }
  @media (min-width: 641px) and (max-width: 768px) {
    .sm\:max-w-md {
      max-width: 28rem; /* 448px */
    }
  }
  @media (min-width: 769px) and (max-width: 1024px) {
    .md\:max-w-lg {
      max-width: 32rem; /* 512px */
    }
  }
  @media (min-width: 1025px) {
    .lg\:max-w-xl {
      max-width: 36rem; /* 576px */
    }
  }
</style>

Notifications 구성 요소

전자 상거래를 위한 간단하고 반응이 빠른 알림 구성 요소로, 3D 디자인 요소와 어스 톤(Earth tones) 색 구성표가 있습니다. 다크 모드를 지원합니다.

열다 미리 보기

                <div class="p-4 md:p-8 bg-gradient-to-br from-stone-100 to-stone-200 dark:from-stone-800 dark:to-stone-900 min-h-screen flex items-center justify-center">
  <div class="max-w-md w-full bg-white dark:bg-stone-700 rounded-lg shadow-xl overflow-hidden transform transition-all duration-300 hover:scale-105">
    <div class="p-6 md:p-8 border-b-2 border-stone-200 dark:border-stone-600">
      <h2 class="text-2xl md:text-3xl font-bold text-stone-800 dark:text-stone-100 mb-2 drop-shadow-md">Notifications</h2>
      <p class="text-stone-600 dark:text-stone-300">Stay updated on your recent e-commerce activities.</p>
    </div>
    <div class="divide-y divide-stone-200 dark:divide-stone-600">
      
      <!-- Notification Item 1 -->
      <div class="p-4 md:p-6 flex items-start space-x-4 animate-fade-in-down">
        <div class="relative w-12 h-12 rounded-full overflow-hidden shadow-lg transform -rotate-6 transition-all duration-300 hover:rotate-0">
          <img class="w-full h-full object-cover" src="https://picsum.photos/seed/product1/50/50" alt="Product Image">
          <div class="absolute inset-0 bg-gradient-to-br from-amber-400 to-orange-500 opacity-60"></div>
        </div>
        <div class="flex-1">
          <p class="text-stone-800 dark:text-stone-100 font-semibold">Order Delivered!</p>
          <p class="text-sm text-stone-600 dark:text-stone-300 mt-1">Your recent order <span class="font-mono text-xs bg-stone-200 dark:bg-stone-600 px-2 py-1 rounded">#12345</span> has been delivered successfully.</p>
          <span class="text-xs text-stone-500 dark:text-stone-400 mt-2 block">2 hours ago</span>
        </div>
      </div>

      <!-- Notification Item 2 -->
      <div class="p-4 md:p-6 flex items-start space-x-4 animate-fade-in-down animation-delay-200">
        <div class="relative w-12 h-12 rounded-full overflow-hidden shadow-lg transform rotate-3 transition-all duration-300 hover:rotate-0">
          <img class="w-full h-full object-cover" src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar">
          <div class="absolute inset-0 bg-gradient-to-br from-green-400 to-emerald-500 opacity-60"></div>
        </div>
        <div class="flex-1">
          <p class="text-stone-800 dark:text-stone-100 font-semibold">New Message from Seller</p>
          <p class="text-sm text-stone-600 dark:text-stone-300 mt-1">"Thank you for your purchase! Let us know if you have any questions."</p>
          <span class="text-xs text-stone-500 dark:text-stone-400 mt-2 block">1 day ago</span>
        </div>
      </div>

      <!-- Notification Item 3 -->
      <div class="p-4 md:p-6 flex items-start space-x-4 animate-fade-in-down animation-delay-400">
        <div class="relative w-12 h-12 rounded-full overflow-hidden shadow-lg transform -rotate-3 transition-all duration-300 hover:rotate-0">
          <img class="w-full h-full object-cover" src="https://picsum.photos/seed/promotion/50/50" alt="Promotion Icon">
          <div class="absolute inset-0 bg-gradient-to-br from-purple-400 to-indigo-500 opacity-60"></div>
        </div>
        <div class="flex-1">
          <p class="text-stone-800 dark:text-stone-100 font-semibold">Limited Time Offer!</p>
          <p class="text-sm text-stone-600 dark:text-stone-300 mt-1">Get <span class="font-extrabold text-lime-600 dark:text-lime-400">20% off</span> on all natural wood items. Shop now!</p>
          <span class="text-xs text-stone-500 dark:text-stone-400 mt-2 block">3 days ago</span>
        </div>
      </div>

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

<style>
@keyframes fade-in-down {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.animate-fade-in-down {
  animation: fade-in-down 0.5s ease-out forwards;
}
.animation-delay-200 {
  animation-delay: 0.2s;
}
.animation-delay-400 {
  animation-delay: 0.4s;
}
</style>

인포그래픽 구성 요소

레트로/빈티지 디자인, 단색 색 구성표 및 비즈니스 웹사이트를 위한 어두운 테마 지원을 제공하는 반응형 인포그래픽 구성 요소.

열다 미리 보기

                <div class="bg-gray-100 dark:bg-gray-900 min-h-screen p-8">
  <div class="max-w-4xl mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6 relative overflow-hidden">
    
    <!-- Retro/Vintage background elements -->
    <div class="absolute inset-0 z-0 opacity-10 pointer-events-none">
      <div class="w-32 h-32 bg-gray-300 dark:bg-gray-700 rounded-full absolute -top-8 -left-8"></div>
      <div class="w-24 h-24 bg-gray-300 dark:bg-gray-700 rounded-full absolute -bottom-8 -right-8"></div>
      <div class="w-48 h-12 bg-gray-200 dark:bg-gray-700 absolute top-1/4 -left-16 transform -rotate-45"></div>
      <div class="w-48 h-12 bg-gray-200 dark:bg-gray-700 absolute bottom-1/4 -right-16 transform rotate-45"></div>
    </div>

    <div class="relative z-10">
      <h2 class="text-3xl md:text-4xl font-bold text-gray-800 dark:text-gray-100 mb-6 text-center tracking-wide uppercase">
        Our Company Milestones
      </h2>
      
      <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
        
        <!-- Milestone 1 -->
        <div class="flex flex-col items-center text-center p-4 bg-gray-50 dark:bg-gray-700 rounded-md shadow-inner transition-transform duration-300 hover:scale-105">
          <div class="text-5xl text-gray-600 dark:text-gray-300 mb-3 font-mono">1985</div>
          <h3 class="text-xl font-semibold text-gray-700 dark:text-gray-200 mb-2">Founded</h3>
          <p class="text-gray-600 dark:text-gray-300">Started with a vision to innovate the industry.</p>
        </div>

        <!-- Milestone 2 -->
        <div class="flex flex-col items-center text-center p-4 bg-gray-50 dark:bg-gray-700 rounded-md shadow-inner transition-transform duration-300 hover:scale-105">
          <div class="text-5xl text-gray-600 dark:text-gray-300 mb-3 font-mono">2000</div>
          <h3 class="text-xl font-semibold text-gray-700 dark:text-gray-200 mb-2">Global Expansion</h3>
          <p class="text-gray-600 dark:text-gray-300">Expanded our reach to international markets.</p>
        </div>

        <!-- Milestone 3 -->
        <div class="flex flex-col items-center text-center p-4 bg-gray-50 dark:bg-gray-700 rounded-md shadow-inner transition-transform duration-300 hover:scale-105">
          <div class="text-5xl text-gray-600 dark:text-gray-300 mb-3 font-mono">2023</div>
          <h3 class="text-xl font-semibold text-gray-700 dark:text-gray-200 mb-2">Future Ready</h3>
          <p class="text-gray-600 dark:text-gray-300">Embracing new technologies for sustainable growth.</p>
        </div>
      </div>

      <div class="mt-8 text-center">
        <a href="#" class="inline-block bg-gray-700 dark:bg-gray-200 text-white dark:text-gray-900 py-3 px-8 rounded-full font-bold uppercase tracking-wider shadow-md hover:bg-gray-800 dark:hover:bg-gray-300 transition duration-300">
          Learn More About Our Journey
        </a>
      </div>
    </div>
  </div>
</div>

Navigation Enhancement Components 구성 요소

전자 상거래 웹 사이트에 대한 다크 모드를 지원하는 반응형 탐색 구성 요소입니다. 눈의 피로를 줄이기 위해 어두운 배경의 트라이어드 색 구성표가 특징입니다.

열다 미리 보기

                <nav class="bg-gray-900 dark:bg-purple-900 p-4">
  <div class="container mx-auto flex items-center justify-between">
    <a href="#" class="text-white text-lg font-semibold">E-Shop</a>
    <ul class="flex space-x-4">
      <li><a href="#" class="text-gray-300 hover:text-white">Home</a></li>
      <li><a href="#" class="text-gray-300 hover:text-white">Products</a></li>
      <li><a href="#" class="text-gray-300 hover:text-white">Categories</a></li>
      <li><a href="#" class="text-gray-300 hover:text-white">Contact</a></li>
    </ul>
    <div class="flex items-center space-x-4">
      <input type="text" placeholder="Search..." class="bg-gray-800 text-white px-3 py-1 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
      <button class="bg-blue-600 dark:bg-green-600 text-white px-4 py-1 rounded-md">Cart</button>
    </div>
  </div>
</nav>

Community Forum 구성 요소

복잡하고 반응이 빠른 Skeuomorphism이 디자인한 전자 상거래를 위한 커뮤니티 포럼 구성 요소로, 그레이스케일 색 구성표, 어두운 테마 지원 및 JavaScript가 없습니다. Tailwind CSS 및 더미 이미지/아바타를 사용합니다.

열다 미리 보기

                <div class="min-h-screen bg-gray-100 dark:bg-gray-900 text-gray-900 dark:text-gray-100 p-8 font-sans transition-colors duration-300">
  <div class="max-w-7xl mx-auto">
    <!-- Header -->
    <header class="flex items-center justify-between mb-8 p-6 bg-gradient-to-br from-gray-300 to-gray-400 dark:from-gray-700 dark:to-gray-800 rounded-2xl shadow-xl border border-gray-400 dark:border-gray-600 relative overflow-hidden">
      <div class="absolute inset-0 bg-noise opacity-5"></div>
      <h1 class="text-4xl font-extrabold text-gray-800 dark:text-gray-200 text-shadow-md z-10">Community Forum</h1>
      <div class="flex items-center space-x-4 z-10">
        <input type="text" placeholder="Search..." class="px-5 py-3 rounded-full bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-gray-200 border border-gray-300 dark:border-gray-600 shadow-inner focus:outline-none focus:ring-2 focus:ring-gray-500 dark:focus:ring-gray-300 transition-all duration-200 placeholder-gray-500 dark:placeholder-gray-400 w-64">
        <button class="p-3 bg-gray-500 dark:bg-gray-600 rounded-full shadow-lg border border-gray-600 dark:border-gray-500 hover:bg-gray-600 dark:hover:bg-gray-500 transition-all duration-200 group relative overflow-hidden">
          <span class="block w-6 h-6 bg-center bg-no-repeat bg-contain icon-plus group-hover:rotate-90 transition-transform duration-300"></span>
          <div class="absolute inset-0 bg-noise opacity-10"></div>
        </button>
      </div>
    </header>

    <div class="grid grid-cols-1 lg:grid-cols-4 gap-8">
      <!-- Left Sidebar - Categories/Navigation -->
      <aside class="lg:col-span-1 p-6 bg-gradient-to-br from-gray-300 to-gray-400 dark:from-gray-700 dark:to-gray-800 rounded-2xl shadow-xl border border-gray-400 dark:border-gray-600 relative overflow-hidden animate-slide-in-left">
        <div class="absolute inset-0 bg-noise opacity-5"></div>
        <h2 class="text-2xl font-bold mb-6 text-gray-800 dark:text-gray-200 text-shadow-sm z-10">Categories</h2>
        <ul class="space-y-4 z-10">
          <li class="p-4 bg-gray-200 dark:bg-gray-700 rounded-xl shadow-md border border-gray-300 dark:border-gray-600 hover:bg-gray-300 dark:hover:bg-gray-600 transition-all duration-200 cursor-pointer flex items-center space-x-3 group">
            <span class="w-5 h-5 bg-center bg-no-repeat bg-contain icon-shopping-cart group-hover:scale-110 transition-transform duration-200"></span>
            <span class="text-gray-800 dark:text-gray-200 font-medium group-hover:underline">Product Support</span>
          </li>
          <li class="p-4 bg-gray-200 dark:bg-gray-700 rounded-xl shadow-md border border-gray-300 dark:border-gray-600 hover:bg-gray-300 dark:hover:bg-gray-600 transition-all duration-200 cursor-pointer flex items-center space-x-3 group">
            <span class="w-5 h-5 bg-center bg-no-repeat bg-contain icon-shipping group-hover:scale-110 transition-transform duration-200"></span>
            <span class="text-gray-800 dark:text-gray-200 font-medium group-hover:underline">Order & Shipping</span>
          </li>
          <li class="p-4 bg-gray-200 dark:bg-gray-700 rounded-xl shadow-md border border-gray-300 dark:border-gray-600 hover:bg-gray-300 dark:hover:bg-gray-600 transition-all duration-200 cursor-pointer flex items-center space-x-3 group">
            <span class="w-5 h-5 bg-center bg-no-repeat bg-contain icon-returns group-hover:scale-110 transition-transform duration-200"></span>
            <span class="text-gray-800 dark:text-gray-200 font-medium group-hover:underline">Returns & Refunds</span>
          </li>
          <li class="p-4 bg-gray-200 dark:bg-gray-700 rounded-xl shadow-md border border-gray-300 dark:border-gray-600 hover:bg-gray-300 dark:hover:bg-gray-600 transition-all duration-200 cursor-pointer flex items-center space-x-3 group">
            <span class="w-5 h-5 bg-center bg-no-repeat bg-contain icon-faq group-hover:scale-110 transition-transform duration-200"></span>
            <span class="text-gray-800 dark:text-gray-200 font-medium group-hover:underline">General Inquiries</span>
          </li>
        </ul>

        <div class="mt-8">
          <h2 class="text-2xl font-bold mb-6 text-gray-800 dark:text-gray-200 text-shadow-sm z-10">Popular Topics</h2>
          <ul class="space-y-3 z-10">
            <li class="text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100 transition-colors duration-200 cursor-pointer flex items-center space-x-2">
              <span class="w-4 h-4 bg-center bg-no-repeat bg-contain icon-fire"></span>
              <span>Troubleshooting your new gadget</span>
            </li>
            <li class="text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100 transition-colors duration-200 cursor-pointer flex items-center space-x-2">
              <span class="w-4 h-4 bg-center bg-no-repeat bg-contain icon-fire"></span>
              <span>What's the best delivery option?</span>
            </li>
            <li class="text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100 transition-colors duration-200 cursor-pointer flex items-center space-x-2">
              <span class="w-4 h-4 bg-center bg-no-repeat bg-contain icon-fire"></span>
              <span>Extended warranty details</span>
            </li>
          </ul>
        </div>
      </aside>

      <!-- Main Forum Content -->
      <main class="lg:col-span-3 space-y-8">
        <!-- Featured/Pinned Threads -->
        <section class="p-6 bg-gradient-to-br from-gray-300 to-gray-400 dark:from-gray-700 dark:to-gray-800 rounded-2xl shadow-xl border border-gray-400 dark:border-gray-600 relative overflow-hidden animate-fade-in-up">
          <div class="absolute inset-0 bg-noise opacity-5"></div>
          <h2 class="text-2xl font-bold mb-6 text-gray-800 dark:text-gray-200 text-shadow-sm z-10">Featured Discussions</h2>
          <div class="space-y-4 z-10">
            <div class="flex items-center justify-between p-4 bg-gray-200 dark:bg-gray-700 rounded-xl shadow-md border border-gray-300 dark:border-gray-600 hover:bg-gray-300 dark:hover:bg-gray-600 transition-all duration-200 cursor-pointer group">
              <div class="flex items-center space-x-4">
                <span class="w-6 h-6 bg-center bg-no-repeat bg-contain icon-pin transform group-hover:scale-110 transition-transform duration-200"></span>
                <div>
                  <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200 group-hover:underline">Announcement: Holiday Shipping Deadlines 2024</h3>
                  <p class="text-sm text-gray-600 dark:text-gray-400">Posted by Admin on Nov 15, 2024</p>
                </div>
              </div>
              <div class="text-gray-700 dark:text-gray-300 flex items-center space-x-2">
                <span class="w-4 h-4 bg-center bg-no-repeat bg-contain icon-comment"></span>
                <span>120 replies</span>
              </div>
            </div>
            <div class="flex items-center justify-between p-4 bg-gray-200 dark:bg-gray-700 rounded-xl shadow-md border border-gray-300 dark:border-gray-600 hover:bg-gray-300 dark:hover:bg-gray-600 transition-all duration-200 cursor-pointer group">
              <div class="flex items-center space-x-4">
                <span class="w-6 h-6 bg-center bg-no-repeat bg-contain icon-pin transform group-hover:scale-110 transition-transform duration-200"></span>
                <div>
                  <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200 group-hover:underline">New Product Line Q1 2025 Sneak Peek!</h3>
                  <p class="text-sm text-gray-600 dark:text-gray-400">Posted by Marketing Team on Dec 1, 2024</p>
                </div>
              </div>
              <div class="text-gray-700 dark:text-gray-300 flex items-center space-x-2">
                <span class="w-4 h-4 bg-center bg-no-repeat bg-contain icon-comment"></span>
                <span>250 replies</span>
              </div>
            </div>
          </div>
        </section>

        <!-- Recent Threads -->
        <section class="p-6 bg-gradient-to-br from-gray-300 to-gray-400 dark:from-gray-700 dark:to-gray-800 rounded-2xl shadow-xl border border-gray-400 dark:border-gray-600 relative overflow-hidden animate-fade-in-up delay-100">
          <div class="absolute inset-0 bg-noise opacity-5"></div>
          <h2 class="text-2xl font-bold mb-6 text-gray-800 dark:text-gray-200 text-shadow-sm z-10">Recent Activity</h2>
          <div class="space-y-4 z-10">
            <!-- Thread Item 1 -->
            <div class="p-5 bg-gray-200 dark:bg-gray-700 rounded-xl shadow-md border border-gray-300 dark:border-gray-600 hover:bg-gray-300 dark:hover:bg-gray-600 transition-all duration-200 group cursor-pointer flex flex-col sm:flex-row justify-between items-start sm:items-center space-y-4 sm:space-y-0 sm:space-x-4">
              <div class="flex items-start sm:items-center space-x-4">
                <img src="https://randomuser.me/api/portraits/women/68.jpg" alt="User Avatar" class="w-14 h-14 rounded-full border-2 border-gray-500 dark:border-gray-400 shadow-lg object-cover transform group-hover:scale-105 transition-transform duration-200">
                <div>
                  <h3 class="text-xl font-semibold text-gray-800 dark:text-gray-200 group-hover:underline">Issue with my recent order - missing item</h3>
                  <p class="text-sm text-gray-600 dark:text-gray-400">by <span class="font-medium text-gray-700 dark:text-gray-300">JaneDoe</span> in <span class="font-medium text-gray-700 dark:text-gray-300">Order & Shipping</span></p>
                </div>
              </div>
              <div class="flex items-center space-x-4 text-gray-700 dark:text-gray-300">
                <div class="flex items-center space-x-1">
                  <span class="w-5 h-5 bg-center bg-no-repeat bg-contain icon-comment"></span>
                  <span>5 replies</span>
                </div>
                <div class="flex items-center space-x-1">
                  <span class="w-5 h-5 bg-center bg-no-repeat bg-contain icon-views"></span>
                  <span>120 views</span>
                </div>
                <span class="text-sm">2 hours ago</span>
              </div>
            </div>

            <!-- Thread Item 2 -->
            <div class="p-5 bg-gray-200 dark:bg-gray-700 rounded-xl shadow-md border border-gray-300 dark:border-gray-600 hover:bg-gray-300 dark:hover:bg-gray-600 transition-all duration-200 group cursor-pointer flex flex-col sm:flex-row justify-between items-start sm:items-center space-y-4 sm:space-y-0 sm:space-x-4">
              <div class="flex items-start sm:items-center space-x-4">
                <img src="https://randomuser.me/api/portraits/men/44.jpg" alt="User Avatar" class="w-14 h-14 rounded-full border-2 border-gray-500 dark:border-gray-400 shadow-lg object-cover transform group-hover:scale-105 transition-transform duration-200">
                <div>
                  <h3 class="text-xl font-semibold text-gray-800 dark:text-gray-200 group-hover:underline">Question about product compatibility</h3>
                  <p class="text-sm text-gray-600 dark:text-gray-400">by <span class="font-medium text-gray-700 dark:text-gray-300">JohnDoh</span> in <span class="font-medium text-gray-700 dark:text-gray-300">Product Support</span></p>
                </div>
              </div>
              <div class="flex items-center space-x-4 text-gray-700 dark:text-gray-300">
                <div class="flex items-center space-x-1">
                  <span class="w-5 h-5 bg-center bg-no-repeat bg-contain icon-comment"></span>
                  <span>10 replies</span>
                </div>
                <div class="flex items-center space-x-1">
                  <span class="w-5 h-5 bg-center bg-no-repeat bg-contain icon-views"></span>
                  <span>250 views</span>
                </div>
                <span class="text-sm">1 day ago</span>
              </div>
            </div>

            <!-- Thread Item 3 -->
            <div class="p-5 bg-gray-200 dark:bg-gray-700 rounded-xl shadow-md border border-gray-300 dark:border-gray-600 hover:bg-gray-300 dark:hover:bg-gray-600 transition-all duration-200 group cursor-pointer flex flex-col sm:flex-row justify-between items-start sm:items-center space-y-4 sm:space-y-0 sm:space-x-4">
              <div class="flex items-start sm:items-center space-x-4">
                <img src="https://randomuser.me/api/portraits/lego/1.jpg" alt="User Avatar" class="w-14 h-14 rounded-full border-2 border-gray-500 dark:border-gray-400 shadow-lg object-cover transform group-hover:scale-105 transition-transform duration-200">
                <div>
                  <h3 class="text-xl font-semibold text-gray-800 dark:text-gray-200 group-hover:underline">General feedback on website usability</h3>
                  <p class="text-sm text-gray-600 dark:text-gray-400">by <span class="font-medium text-gray-700 dark:text-gray-300">BotUser</span> in <span class="font-medium text-gray-700 dark:text-gray-300">General Inquiries</span></p>
                </div>
              </div>
              <div class="flex items-center space-x-4 text-gray-700 dark:text-gray-300">
                <div class="flex items-center space-x-1">
                  <span class="w-5 h-5 bg-center bg-no-repeat bg-contain icon-comment"></span>
                  <span>2 replies</span>
                </div>
                <div class="flex items-center space-x-1">
                  <span class="w-5 h-5 bg-center bg-no-repeat bg-contain icon-views"></span>
                  <span>50 views</span>
                </div>
                <span class="text-sm">3 days ago</span>
              </div>
            </div>
          </div>

          <!-- Pagination -->
          <div class="mt-8 flex justify-center space-x-4 z-10">
            <button class="px-6 py-3 bg-gray-400 dark:bg-gray-600 text-gray-900 dark:text-gray-100 rounded-full shadow-lg border border-gray-500 dark:border-gray-500 hover:bg-gray-500 dark:hover:bg-gray-500 transition-all duration-200 group relative overflow-hidden">
              <span class="absolute inset-0 bg-noise opacity-10"></span>
              <span class="z-10 relative">Previous</span>
            </button>
            <button class="px-6 py-3 bg-gray-600 dark:bg-gray-500 text-white dark:text-gray-900 rounded-full shadow-lg border border-gray-700 dark:border-gray-400 hover:bg-gray-700 dark:hover:bg-gray-400 transition-all duration-200 group relative overflow-hidden">
              <span class="absolute inset-0 bg-noise opacity-10"></span>
              <span class="z-10 relative">Next</span>
            </button>
          </div>
        </section>
      </main>
    </div>

    <!-- Footer -->
    <footer class="mt-12 p-6 bg-gradient-to-br from-gray-300 to-gray-400 dark:from-gray-700 dark:to-gray-800 rounded-2xl shadow-xl border border-gray-400 dark:border-gray-600 text-center text-gray-700 dark:text-gray-300 relative overflow-hidden animate-fade-in-up delay-200">
      <div class="absolute inset-0 bg-noise opacity-5"></div>
      <p class="z-10 relative">&copy; 2024 E-commerce Community Forum. All rights reserved.</p>
      <div class="flex justify-center space-x-4 mt-4 z-10 relative">
        <a href="#" class="text-gray-700 dark:text-gray-300 hover:underline">Privacy Policy</a>
        <a href="#" class="text-gray-700 dark:text-gray-300 hover:underline">Terms of Service</a>
      </div>
    </footer>
  </div>
</div>

<style>
  /* Base styles for Skeuomorphism - mimic physical depth */
  .shadow-md { box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.08); }
  .shadow-lg { box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1), 0 4px 6px rgba(0, 0, 0, 0.05); }
  .shadow-xl { box-shadow: 0 20px 25px rgba(0, 0, 0, 0.1), 0 8px 10px rgba(0, 0, 0, 0.04); }
  .shadow-inner { box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.06); }
  .text-shadow-md { text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2); }
  .text-shadow-sm { text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1); }

  /* Custom noise background for texture */
  .bg-noise {
    background-image: url('data:image/svg+xml;base64,PHN2ZyB2aWR0aD0iNDAiIGhlaWdodD0iNDAiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICA8ZmlsdGVyIGlkPSJub2lzZSIgeD1

제품 그리드, 장바구니 요약 및 어두운 테마 지원을 갖춘 반응형 전자 상거래 컨테이너 구성 요소로, 머티리얼 디자인 원칙과 어스 톤 색 구성표를 사용하여 설계되었습니다. 이미지, 제목, 가격, "장바구니에 추가" 버튼이 있는 제품 카드, 추가된 항목으로 업데이트되는 끈적한 장바구니 요약을 포함한 여러 대화형 요소가 있습니다. 레이아웃은 다양한 화면 크기에 맞게 조정되며 모든 요소에는 Tailwind CSS dark: 접두사로 정의된 어두운 모드 스타일이 있습니다.

열다 미리 보기

                <div class="min-h-screen bg-gray-100 dark:bg-gray-900 p-4 md:p-8 font-sans">

  <!-- Sticky Shopping Cart Summary -->
  <div class="sticky top-4 lg:top-8 bg-white dark:bg-gray-800 rounded-lg shadow-lg p-4 mb-8 z-10 border border-gray-200 dark:border-gray-700">
    <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-100 mb-4">Your Cart</h2>
    <div class="flex justify-between items-center text-gray-700 dark:text-gray-300">
      <p class="text-sm">Items: <span class="font-medium">3</span></p>
      <p class="text-sm">Total: <span class="font-medium">$250.00</span></p>
    </div>
    <button class="mt-4 w-full bg-orange-700 hover:bg-orange-800 text-white font-bold py-2 px-4 rounded-md shadow-md transition duration-300 ease-in-out">Checkout</button>
  </div>

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

    <!-- Product Card 1 -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden transform transition duration-300 hover:scale-105 border border-gray-200 dark:border-gray-700">
      <img class="w-full h-48 object-cover" src="https://picsum.photos/seed/product1/600/400" alt="Product Image">
      <div class="p-4">
        <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-100 mb-2">Earthen Vase</h3>
        <p class="text-gray-600 dark:text-gray-400 text-sm mb-3">Handcrafted ceramic vase with a rustic finish, perfect for any home decor.</p>
        <div class="flex justify-between items-center mb-4">
          <span class="text-xl font-bold text-gray-900 dark:text-gray-50">$45.00</span>
          <span class="text-sm text-gray-500 dark:text-gray-400 line-through">$60.00</span>
        </div>
        <button class="w-full bg-green-700 hover:bg-green-800 text-white font-bold py-2 px-4 rounded-md shadow-md transition duration-300 ease-in-out">Add to Cart</button>
      </div>
    </div>

    <!-- Product Card 2 -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden transform transition duration-300 hover:scale-105 border border-gray-200 dark:border-gray-700">
      <img class="w-full h-48 object-cover" src="https://picsum.photos/seed/product2/600/400" alt="Product Image">
      <div class="p-4">
        <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-100 mb-2">Terracotta Planter</h3>
        <p class="text-gray-600 dark:text-gray-400 text-sm mb-3">Classic terracotta planter, ideal for indoor and outdoor plants.</p>
        <div class="flex justify-between items-center mb-4">
          <span class="text-xl font-bold text-gray-900 dark:text-gray-50">$25.00</span>
        </div>
        <button class="w-full bg-green-700 hover:bg-green-800 text-white font-bold py-2 px-4 rounded-md shadow-md transition duration-300 ease-in-out">Add to Cart</button>
      </div>
    </div>

    <!-- Product Card 3 -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden transform transition duration-300 hover:scale-105 border border-gray-200 dark:border-gray-700">
      <img class="w-full h-48 object-cover" src="https://picsum.photos/seed/product3/600/400" alt="Product Image">
      <div class="p-4">
        <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-100 mb-2">Woodland Sculpture</h3>
        <p class="text-gray-600 dark:text-gray-400 text-sm mb-3">Artisan-crafted wooden sculpture, bringing nature indoors.</p>
        <div class="flex justify-between items-center mb-4">
          <span class="text-xl font-bold text-gray-900 dark:text-gray-50">$120.00</span>
          <span class="text-sm text-gray-500 dark:text-gray-400 line-through">$150.00</span>
        </div>
        <button class="w-full bg-green-700 hover:bg-green-800 text-white font-bold py-2 px-4 rounded-md shadow-md transition duration-300 ease-in-out">Add to Cart</button>
      </div>
    </div>

    <!-- Product Card 4 -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden transform transition duration-300 hover:scale-105 border border-gray-200 dark:border-gray-700">
      <img class="w-full h-48 object-cover" src="https://picsum.photos/seed/product4/600/400" alt="Product Image">
      <div class="p-4">
        <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-100 mb-2">Organic Cotton Towel</h3>
        <p class="text-gray-600 dark:text-gray-400 text-sm mb-3">Soft and absorbent towel made from sustainably sourced organic cotton.</p>
        <div class="flex justify-between items-center mb-4">
          <span class="text-xl font-bold text-gray-900 dark:text-gray-50">$30.00</span>
        </div>
        <button class="w-full bg-green-700 hover:bg-green-800 text-white font-bold py-2 px-4 rounded-md shadow-md transition duration-300 ease-in-out">Add to Cart</button>
      </div>
    </div>

    <!-- Product Card 5 -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden transform transition duration-300 hover:scale-105 border border-gray-200 dark:border-gray-700">
      <img class="w-full h-48 object-cover" src="https://picsum.photos/seed/product5/600/400" alt="Product Image">
      <div class="p-4">
        <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-100 mb-2">Amber Glass Bottle Set</h3>
        <p class="text-gray-600 dark:text-gray-400 text-sm mb-3">Set of three reusable amber glass bottles with sleek dispensers.</p>
        <div class="flex justify-between items-center mb-4">
          <span class="text-xl font-bold text-gray-900 dark:text-gray-50">$35.00</span>
        </div>
        <button class="w-full bg-green-700 hover:bg-green-800 text-white font-bold py-2 px-4 rounded-md shadow-md transition duration-300 ease-in-out">Add to Cart</button>
      </div>
    </div>

    <!-- Product Card 6 -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden transform transition duration-300 hover:scale-105 border border-gray-200 dark:border-gray-700">
      <img class="w-full h-48 object-cover" src="https://picsum.photos/seed/product6/600/400" alt="Product Image">
      <div class="p-4">
        <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-100 mb-2">Hemp Fabric Basket</h3>
        <p class="text-gray-600 dark:text-gray-400 text-sm mb-3">Eco-friendly storage basket made from durable hemp fabric.</p>
        <div class="flex justify-between items-center mb-4">
          <span class="text-xl font-bold text-gray-900 dark:text-gray-50">$50.00</span>
          <span class="text-sm text-gray-500 dark:text-gray-400 line-through">$70.00</span>
        </div>
        <button class="w-full bg-green-700 hover:bg-green-800 text-white font-bold py-2 px-4 rounded-md shadow-md transition duration-300 ease-in-out">Add to Cart</button>
      </div>
    </div>

  </div>
</div>

소셜 구성 요소 구성 요소

3D 디자인 요소, 흙색 및 다크 모드를 지원하는 간단하고 반응이 빠른 소셜 미디어 카드입니다.

열다 미리 보기

                
<div class="p-4 bg-gray-100 dark:bg-gray-800 min-h-screen flex items-center justify-center">
  <div class="relative w-full max-w-sm rounded-lg shadow-xl bg-gradient-to-br from-stone-200 to-stone-300 dark:from-stone-700 dark:to-stone-900 overflow-hidden transform transition-all duration-300 hover:scale-105">
    <!-- Subtle 3D effect layers -->
    <div class="absolute inset-0 bg-gradient-to-br from-white/20 to-transparent dark:from-black/20 dark:to-transparent opacity-50"></div>
    <div class="absolute inset-0 border-t border-l border-white/30 dark:border-black/30 transform skew-y-2 translate-x-2 translate-y-2 opacity-20"></div>

    <div class="relative p-6">
      <div class="flex items-center space-x-4 mb-4">
        <img class="w-12 h-12 rounded-full ring-2 ring-stone-400 dark:ring-stone-600 object-cover" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
        <div>
          <p class="text-lg font-semibold text-stone-800 dark:text-stone-200">John Doe</p>
          <p class="text-sm text-stone-600 dark:text-stone-400">@johndoe</p>
        </div>
      </div>

      <p class="text-stone-700 dark:text-stone-300 mb-4">
        Exploring the beauty of nature. Every moment is an adventure! #nature #travel #earthtones
      </p>

      <img class="w-full h-48 object-cover rounded-md mb-4 shadow-md transform translate-y-1 tranlsate-x-1" src="https://picsum.photos/600/400?random=1" alt="Post Image">

      <div class="flex justify-between items-center text-stone-600 dark:text-stone-400 text-sm">
        <div class="flex items-center space-x-2">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
            <path fill-rule="evenodd" d="M3.172 5.172a4 4 0 015.656 0L10 6.343l1.172-1.171a4 4 0 115.656 5.656L10 17.657l-6.828-6.829a4 4 0 010-5.656z" clip-rule="evenodd" />
          </svg>
          <span>1.2K Likes</span>
        </div>
        <div class="flex items-center space-x-2">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
            <path fill-rule="evenodd" d="M18 13.5V0H2v13.5A2.5 2.5 0 004.5 16h11A2.5 2.5 0 0018 13.5zM12 4H8v4h4V4z" clip-rule="evenodd" />
             <path d="M5 16h10c.828 0 1.5.672 1.5 1.5s-.672 1.5-1.5 1.5H5c-.828 0-1.5-.672-1.5-1.5S4.172 16 5 16z" />
             </svg>
          <span>245 Comments</span>
        </div>
      </div>
    </div>
  </div>
</div>

Badges 구성 요소

어두운 모드를 지원하는 간단하고 반응이 빠른 배지 구성 요소로, 포트폴리오에 적합한 트라이어딕 색 구성표를 사용합니다.

열다 미리 보기

                <div class="dark:bg-gray-900 min-h-screen p-8">
  <div class="max-w-md mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-md p-6">
    <h2 class="text-2xl font-bold mb-4 text-gray-800 dark:text-white">My Skills</h2>
    <div class="flex flex-wrap gap-2">
      <span class="px-3 py-1 rounded-full text-sm font-semibold bg-blue-200 text-blue-800 dark:bg-blue-700 dark:text-blue-100">HTML</span>
      <span class="px-3 py-1 rounded-full text-sm font-semibold bg-red-200 text-red-800 dark:bg-red-700 dark:text-red-100">CSS</span>
      <span class="px-3 py-1 rounded-full text-sm font-semibold bg-green-200 text-green-800 dark:bg-green-700 dark:text-green-100">Tailwind CSS</span>
      <span class="px-3 py-1 rounded-full text-sm font-semibold bg-yellow-200 text-yellow-800 dark:bg-yellow-700 dark:text-yellow-100">JavaScript</span>
      <span class="px-3 py-1 rounded-full text-sm font-semibold bg-purple-200 text-purple-800 dark:bg-purple-700 dark:text-purple-100">React</span>
      <span class="px-3 py-1 rounded-full text-sm font-semibold bg-pink-200 text-pink-800 dark:bg-pink-700 dark:text-pink-100">Python</span>
    </div>
  </div>
</div>

1 ... 134 135 136 137 138 ... 335

검색 구성 요소

카테고리

모든 구성 요소

Content Display Components 컴포넌트

Feedback Components 구성 요소

Neumorphism Earth Tone 드롭다운 메뉴

Notifications 구성 요소

인포그래픽 구성 요소

Navigation Enhancement Components 구성 요소

Community Forum 구성 요소

머티리얼 디자인 전자 상거래 컨테이너

소셜 구성 요소 구성 요소

Badges 구성 요소