모든 구성 요소

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

사이트 맵 구성 요소

머티리얼 디자인 원칙에 따라 스타일이 지정되고 전자 상거래에 최적화된 반응형 사이트 맵 구성 요소로, 파스텔 색상과 다크 모드를 지원합니다.

                <div class="bg-white dark:bg-gray-800 p-6 rounded-md shadow-md">
    <h2 class="text-2xl font-bold mb-4 text-gray-800 dark:text-gray-100">Site Map</h2>
    <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
        <div class="p-4 bg-blue-100 dark:bg-blue-900 rounded shadow">
            <h3 class="font-semibold text-lg text-blue-800 dark:text-blue-200">Products</h3>
            <ul class="mt-2">
                <li><a href="#" class="text-blue-600 dark:text-blue-400 hover:underline">New Arrivals</a></li>
                <li><a href="#" class="text-blue-600 dark:text-blue-400 hover:underline">Featured</a></li>
                <li><a href="#" class="text-blue-600 dark:text-blue-400 hover:underline">Best Sellers</a></li>
                <li><a href="#" class="text-blue-600 dark:text-blue-400 hover:underline">Sales</a></li>
            </ul>
        </div>
        <div class="p-4 bg-green-100 dark:bg-green-900 rounded shadow">
            <h3 class="font-semibold text-lg text-green-800 dark:text-green-200">Categories</h3>
            <ul class="mt-2">
                <li><a href="#" class="text-green-600 dark:text-green-400 hover:underline">Men</a></li>
                <li><a href="#" class="text-green-600 dark:text-green-400 hover:underline">Women</a></li>
                <li><a href="#" class="text-green-600 dark:text-green-400 hover:underline">Kids</a></li>
                <li><a href="#" class="text-green-600 dark:text-green-400 hover:underline">Accessories</a></li>
            </ul>
        </div>
        <div class="p-4 bg-pink-100 dark:bg-pink-900 rounded shadow">
            <h3 class="font-semibold text-lg text-pink-800 dark:text-pink-200">Support</h3>
            <ul class="mt-2">
                <li><a href="#" class="text-pink-600 dark:text-pink-400 hover:underline">Customer Service</a></li>
                <li><a href="#" class="text-pink-600 dark:text-pink-400 hover:underline">Returns</a></li>
                <li><a href="#" class="text-pink-600 dark:text-pink-400 hover:underline">FAQs</a></li>
                <li><a href="#" class="text-pink-600 dark:text-pink-400 hover:underline">Contact Us</a></li>
            </ul>
        </div>
    </div>
    <div class="mt-8">
        <h3 class="font-semibold text-lg text-gray-800 dark:text-gray-100">User Profile</h3>
        <div class="flex items-center mt-2">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full">
            <div class="ml-3">
                <p class="text-gray-800 dark:text-gray-100">John Doe</p>
                <p class="text-gray-600 dark:text-gray-400 text-sm">[email protected]</p>
            </div>
        </div>
    </div>
    <div class="mt-6">
        <h3 class="font-semibold text-lg text-gray-800 dark:text-gray-100">Featured Image</h3>
        <img src="https://picsum.photos/300/200" alt="Featured" class="mt-2 rounded-md shadow">
    </div>
</div>

위시리스트 컴포넌트

레트로/빈티지 미학으로 디자인된 반응형 위시리스트 구성 요소로, 트라이어딕 색 구성표와 다크 모드 지원을 특징으로 하여 작업이나 제품을 전시하는 데 이상적입니다.

열다 미리 보기

                <div class="bg-gray-900 dark:bg-gray-800 text-gray-100 dark:text-gray-200 p-6 rounded-lg max-w-md mx-auto shadow-lg">
    <h2 class="text-3xl font-bold text-center mb-4">My Wishlist</h2>
    <div class="space-y-4">
        <div class="flex items-center justify-between bg-gray-700 dark:bg-gray-600 p-4 rounded-lg">
            <img src="https://picsum.photos/100" alt="Product" class="w-16 h-16 rounded-lg">
            <div class="flex-1 ml-4">
                <h3 class="text-xl font-semibold">Product Title 1</h3>
                <p class="text-gray-300 dark:text-gray-400">Description of the product goes here.</p>
            </div>
            <button class="bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded">Add to Cart</button>
        </div>
        <div class="flex items-center justify-between bg-gray-700 dark:bg-gray-600 p-4 rounded-lg">
            <img src="https://picsum.photos/100?random=1" alt="Product" class="w-16 h-16 rounded-lg">
            <div class="flex-1 ml-4">
                <h3 class="text-xl font-semibold">Product Title 2</h3>
                <p class="text-gray-300 dark:text-gray-400">Description of the product goes here.</p>
            </div>
            <button class="bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded">Add to Cart</button>
        </div>
        <div class="flex items-center justify-between bg-gray-700 dark:bg-gray-600 p-4 rounded-lg">
            <img src="https://picsum.photos/100?random=2" alt="Product" class="w-16 h-16 rounded-lg">
            <div class="flex-1 ml-4">
                <h3 class="text-xl font-semibold">Product Title 3</h3>
                <p class="text-gray-300 dark:text-gray-400">Description of the product goes here.</p>
            </div>
            <button class="bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded">Add to Cart</button>
        </div>
    </div>
    <div class="mt-6 text-center">
        <h4 class="text-2xl font-bold">User: John Doe</h4>
        <img src="https://randomuser.me/api/portraits/men/10.jpg" alt="User Avatar" class="w-24 h-24 rounded-full mx-auto mt-2">
    </div>
</div>

제품 카드 구성 요소

Skeuomorphic Product Cards 반응형 디자인과 어두운 테마를 지원하는 대시보드용 구성 요소입니다.

열다 미리 보기

                <!-- Product Cards Component -->
<div class="p-10 dark:bg-gray-900">

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

    <!-- Product Card 1 -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden transform transition duration-500 hover:scale-105">
      <div class="p-6">
        <div class="flex justify-between items-center mb-4">
          <h3 class="text-xl font-semibold text-gray-800 dark:text-white">Product Title 1</h3>
          <span class="text-sm font-medium text-gray-600 dark:text-gray-300">Category</span>
        </div>
        <img class="w-full h-48 object-cover rounded mb-4" src="https://picsum.photos/seed/product1/400/300" alt="Product Image">
        <p class="text-gray-700 dark:text-gray-400 text-base mb-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        <div class="flex justify-between items-center">
          <span class="text-lg font-bold text-green-600 dark:text-green-400">$199.99</span>
          <button class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded shadow-md transition duration-300">View Details</button>
        </div>
      </div>
    </div>

    <!-- Product Card 2 -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden transform transition duration-500 hover:scale-105">
      <div class="p-6">
        <div class="flex justify-between items-center mb-4">
          <h3 class="text-xl font-semibold text-gray-800 dark:text-white">Product Title 2</h3>
          <span class="text-sm font-medium text-gray-600 dark:text-gray-300">Category</span>
        </div>
        <img class="w-full h-48 object-cover rounded mb-4" src="https://picsum.photos/seed/product2/400/300" alt="Product Image">
        <p class="text-gray-700 dark:text-gray-400 text-base mb-4">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
        <div class="flex justify-between items-center">
          <span class="text-lg font-bold text-green-600 dark:text-green-400">$299.99</span>
          <button class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded shadow-md transition duration-300">View Details</button>
        </div>
      </div>
    </div>

    <!-- Product Card 3 -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden transform transition duration-500 hover:scale-105">
      <div class="p-6">
        <div class="flex justify-between items-center mb-4">
          <h3 class="text-xl font-semibold text-gray-800 dark:text-white">Product Title 3</h3>
          <span class="text-sm font-medium text-gray-600 dark:text-gray-300">Category</span>
        </div>
        <img class="w-full h-48 object-cover rounded mb-4" src="https://picsum.photos/seed/product3/400/300" alt="Product Image">
        <p class="text-gray-700 dark:text-gray-400 text-base mb-4">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
        <div class="flex justify-between items-center">
          <span class="text-lg font-bold text-green-600 dark:text-green-400">$399.99</span>
          <button class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded shadow-md transition duration-300">View Details</button>
        </div>
      </div>
    </div>

  </div>

</div>

Glassmorphism Tabs 구성 요소

Simple Glassmorphism Tabs Portfolio용 구성 요소, 반응형 디자인과 어두운 테마 지원. 생생한 색 구성표를 사용합니다.

열다 미리 보기

                <div class="flex justify-center items-center h-screen bg-gray-200 dark:bg-gray-900 p-8">
  <div class="w-full max-w-md bg-white bg-opacity-30 dark:bg-gray-700 dark:bg-opacity-30 backdrop-filter backdrop-blur-lg rounded-lg p-6 shadow-xl">
    <div class="flex border-b border-gray-200 dark:border-gray-700">
      <button class="flex-1 py-2 px-4 text-center text-lg font-medium text-indigo-700 dark:text-indigo-300 border-b-2 border-indigo-500 dark:border-indigo-400 focus:outline-none">Projects</button>
      <button class="flex-1 py-2 px-4 text-center text-lg font-medium text-gray-600 dark:text-gray-400 hover:text-indigo-700 dark:hover:text-indigo-300 focus:outline-none">About</button>
      <button class="flex-1 py-2 px-4 text-center text-lg font-medium text-gray-600 dark:text-gray-400 hover:text-indigo-700 dark:hover:text-indigo-300 focus:outline-none">Contact</button>
    </div>
    <div class="mt-6 text-gray-700 dark:text-gray-300">
      <!-- Tab content goes here -->
      <p>This is the content for the Projects tab. You can replace this with your actual portfolio items.</p>
    </div>
  </div>
</div>

미니멀리스트 바닥글 탐색

반응형 디자인과 다크 모드를 지원하는 블로그를 위한 미니멀한 바닥글 탐색 구성 요소입니다.

열다 미리 보기

                <footer class="bg-gray-100 dark:bg-gray-900 text-gray-700 dark:text-gray-300 py-8">
  <div class="container mx-auto px-4">
    <div class="flex flex-col md:flex-row justify-between items-center">
      <div class="mb-4 md:mb-0">
        <p class="text-sm">&copy; 2023 Your Blog Name. All rights reserved.</p>
      </div>
      <nav>
        <ul class="flex space-x-4">
          <li><a href="#" class="text-sm hover:text-gray-900 dark:hover:text-white">Home</a></li>
          <li><a href="#" class="text-sm hover:text-gray-900 dark:hover:text-white">About</a></li>
          <li><a href="#" class="text-sm hover:text-gray-900 dark:hover:text-white">Contact</a></li>
        </ul>
      </nav>
    </div>
  </div>
</footer>

3D 햄버거 메뉴 컴포넌트

비즈니스/기업 웹사이트를 위한 삼원 색 구성표와 복잡한 대화형 요소를 통합한 3D 디자인의 반응형 햄버거 메뉴입니다.

열다 미리 보기

                <div class="relative inline-block text-left">
  <!-- Menu Button -->
  <div>
    <button class="flex items-center p-2 rounded-md bg-blue-600 hover:bg-blue-700 text-white dark:bg-gray-800 dark:hover:bg-gray-700 focus:outline-none">
      <span class="sr-only">Open menu</span>
      <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-7 6h7" />
      </svg>
    </button>
  </div>

  <!-- Menu Items -->
  <div class="absolute right-0 z-10 mt-2 w-48 rounded-md shadow-lg bg-white dark:bg-gray-800 ring-1 ring-black ring-opacity-5" role="menu" aria-orientation="vertical" aria-labelledby="options-menu">
    <div class="py-1" role="none">
      <a href="#" class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-blue-600 dark:hover:bg-gray-700">Dashboard</a>
      <a href="#" class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-blue-600 dark:hover:bg-gray-700">Team</a>
      <a href="#" class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-blue-600 dark:hover:bg-gray-700">Projects</a>
      <a href="#" class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-blue-600 dark:hover:bg-gray-700">Calendar</a>
      <a href="#" class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-blue-600 dark:hover:bg-gray-700">Reports</a>
    </div>
  </div>
</div>

<div class="flex justify-center mt-8">
  <h2 class="text-2xl font-bold text-gray-900 dark:text-white">Our Team</h2>
</div>

<div class="grid grid-cols-1 md:grid-cols-3 gap-4 mt-4">
  <div class="p-6 bg-white dark:bg-gray-800 rounded-lg shadow-md transform hover:scale-105 transition-transform duration-300">
    <img src="https://picsum.photos/id/1011/200" alt="Team Member" class="rounded-full mb-4">
    <h3 class="text-lg font-semibold text-gray-900 dark:text-white">Alice Smith</h3>
    <p class="text-gray-600 dark:text-gray-400">CEO</p>
  </div>
  <div class="p-6 bg-white dark:bg-gray-800 rounded-lg shadow-md transform hover:scale-105 transition-transform duration-300">
    <img src="https://picsum.photos/id/1012/200" alt="Team Member" class="rounded-full mb-4">
    <h3 class="text-lg font-semibold text-gray-900 dark:text-white">John Doe</h3>
    <p class="text-gray-600 dark:text-gray-400">CTO</p>
  </div>
  <div class="p-6 bg-white dark:bg-gray-800 rounded-lg shadow-md transform hover:scale-105 transition-transform duration-300">
    <img src="https://picsum.photos/id/1013/200" alt="Team Member" class="rounded-full mb-4">
    <h3 class="text-lg font-semibold text-gray-900 dark:text-white">Jane Roe</h3>
    <p class="text-gray-600 dark:text-gray-400">CFO</p>
  </div>
</div>

소셜 구성 요소

블로그/콘텐츠 목적을 위해 설계된 스큐어모픽 소셜 구성 요소로, 생생한 색상과 다크 모드를 지원합니다.

열다 미리 보기

                <div class="max-w-4xl mx-auto p-4 bg-white dark:bg-gray-900 rounded-lg shadow-lg">
  <h1 class="text-3xl font-bold text-blue-600 dark:text-blue-400 mb-6">Recent Posts</h1>
  <div class="bg-gray-100 dark:bg-gray-800 rounded-lg p-6 mb-4 shadow-md flex items-center space-x-4">
    <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-14 h-14 rounded-full shadow-lg">
    <div class="flex-1">
      <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200">John Doe</h2>
      <p class="text-gray-600 dark:text-gray-400">Posted a new article about technology trends in 2023.</p>
      <span class="text-sm text-blue-500 dark:text-blue-300">2 hours ago</span>
    </div>
    <a href="#" class="text-white bg-blue-600 dark:bg-blue-700 hover:bg-blue-500 dark:hover:bg-blue-600 px-4 py-2 rounded-lg">Read More</a>
  </div>

  <div class="bg-gray-100 dark:bg-gray-800 rounded-lg p-6 mb-4 shadow-md flex items-center space-x-4">
    <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar" class="w-14 h-14 rounded-full shadow-lg">
    <div class="flex-1">
      <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Jane Smith</h2>
      <p class="text-gray-600 dark:text-gray-400">Exploring the wonders of the universe and beyond.</p>
      <span class="text-sm text-blue-500 dark:text-blue-300">4 hours ago</span>
    </div>
    <a href="#" class="text-white bg-blue-600 dark:bg-blue-700 hover:bg-blue-500 dark:hover:bg-blue-600 px-4 py-2 rounded-lg">Read More</a>
  </div>

  <div class="bg-gray-100 dark:bg-gray-800 rounded-lg p-6 mb-4 shadow-md flex items-center space-x-4">
    <img src="https://randomuser.me/api/portraits/men/2.jpg" alt="User Avatar" class="w-14 h-14 rounded-full shadow-lg">
    <div class="flex-1">
      <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Mark Lee</h2>
      <p class="text-gray-600 dark:text-gray-400">Designing modern interfaces with UX principles.</p>
      <span class="text-sm text-blue-500 dark:text-blue-300">1 day ago</span>
    </div>
    <a href="#" class="text-white bg-blue-600 dark:bg-blue-700 hover:bg-blue-500 dark:hover:bg-blue-600 px-4 py-2 rounded-lg">Read More</a>
  </div>

  <div class="text-right">
    <a href="#" class="text-blue-500 dark:text-blue-300 hover:underline">See all posts &rarr;</a>
  </div>
</div>

로더 구성 요소

머티리얼 디자인 스타일의 로더 컴포넌트는 작업이나 제품을 선보이기 위한 반응형 디자인으로, 어두운 테마를 특징으로 하고 Tailwind CSS를 사용합니다.

열다 미리 보기

                <div class="min-h-screen flex items-center justify-center bg-gray-100 dark:bg-gray-900">
    <div class="w-full max-w-md p-6 border border-gray-300 rounded-lg shadow-lg dark:border-gray-700 dark:shadow-gray-800 bg-white dark:bg-gray-800">
        <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200 text-center mb-4">Loading Portfolio...</h2>
        <div class="space-y-6">
            <!-- Loader Item 1 -->
            <div class="flex items-center space-x-4 animate-pulse">
                <img class="h-16 w-16 rounded-full bg-gray-300 dark:bg-gray-700" src="https://picsum.photos/200/200" alt="Project Thumbnail" />
                <div class="flex-1">
                    <div class="h-4 bg-gray-300 dark:bg-gray-700 rounded w-3/4 mb-2"></div>
                    <div class="h-3 bg-gray-300 dark:bg-gray-700 rounded w-1/2"></div>
                </div>
            </div>
            <!-- Loader Item 2 -->
            <div class="flex items-center space-x-4 animate-pulse">
                <img class="h-16 w-16 rounded-full bg-gray-300 dark:bg-gray-700" src="https://picsum.photos/201/200" alt="Project Thumbnail" />
                <div class="flex-1">
                    <div class="h-4 bg-gray-300 dark:bg-gray-700 rounded w-3/4 mb-2"></div>
                    <div class="h-3 bg-gray-300 dark:bg-gray-700 rounded w-1/2"></div>
                </div>
            </div>
            <!-- Loader Item 3 -->
            <div class="flex items-center space-x-4 animate-pulse">
                <img class="h-16 w-16 rounded-full bg-gray-300 dark:bg-gray-700" src="https://picsum.photos/202/200" alt="Project Thumbnail" />
                <div class="flex-1">
                    <div class="h-4 bg-gray-300 dark:bg-gray-700 rounded w-3/4 mb-2"></div>
                    <div class="h-3 bg-gray-300 dark:bg-gray-700 rounded w-1/2"></div>
                </div>
            </div>
            <!-- Loader Item 4 -->
            <div class="flex items-center space-x-4 animate-pulse">
                <img class="h-16 w-16 rounded-full bg-gray-300 dark:bg-gray-700" src="https://picsum.photos/203/200" alt="Project Thumbnail" />
                <div class="flex-1">
                    <div class="h-4 bg-gray-300 dark:bg-gray-700 rounded w-3/4 mb-2"></div>
                    <div class="h-3 bg-gray-300 dark:bg-gray-700 rounded w-1/2"></div>
                </div>
            </div>
        </div>
    </div>
</div>

Heat Maps 구성 요소

반응형 다크 모드 히트 맵 구성 요소는 트라이어딕 색 구성표를 사용하여 대시보드에서 데이터를 시각화합니다.

열다 미리 보기

                <div class="bg-gray-900 p-6 rounded-lg shadow-lg">
    <h2 class="text-2xl font-bold text-white mb-4">Heat Maps Component</h2>
    <div class="grid grid-cols-3 gap-4">
        <div class="bg-blue-500 p-4 rounded-lg shadow-md transition-transform transform hover:scale-105 dark:bg-blue-700">
            <h3 class="text-lg font-semibold text-white">Category 1</h3>
            <img src="https://picsum.photos/200/100?random=1" alt="Random Image" class="rounded mt-2" />
            <p class="text-white mt-2">Heat Level: High</p>
        </div>
        <div class="bg-orange-500 p-4 rounded-lg shadow-md transition-transform transform hover:scale-105 dark:bg-orange-700">
            <h3 class="text-lg font-semibold text-white">Category 2</h3>
            <img src="https://picsum.photos/200/100?random=2" alt="Random Image" class="rounded mt-2" />
            <p class="text-white mt-2">Heat Level: Medium</p>
        </div>
        <div class="bg-green-500 p-4 rounded-lg shadow-md transition-transform transform hover:scale-105 dark:bg-green-700">
            <h3 class="text-lg font-semibold text-white">Category 3</h3>
            <img src="https://picsum.photos/200/100?random=3" alt="Random Image" class="rounded mt-2" />
            <p class="text-white mt-2">Heat Level: Low</p>
        </div>
    </div>
    <footer class="mt-6 text-center">
        <p class="text-gray-400">Data visualizations based on real-time data</p>
        <div class="flex justify-center mt-4 space-x-4">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full" />
            <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full" />
        </div>
    </footer>
</div>

맨 위로 이동 버튼 구성 요소

마이크로 인터랙션과 생생한 색상으로 설계된 반응형 맨 위로 돌아가기 버튼은 다크 모드를 지원하는 대시보드 인터페이스에 적합합니다.

열다 미리 보기

                <div class="fixed bottom-4 right-4">
    <button class="bg-gradient-to-r from-purple-600 to-pink-600 text-white rounded-full p-3 shadow-lg hover:scale-110 transition-transform duration-300 dark:from-purple-800 dark:to-pink-800">
        <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="M12 4v16m0 0l-4-4m4 4l4-4" />
        </svg>
    </button>
</div>

1 ... 108 109 110 111 112 ... 262

카테고리

모든 구성 요소