모든 구성 요소

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

Content Display 구성 요소

3D 스타일의 콘텐츠 디스플레이 구성 요소로, 포트폴리오 작업 또는 제품을 회색 음영 색 구성표와 반응형 디자인으로 보여주며, 다크 모드 지원을 포함합니다.

                <div class="max-w-4xl mx-auto p-6">
    <h2 class="text-3xl font-bold mb-6 text-gray-900 dark:text-white">Portfolio Showcase</h2>
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        <div class="bg-white dark:bg-gray-800 shadow-lg rounded-lg overflow-hidden transform hover:scale-105 transition-all duration-300">
            <img class="w-full h-48 object-cover" src="https://picsum.photos/300/200?random=1" alt="Portfolio Item" />
            <div class="p-4">
                <h3 class="text-xl font-semibold text-gray-900 dark:text-white">Project Title 1</h3>
                <p class="text-gray-700 dark:text-gray-300 mt-2">Description of the project showcasing skills and features.</p>
            </div>
        </div>
        <div class="bg-white dark:bg-gray-800 shadow-lg rounded-lg overflow-hidden transform hover:scale-105 transition-all duration-300">
            <img class="w-full h-48 object-cover" src="https://picsum.photos/300/200?random=2" alt="Portfolio Item" />
            <div class="p-4">
                <h3 class="text-xl font-semibold text-gray-900 dark:text-white">Project Title 2</h3>
                <p class="text-gray-700 dark:text-gray-300 mt-2">Description of the project showcasing skills and features.</p>
            </div>
        </div>
        <div class="bg-white dark:bg-gray-800 shadow-lg rounded-lg overflow-hidden transform hover:scale-105 transition-all duration-300">
            <img class="w-full h-48 object-cover" src="https://picsum.photos/300/200?random=3" alt="Portfolio Item" />
            <div class="p-4">
                <h3 class="text-xl font-semibold text-gray-900 dark:text-white">Project Title 3</h3>
                <p class="text-gray-700 dark:text-gray-300 mt-2">Description of the project showcasing skills and features.</p>
            </div>
        </div>
        <div class="bg-white dark:bg-gray-800 shadow-lg rounded-lg overflow-hidden transform hover:scale-105 transition-all duration-300">
            <img class="w-full h-48 object-cover" src="https://picsum.photos/300/200?random=4" alt="Portfolio Item" />
            <div class="p-4">
                <h3 class="text-xl font-semibold text-gray-900 dark:text-white">Project Title 4</h3>
                <p class="text-gray-700 dark:text-gray-300 mt-2">Description of the project showcasing skills and features.</p>
            </div>
        </div>
        <div class="bg-white dark:bg-gray-800 shadow-lg rounded-lg overflow-hidden transform hover:scale-105 transition-all duration-300">
            <img class="w-full h-48 object-cover" src="https://picsum.photos/300/200?random=5" alt="Portfolio Item" />
            <div class="p-4">
                <h3 class="text-xl font-semibold text-gray-900 dark:text-white">Project Title 5</h3>
                <p class="text-gray-700 dark:text-gray-300 mt-2">Description of the project showcasing skills and features.</p>
            </div>
        </div>
        <div class="bg-white dark:bg-gray-800 shadow-lg rounded-lg overflow-hidden transform hover:scale-105 transition-all duration-300">
            <img class="w-full h-48 object-cover" src="https://picsum.photos/300/200?random=6" alt="Portfolio Item" />
            <div class="p-4">
                <h3 class="text-xl font-semibold text-gray-900 dark:text-white">Project Title 6</h3>
                <p class="text-gray-700 dark:text-gray-300 mt-2">Description of the project showcasing skills and features.</p>
            </div>
        </div>
    </div>
</div>

스큐어모픽 햄버거 메뉴

반응형 햄버거 메뉴 구성 요소는 전자 상거래 사이트를 위한 스큐어모픽 요소, 생생한 색상 및 어두운 테마 지원으로 설계되었습니다.

열다 미리 보기

                <div class="flex items-center justify-between p-4 bg-blue-500 dark:bg-blue-800 rounded-lg shadow-lg">
    <div class="flex items-center space-x-2">
        <img src="https://picsum.photos/30" alt="Logo" class="h-8 w-8 rounded-full border-2 border-white">
        <h1 class="text-white text-lg font-bold">ShopEasy</h1>
    </div>
    <button class="text-white focus:outline-none">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-7 6h7" />
        </svg>
    </button>
</div>

<div class="hidden md:flex flex-col bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6 mt-2">
    <a href="#" class="flex items-center py-2 text-blue-600 dark:text-blue-400 hover:bg-blue-100 dark:hover:bg-blue-700 rounded-lg transition">Home</a>
    <a href="#" class="flex items-center py-2 text-blue-600 dark:text-blue-400 hover:bg-blue-100 dark:hover:bg-blue-700 rounded-lg transition">Shop</a>
    <a href="#" class="flex items-center py-2 text-blue-600 dark:text-blue-400 hover:bg-blue-100 dark:hover:bg-blue-700 rounded-lg transition">About Us</a>
    <a href="#" class="flex items-center py-2 text-blue-600 dark:text-blue-400 hover:bg-blue-100 dark:hover:bg-blue-700 rounded-lg transition">Contact</a>
    <a href="#" class="flex items-center py-2 text-blue-600 dark:text-blue-400 hover:bg-blue-100 dark:hover:bg-blue-700 rounded-lg transition">Cart</a>
</div>

<div class="md:hidden">
    <div class="flex flex-col bg-white dark:bg-gray-800 rounded-lg shadow-lg p-4 mt-2 space-y-2">
        <a href="#" class="flex items-center px-4 py-2 text-blue-600 dark:text-blue-400 hover:bg-blue-100 dark:hover:bg-blue-700 rounded-lg transition">Home</a>
        <a href="#" class="flex items-center px-4 py-2 text-blue-600 dark:text-blue-400 hover:bg-blue-100 dark:hover:bg-blue-700 rounded-lg transition">Shop</a>
        <a href="#" class="flex items-center px-4 py-2 text-blue-600 dark:text-blue-400 hover:bg-blue-100 dark:hover:bg-blue-700 rounded-lg transition">About Us</a>
        <a href="#" class="flex items-center px-4 py-2 text-blue-600 dark:text-blue-400 hover:bg-blue-100 dark:hover:bg-blue-700 rounded-lg transition">Contact</a>
        <a href="#" class="flex items-center px-4 py-2 text-blue-600 dark:text-blue-400 hover:bg-blue-100 dark:hover:bg-blue-700 rounded-lg transition">Cart</a>
    </div>
</div>

Interactive Components 구성 요소

Material Design, Triadic 색 구성표, 복잡한 복잡성, 전자 상거래, 반응형 디자인 및 어두운 테마 지원을 제공하는 Interactive Components 구성 요소.

열다 미리 보기

                <div class="bg-gray-100 dark:bg-gray-900 p-4">
  <div class="container mx-auto">
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
      <!-- Product Card -->
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
        <img src="https://picsum.photos/seed/product1/400/300" alt="Product Image" class="w-full h-48 object-cover">
        <div class="p-4">
          <h3 class="text-lg font-semibold text-gray-800 dark:text-white">Product Title 1</h3>
          <p class="text-gray-600 dark:text-gray-300 mt-2">Short product description goes here. It can span a couple of lines.</p>
          <div class="flex items-center justify-between mt-4">
            <span class="text-xl font-bold text-blue-600 dark:text-blue-400">$199.99</span>
            <button class="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700 dark:bg-blue-400 dark:hover:bg-blue-500">Add to Cart</button>
          </div>
        </div>
      </div>

      <!-- Product Card -->
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
        <img src="https://picsum.photos/seed/product2/400/300" alt="Product Image" class="w-full h-48 object-cover">
        <div class="p-4">
          <h3 class="text-lg font-semibold text-gray-800 dark:text-white">Product Title 2</h3>
          <p class="text-gray-600 dark:text-gray-300 mt-2">Another short product description for variety and demonstration.</p>
          <div class="flex items-center justify-between mt-4">
            <span class="text-xl font-bold text-red-600 dark:text-red-400">$249.50</span>
            <button class="px-4 py-2 bg-red-600 text-white rounded hover:bg-red-700 dark:bg-red-400 dark:hover:bg-red-500">Add to Cart</button>
          </div>
        </div>
      </div>
      
       <!-- Product Card -->
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
        <img src="https://picsum.photos/seed/product3/400/300" alt="Product Image" class="w-full h-48 object-cover">
        <div class="p-4">
          <h3 class="text-lg font-semibold text-gray-800 dark:text-white">Product Title 3</h3>
          <p class="text-gray-600 dark:text-gray-300 mt-2">Yet another product description to fill the card space.</p>
          <div class="flex items-center justify-between mt-4">
            <span class="text-xl font-bold text-green-600 dark:text-green-400">$145.00</span>
            <button class="px-4 py-2 bg-green-600 text-white rounded hover:bg-green-700 dark:bg-green-400 dark:hover:bg-green-500">Add to Cart</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Activity Feed 구성 요소

전자 상거래를 위한 미니멀리스트/플랫 디자인 활동 피드, 단색, 단순, 반응형, 어두운 테마

열다 미리 보기

                <div class="bg-white dark:bg-gray-800 p-4 rounded-lg shadow-md">
  <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-4">Activity Feed</h3>
  <ul class="divide-y divide-gray-200 dark:divide-gray-700">
    <li class="py-3 flex items-center justify-between">
      <div class="flex items-center">
        <img class="h-8 w-8 rounded-full object-cover mr-3" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
        <p class="text-sm text-gray-600 dark:text-gray-300">
          <span class="font-medium text-gray-900 dark:text-white">John Doe</span> placed an order.
        </p>
      </div>
      <span class="text-xs text-gray-400 dark:text-gray-500">2 hours ago</span>
    </li>
    <li class="py-3 flex items-center justify-between">
      <div class="flex items-center">
        <img class="h-8 w-8 rounded-full object-cover mr-3" src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar">
        <p class="text-sm text-gray-600 dark:text-gray-300">
          <span class="font-medium text-gray-900 dark:text-white">Jane Smith</span> reviewed a product.
        </p>
      </div>
      <span class="text-xs text-gray-400 dark:text-gray-500">5 hours ago</span>
    </li>
    <li class="py-3 flex items-center justify-between">
      <div class="flex items-center">
        <img class="h-8 w-8 rounded-full object-cover mr-3" src="https://randomuser.me/api/portraits/men/55.jpg" alt="User Avatar">
        <p class="text-sm text-gray-600 dark:text-gray-300">
          <span class="font-medium text-gray-900 dark:text-white">Robert Brown</span> added item to cart.
        </p>
      </div>
      <span class="text-xs text-gray-400 dark:text-gray-500">10 hours ago</span>
    </li>
  </ul>
</div>

소셜 구성 요소 구성 요소

레트로/빈티지 소셜 컴포넌트 단색 구성표 및 단순한 복잡성을 가진 구성 요소, 블로그/콘텐츠용으로 설계되었으며 어두운 테마를 지원합니다.

열다 미리 보기

                ```html
<div class="container mx-auto p-4 dark:bg-gray-800 bg-gray-200">
  <div class="max-w-sm rounded overflow-hidden shadow-lg mx-auto dark:bg-gray-700 bg-white">
    <div class="px-6 py-4">
      <div class="font-bold text-xl mb-2 dark:text-white text-gray-800">Social Post</div>
      <p class="dark:text-gray-300 text-gray-700 text-base">
        This is a simple social media component card, designed with a retro feel and monochromatic colors, suitable for a blog or content site.
      </p>
    </div>
    <div class="px-6 pt-4 pb-2">
      <span class="inline-block bg-gray-300 dark:bg-gray-600 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 dark:text-gray-300 mr-2 mb-2">#retro</span>
      <span class="inline-block bg-gray-300 dark:bg-gray-600 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 dark:text-gray-300 mr-2 mb-2">#monochromatic</span>
      <span class="inline-block bg-gray-300 dark:bg-gray-600 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 dark:text-gray-300 mb-2">#blog</span>
    </div>
    <div class="flex items-center px-6 py-4">
      <img class="w-10 h-10 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar of Jonathan Reinink">
      <div class="text-sm">
        <p class="text-gray-900 dark:text-white leading-none">Jonathan Reinink</p>
        <p class="text-gray-600 dark:text-gray-400">Aug 14, 1988</p>
      </div>
    </div>
  </div>
</div>
```

OAuth 버튼 구성 요소

glassmorphism 및 어스 톤으로 스타일링된 OAuth 버튼을 위한 복잡한 웹 구성 요소로, 응답성 및 다크 모드를 지원하는 비즈니스/기업 웹사이트용으로 설계되었습니다.

열다 미리 보기

                <div class="flex flex-col items-center justify-center min-h-screen bg-gray-800 dark:bg-gray-900 p-6">
  <div class="bg-white dark:bg-gray-700 rounded-lg shadow-lg backdrop-blur-md border border-opacity-10 border-gray-300 dark:border-gray-600 p-8 max-w-md w-full">
    <h2 class="text-2xl font-bold text-gray-800 dark:text-gray-200 mb-6 text-center">Sign in with</h2>
    <div class="flex flex-col space-y-4">
      <a href="#" class="flex items-center justify-between bg-green-500 dark:bg-green-600 text-white rounded-lg py-3 px-4 shadow-md border border-transparent hover:bg-green-600 dark:hover:bg-green-500 transition duration-200 ease-in-out">
        <img class="w-8 h-8 rounded-full mr-2" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Google Avatar" />
        <span>Google</span>
        <svg class="w-6 h-6 text-white ml-auto" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 12c0 1.104-.896 2-2 2s-2-.896-2-2 2-2 2-2 2 .896 2 2zm0 0c0 1.104 2 2 2 2s2-2 2-2-2-2-2-2-2 0-2 2zm0 0c0-1.104-1.896-2-2-2s-2 .896-2 2 2 2 2 2 1 0 2-2z" />
        </svg>
      </a>
      <a href="#" class="flex items-center justify-between bg-blue-600 dark:bg-blue-700 text-white rounded-lg py-3 px-4 shadow-md border border-transparent hover:bg-blue-700 dark:hover:bg-blue-600 transition duration-200 ease-in-out">
        <img class="w-8 h-8 rounded-full mr-2" src="https://randomuser.me/api/portraits/women/1.jpg" alt="Facebook Avatar" />
        <span>Facebook</span>
        <svg class="w-6 h-6 text-white ml-auto" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18 2a2 2 0 00-2 2v2H9a2 2 0 00-2 2v6a2 2 0 002 2h7v8h2V14h3.586l.414-2H16V6a1 1 0 011-1h1a2 2 0 002-2z" />
        </svg>
      </a>
      <a href="#" class="flex items-center justify-between bg-red-600 dark:bg-red-700 text-white rounded-lg py-3 px-4 shadow-md border border-transparent hover:bg-red-700 dark:hover:bg-red-600 transition duration-200 ease-in-out">
        <img class="w-8 h-8 rounded-full mr-2" src="https://picsum.photos/200/200?random=3" alt="Twitter Avatar" />
        <span>Twitter</span>
        <svg class="w-6 h-6 text-white ml-auto" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 19s-1 0-1-1 1-2 2-1 2-1 3 0 1 2-1 2-1-1-1-1zm1-1s2-1 3-2-3-9-1-7 5 6-1 5zm11-6s1-2-2-3-2 4-3 3 1 3 2 3 2-1 2-1 2 1 2-2z" />
        </svg>
      </a>
    </div>
  </div>
</div>

User Mentions 구성 요소

User Mentions 컴포넌트는 블러 효과가 있는 젖빛 유리와 같은 반투명 요소를 특징으로 하는 Glassmorphism 스타일로 디자인되었습니다. 여기에는 어두운 테마 지원이 포함되어 있으며 반응형이므로 전자 상거래 웹 사이트에 적합합니다.

열다 미리 보기

                <div class="flex flex-col items-center justify-center min-h-screen p-4 bg-gradient-to-b from-gray-800 to-gray-900">
    <div class="w-full max-w-md p-6 bg-white dark:bg-gray-800 rounded-lg shadow-lg backdrop-filter backdrop-blur-md bg-opacity-30 dark:bg-opacity-30">
        <h2 class="text-xl font-semibold text-gray-800 dark:text-white">User Mentions</h2>
        <div class="mt-4 space-y-4">
            <div class="flex items-center p-4 bg-white dark:bg-gray-700 rounded-lg shadow-sm hover:shadow-md transition-shadow">
                <img src="https://randomuser.me/api/portraits/men/11.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-2 border-blue-500">
                <div class="ml-3">
                    <p class="text-gray-800 dark:text-white font-medium">John Doe</p>
                    <p class="text-gray-600 dark:text-gray-300 text-sm">@john_doe</p>
                </div>
                <img src="https://picsum.photos/200/100" alt="Product Image" class="ml-auto rounded-lg shadow-lg w-16 h-16">
            </div>
            <div class="flex items-center p-4 bg-white dark:bg-gray-700 rounded-lg shadow-sm hover:shadow-md transition-shadow">
                <img src="https://randomuser.me/api/portraits/women/12.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-2 border-green-500">
                <div class="ml-3">
                    <p class="text-gray-800 dark:text-white font-medium">Jane Smith</p>
                    <p class="text-gray-600 dark:text-gray-300 text-sm">@jane_smith</p>
                </div>
                <img src="https://picsum.photos/200/101" alt="Product Image" class="ml-auto rounded-lg shadow-lg w-16 h-16">
            </div>
            <div class="flex items-center p-4 bg-white dark:bg-gray-700 rounded-lg shadow-sm hover:shadow-md transition-shadow">
                <img src="https://randomuser.me/api/portraits/men/13.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-2 border-red-500">
                <div class="ml-3">
                    <p class="text-gray-800 dark:text-white font-medium">Mike Johnson</p>
                    <p class="text-gray-600 dark:text-gray-300 text-sm">@mike_johnson</p>
                </div>
                <img src="https://picsum.photos/200/102" alt="Product Image" class="ml-auto rounded-lg shadow-lg w-16 h-16">
            </div>
        </div>
        <button class="mt-6 bg-blue-500 hover:bg-blue-600 dark:bg-blue-700 dark:hover:bg-blue-600 text-white font-semibold py-2 px-4 rounded-lg transition duration-300 w-full">View More</button>
    </div>
</div>

Navigation Enhancement 구성 요소

glassmorphism에서 영감을 받은 탐색 구성 요소는 어스 톤과 다크 모드를 지원하는 포트폴리오 작업 및 제품을 보여주기 위해 설계되었습니다. 이 구성 요소는 젖빛 유리 효과, 반응형 디자인 및 최소한의 요소를 특징으로 합니다.

열다 미리 보기

                <nav class="bg-white bg-opacity-30 dark:bg-gray-800 backdrop-blur-lg border-b border-gray-300 dark:border-gray-700 rounded-lg p-4 shadow-lg">
  <div class="container mx-auto flex justify-between items-center">
    <div class="flex items-center">
      <img src="https://picsum.photos/40" alt="Logo" class="rounded-full mr-2">
      <span class="text-xl font-semibold text-gray-900 dark:text-gray-100">Portfolio</span>
    </div>
    <ul class="flex space-x-4">
      <li><a href="#" class="text-gray-700 dark:text-gray-200 hover:text-gray-900 dark:hover:text-gray-300">Home</a></li>
      <li><a href="#" class="text-gray-700 dark:text-gray-200 hover:text-gray-900 dark:hover:text-gray-300">Gallery</a></li>
      <li><a href="#" class="text-gray-700 dark:text-gray-200 hover:text-gray-900 dark:hover:text-gray-300">About</a></li>
      <li><a href="#" class="text-gray-700 dark:text-gray-200 hover:text-gray-900 dark:hover:text-gray-300">Contact</a></li>
    </ul>
  </div>
</nav>

<section class="p-8 bg-gray-50 dark:bg-gray-900">
  <h2 class="text-2xl font-bold mb-4 text-gray-800 dark:text-gray-200">My Work</h2>
  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
    <div class="bg-white bg-opacity-30 dark:bg-gray-800 backdrop-blur-lg rounded-lg overflow-hidden shadow-lg">
      <img src="https://picsum.photos/400/300" alt="Project Image" class="w-full h-48 object-cover">
      <div class="p-4">
        <h3 class="text-lg font-semibold text-gray-900 dark:text-gray-100">Project Title</h3>
        <p class="text-gray-700 dark:text-gray-300">Brief description of the project goes here. Showcasing work effectively.</p>
      </div>
    </div>
    <!-- Repeat similar divs for more projects -->
  </div>
</section>

Community Forum 구성 요소

파스텔 색상 구성표, 머티리얼 디자인 영향 및 다크 모드 지원이 있는 간단한 커뮤니티 포럼 구성 요소입니다. 블로그/콘텐츠 소비를 위한 반응형 레이아웃을 제공합니다.

열다 미리 보기

                <div class="container mx-auto p-4 md:p-8 font-sans"><div class="grid grid-cols-1 md:grid-cols-3 gap-6"><div class="md:col-span-2"><div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6 mb-6"><h2 class="text-xl font-bold text-gray-800 dark:text-white mb-4">Community Discussions</h2><div class="space-y-4"><div class="flex items-center border-b border-gray-200 dark:border-gray-700 pb-4"><img class="w-10 h-10 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar"><div class="flex-1"><h3 class="text-lg font-semibold text-gray-700 dark:text-gray-200">How to use Tailwind CSS?</h3><p class="text-gray-500 dark:text-gray-400 text-sm">Posted by John Doe <span>&#8226;</span> 2 hours ago</p></div><span class="text-gray-600 dark:text-gray-400 text-sm">15 Replies</span></div><div class="flex items-center border-b border-gray-200 dark:border-gray-700 pb-4"><img class="w-10 h-10 rounded-full mr-4" src="https://randomuser.me/api/portraits/women/44.jpg" alt="Avatar"><div class="flex-1"><h3 class="text-lg font-semibold text-gray-700 dark:text-gray-200">Best practices for responsive design?</h3><p class="text-gray-500 dark:text-gray-400 text-sm">Posted by Jane Smith <span>&#8226;</span> 5 hours ago</p></div><span class="text-gray-600 dark:text-gray-400 text-sm">22 Replies</span></div><div class="flex items-center pb-4"><img class="w-10 h-10 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/19.jpg" alt="Avatar"><div class="flex-1"><h3 class="text-lg font-semibold text-gray-700 dark:text-gray-200">Integrating dark mode with Tailwind</h3><p class="text-gray-500 dark:text-gray-400 text-sm">Posted by Peter Jones <span>&#8226;</span> 1 day ago</p></div><span class="text-gray-600 dark:text-gray-400 text-sm">8 Replies</span></div></div></div></div><div class="md:col-span-1"><div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6"><h2 class="text-xl font-bold text-gray-800 dark:text-white mb-4">Popular Tags</h2><div class="flex flex-wrap gap-2"><span class="px-3 py-1 bg-blue-200 dark:bg-blue-700 text-blue-800 dark:text-blue-200 text-sm font-semibold rounded-full">Tailwind CSS</span><span class="px-3 py-1 bg-green-200 dark:bg-green-700 text-green-800 dark:text-green-200 text-sm font-semibold rounded-full">Responsive Design</span><span class="px-3 py-1 bg-yellow-200 dark:bg-yellow-700 text-yellow-800 dark:text-yellow-200 text-sm font-semibold rounded-full">Dark Mode</span><span class="px-3 py-1 bg-purple-200 dark:bg-purple-700 text-purple-800 dark:text-purple-200 text-sm font-semibold rounded-full">Web Development</span></div></div></div></div></div>

그레이스케일 로딩 스피너

회색조 색상과 마이크로 상호 작용 초점이 있는 간단한 로딩 스피너 구성 요소입니다.

열다 미리 보기

                <div class="flex items-center justify-center h-screen bg-white dark:bg-gray-900">
  <div class="animate-spin rounded-full h-16 w-16 border-t-4 border-b-4 border-gray-900 dark:border-gray-100"></div>
</div>

1 ... 112 113 114 115 116 ... 242

카테고리

모든 구성 요소