검색 구성 요소

모든 구성 요소

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

Success Messages 구성 요소

잔인함적인 디자인 스타일로 대담한 성공 메시지를 표시하는 구성 요소로, 높은 대비, 반응형 효과 및 어두운 테마 지원을 특징으로 합니다.

                <div class="bg-green-500 p-5 rounded-lg shadow-lg text-white max-w-md mx-auto mt-10">
    <div class="flex items-center space-x-4">
        <img src="https://randomuser.me/api/portraits/thumb/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-2 border-white">
        <h2 class="text-2xl font-bold">Success!</h2>
    </div>
    <p class="mt-2 text-lg">Your operation was completed successfully. Everything went smoothly!</p>
    <img src="https://picsum.photos/seed/picsum/400/200" alt="Success Image" class="mt-3 rounded-md w-full">
    <div class="mt-4">
        <a href="#" class="bg-white text-green-500 font-bold py-2 px-4 rounded hover:bg-gray-200 transition duration-200">View Details</a>
    </div>
</div>
<div class="bg-gray-800 p-5 rounded-lg shadow-lg text-white max-w-md mx-auto mt-10 hidden dark:block">
    <div class="flex items-center space-x-4">
        <img src="https://randomuser.me/api/portraits/thumb/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-2 border-gray-800 bg-gray-700">
        <h2 class="text-2xl font-bold">Success!</h2>
    </div>
    <p class="mt-2 text-lg">Your operation was completed successfully. Everything went smoothly!</p>
    <img src="https://picsum.photos/seed/picsum/400/200" alt="Success Image" class="mt-3 rounded-md w-full">
    <div class="mt-4">
        <a href="#" class="bg-gray-700 text-white font-bold py-2 px-4 rounded hover:bg-gray-600 transition duration-200">View Details</a>
    </div>
</div>

Brutalism 데이터 테이블

브루탈리즘(Brutalist) 디자인의 반응형 데이터 테이블 구성 요소로, 다크 모드 지원 및 호버 효과를 제공합니다.

열다 미리 보기

                <div class="overflow-x-auto bg-white dark:bg-black text-black dark:text-white border-4 border-black dark:border-white">
  <table class="min-w-full table-auto">
    <thead>
      <tr>
        <th class="px-4 py-2 border-b-4 border-black dark:border-white text-left text-xs font-bold uppercase">Name</th>
        <th class="px-4 py-2 border-b-4 border-black dark:border-white text-left text-xs font-bold uppercase">Title</th>
        <th class="px-4 py-2 border-b-4 border-black dark:border-white text-left text-xs font-bold uppercase">Status</th>
        <th class="px-4 py-2 border-b-4 border-black dark:border-white text-left text-xs font-bold uppercase">Role</th>
        <th class="px-4 py-2 border-b-4 border-black dark:border-white text-left text-xs font-bold uppercase">Action</th>
      </tr>
    </thead>
    <tbody>
      <tr class="hover:bg-gray-200 dark:hover:bg-gray-700">
        <td class="px-4 py-2 border-b border-black dark:border-white flex items-center">
          <img class="h-10 w-10 rounded-full mr-2 object-cover" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar">
          John Doe
        </td>
        <td class="px-4 py-2 border-b border-black dark:border-white">Software Engineer</td>
        <td class="px-4 py-2 border-b border-black dark:border-white">
          <span class="inline-block bg-green-500 text-white text-xs px-2 rounded-full uppercase font-semibold">Active</span>
        </td>
        <td class="px-4 py-2 border-b border-black dark:border-white">Member</td>
        <td class="px-4 py-2 border-b border-black dark:border-white">
          <button class="bg-black dark:bg-white text-white dark:text-black px-4 py-2 text-xs font-bold uppercase border-2 border-black dark:border-white hover:bg-white dark:hover:bg-black hover:text-black dark:hover:text-white">Edit</button>
        </td>
      </tr>
      <tr class="hover:bg-gray-200 dark:hover:bg-gray-700">
        <td class="px-4 py-2 border-b border-black dark:border-white flex items-center">
          <img class="h-10 w-10 rounded-full mr-2 object-cover" src="https://randomuser.me/api/portraits/women/1.jpg" alt="Avatar">
          Jane Smith
        </td>
        <td class="px-4 py-2 border-b border-black dark:border-white">UI Designer</td>
         <td class="px-4 py-2 border-b border-black dark:border-white">
          <span class="inline-block bg-yellow-500 text-black text-xs px-2 rounded-full uppercase font-semibold">Pending</span>
        </td>
        <td class="px-4 py-2 border-b border-black dark:border-white">Admin</td>
        <td class="px-4 py-2 border-b border-black dark:border-white">
          <button class="bg-black dark:bg-white text-white dark:text-black px-4 py-2 text-xs font-bold uppercase border-2 border-black dark:border-white hover:bg-white dark:hover:bg-black hover:text-black dark:hover:text-white">Edit</button>
        </td>
      </tr>
      <tr class="hover:bg-gray-200 dark:hover:bg-gray-700">
        <td class="px-4 py-2 border-b border-black dark:border-white flex items-center">
          <img class="h-10 w-10 rounded-full mr-2 object-cover" src="https://randomuser.me/api/portraits/men/2.jpg" alt="Avatar">
          Peter Jones
        </td>
        <td class="px-4 py-2 border-b border-black dark:border-white">Data Analyst</td>
         <td class="px-4 py-2 border-b border-black dark:border-white">
          <span class="inline-block bg-red-500 text-white text-xs px-2 rounded-full uppercase font-semibold">Inactive</span>
        </td>
        <td class="px-4 py-2 border-b border-black dark:border-white">Member</td>
        <td class="px-4 py-2 border-b border-black dark:border-white">
          <button class="bg-black dark:bg-white text-white dark:text-black px-4 py-2 text-xs font-bold uppercase border-2 border-black dark:border-white hover:bg-white dark:hover:bg-black hover:text-black dark:hover:text-white">Edit</button>
        </td>
      </tr>
    </tbody>
  </table>
</div>

위시리스트 컴포넌트 - 머티리얼 디자인

Material Design에서 영감을 받은 위시리스트 컴포넌트는 반응형 디자인과 어두운 테마를 지원합니다.

열다 미리 보기

                <div class='p-4 max-w-sm mx-auto bg-white rounded-xl shadow-md space-y-4 sm:flex sm:items-center sm:space-y-0 sm:space-x-6 dark:bg-gray-800'>
  <div class='text-center space-y-2 sm:text-left'>
    <div class='space-y-0.5'>
      <p class='text-lg text-black font-semibold dark:text-white'>
        Product Name
      </p>
      <p class='text-gray-500 font-medium dark:text-gray-300'>
        $19.99
      </p>
    </div>
    <button class='px-4 py-1 text-sm text-purple-600 font-semibold rounded-full border border-purple-200 hover:text-white hover:bg-purple-600 hover:border-transparent focus:outline-none focus:ring-2 focus:ring-purple-600 focus:ring-offset-2 dark:focus:ring-offset-gray-800'>
      Remove
    </button>
  </div>
  <img class='block mx-auto h-24 rounded-full sm:mx-0 sm:flex-shrink-0' src='https://picsum.photos/200' alt='Product Image'>
</div>

머티리얼 디자인 탭

머티리얼 디자인 스타일, 반응형 효과 및 어두운 테마가 있는 탭 구성 요소는 JavaScript 없이 Tailwind CSS를 사용합니다.

열다 미리 보기

                <div class="material-tabs">
  <div class="tab-header">
    <div class="tab-button active">Tab 1</div>
    <div class="tab-button">Tab 2</div>
    <div class="tab-button">Tab 3</div>
  </div>
  <div class="tab-content active">
    <h2>Content for Tab 1</h2>
    <p>This is the content for the first tab. It uses Material Design principles for layout and appearance.</p>
  </div>
  <div class="tab-content">
    <h2>Content for Tab 2</h2>
    <p>This is the content for the second tab.</p>
  </div>
  <div class="tab-content">
    <h2>Content for Tab 3</h2>
    <p>This is the content for the third tab.</p>
  </div>
</div>

Product Gallery 구성 요소

Glassmorphism 디자인 스타일의 반응형 제품 갤러리 구성 요소로, 흐림 효과와 어두운 테마를 지원하는 젖빛 유리와 같은 반투명 요소를 특징으로 합니다. 제품 이미지와 사용자 아바타를 선보입니다.

열다 미리 보기

                <div class="min-h-screen bg-gray-50 dark:bg-gray-900 flex items-center justify-center p-4">
    <div class="max-w-4xl w-full">
        <h2 class="text-2xl font-bold text-center mb-6 dark:text-white">Product Gallery</h2>
        <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
            <!-- Product Card -->
            <div class="bg-white dark:bg-gray-800 bg-opacity-90 backdrop-blur-lg rounded-lg shadow-lg overflow-hidden hover:shadow-xl transition-shadow">
                <img src="https://picsum.photos/300/200?random=1" alt="Product 1" 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-400">Description of product 1 with details.</p>
                    <div class="mt-2 flex items-center">
                        <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-8 h-8 rounded-full mr-2">
                        <span class="text-sm text-gray-600 dark:text-gray-400">By John Doe</span>
                    </div>
                </div>
            </div>
            <!-- Product Card -->
            <div class="bg-white dark:bg-gray-800 bg-opacity-90 backdrop-blur-lg rounded-lg shadow-lg overflow-hidden hover:shadow-xl transition-shadow">
                <img src="https://picsum.photos/300/200?random=2" alt="Product 2" 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-400">Description of product 2 with details.</p>
                    <div class="mt-2 flex items-center">
                        <img src="https://randomuser.me/api/portraits/men/2.jpg" alt="User Avatar" class="w-8 h-8 rounded-full mr-2">
                        <span class="text-sm text-gray-600 dark:text-gray-400">By Jane Smith</span>
                    </div>
                </div>
            </div>
            <!-- Product Card -->
            <div class="bg-white dark:bg-gray-800 bg-opacity-90 backdrop-blur-lg rounded-lg shadow-lg overflow-hidden hover:shadow-xl transition-shadow">
                <img src="https://picsum.photos/300/200?random=3" alt="Product 3" 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-400">Description of product 3 with details.</p>
                    <div class="mt-2 flex items-center">
                        <img src="https://randomuser.me/api/portraits/men/3.jpg" alt="User Avatar" class="w-8 h-8 rounded-full mr-2">
                        <span class="text-sm text-gray-600 dark:text-gray-400">By Mike Johnson</span>
                    </div>
                </div>
            </div>
            <!-- Product Card -->
            <div class="bg-white dark:bg-gray-800 bg-opacity-90 backdrop-blur-lg rounded-lg shadow-lg overflow-hidden hover:shadow-xl transition-shadow">
                <img src="https://picsum.photos/300/200?random=4" alt="Product 4" 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 4</h3>
                    <p class="text-gray-600 dark:text-gray-400">Description of product 4 with details.</p>
                    <div class="mt-2 flex items-center">
                        <img src="https://randomuser.me/api/portraits/men/4.jpg" alt="User Avatar" class="w-8 h-8 rounded-full mr-2">
                        <span class="text-sm text-gray-600 dark:text-gray-400">By Sarah Connor</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

사이트 맵 구성 요소

반응형 디자인과 다크 모드를 지원하는 3D 스타일 사이트 맵 구성 요소입니다. 깊이와 참여를 위한 3차원 요소가 특징이며, 무작위 자리 표시자 이미지와 아바타를 사용합니다.

열다 미리 보기

                <div class="bg-white dark:bg-gray-900 rounded-lg shadow-lg max-w-4xl mx-auto p-6">
    <h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-4">Site Map</h2>
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        <div class="bg-gray-100 dark:bg-gray-800 rounded-lg p-4 shadow-md transition-transform transform hover:scale-105 hover:shadow-lg">
            <h3 class="text-lg font-semibold text-gray-800 dark:text-white">Home</h3>
            <img src="https://picsum.photos/200/100?random=1" alt="Home Image" class="rounded-lg mt-2">
        </div>
        <div class="bg-gray-100 dark:bg-gray-800 rounded-lg p-4 shadow-md transition-transform transform hover:scale-105 hover:shadow-lg">
            <h3 class="text-lg font-semibold text-gray-800 dark:text-white">About Us</h3>
            <img src="https://picsum.photos/200/100?random=2" alt="About Us Image" class="rounded-lg mt-2">
        </div>
        <div class="bg-gray-100 dark:bg-gray-800 rounded-lg p-4 shadow-md transition-transform transform hover:scale-105 hover:shadow-lg">
            <h3 class="text-lg font-semibold text-gray-800 dark:text-white">Services</h3>
            <img src="https://picsum.photos/200/100?random=3" alt="Services Image" class="rounded-lg mt-2">
        </div>
        <div class="bg-gray-100 dark:bg-gray-800 rounded-lg p-4 shadow-md transition-transform transform hover:scale-105 hover:shadow-lg">
            <h3 class="text-lg font-semibold text-gray-800 dark:text-white">Contact</h3>
            <img src="https://picsum.photos/200/100?random=4" alt="Contact Image" class="rounded-lg mt-2">
        </div>
        <div class="bg-gray-100 dark:bg-gray-800 rounded-lg p-4 shadow-md transition-transform transform hover:scale-105 hover:shadow-lg">
            <h3 class="text-lg font-semibold text-gray-800 dark:text-white">Blog</h3>
            <img src="https://picsum.photos/200/100?random=5" alt="Blog Image" class="rounded-lg mt-2">
        </div>
        <div class="bg-gray-100 dark:bg-gray-800 rounded-lg p-4 shadow-md transition-transform transform hover:scale-105 hover:shadow-lg">
            <h3 class="text-lg font-semibold text-gray-800 dark:text-white">Portfolio</h3>
            <img src="https://picsum.photos/200/100?random=6" alt="Portfolio Image" class="rounded-lg mt-2">
        </div>
    </div>
</div>

데이터 시각화 구성 요소

반응형 효과와 어두운 테마를 지원하는 Neumorphism 데이터 시각화 구성 요소.

열다 미리 보기

                <div class="min-h-screen bg-gray-100 dark:bg-gray-900 p-8 flex flex-col items-center justify-center">
  <div class="w-full max-w-4xl">
    <!-- Chart Container (Placeholder) -->
    <div class="bg-gray-200 dark:bg-gray-800 p-6 rounded-xl shadow-neumorphic-light dark:shadow-neumorphic-dark mb-8">
      <h2 class="text-xl font-semibold text-gray-700 dark:text-gray-300 mb-4">Sales Overview</h2>
      <!-- Replace with your chart library integration (e.g., Chart.js, D3.js) -->
      <div class="h-64 flex items-center justify-center text-gray-500 dark:text-gray-400">
        [Your Chart Goes Here]
      </div>
    </div>

    <div class="grid md:grid-cols-2 gap-8">
      <!-- KPl Card 1 -->
      <div class="bg-gray-200 dark:bg-gray-800 p-6 rounded-xl shadow-neumorphic-light dark:shadow-neumorphic-dark">
        <h3 class="text-lg font-semibold text-gray-700 dark:text-gray-300 mb-2">Revenue</h3>
        <p class="text-2xl font-bold text-green-600 dark:text-green-400">$12,345</p>
        <p class="text-sm text-gray-500 dark:text-gray-400">+5% from last month</p>
      </div>

      <!-- KPl Card 2 -->
      <div class="bg-gray-200 dark:bg-gray-800 p-6 rounded-xl shadow-neumorphic-light dark:shadow-neumorphic-dark">
        <h3 class="text-lg font-semibold text-gray-700 dark:text-gray-300 mb-2">New Users</h3>
        <p class="text-2xl font-bold text-blue-600 dark:text-blue-400">1,234</p>
        <p class="text-sm text-gray-500 dark:text-gray-400">+10% from last month</p>
      </div>
    </div>

    <!-- Table Container (Placeholder) -->
    <div class="bg-gray-200 dark:bg-gray-800 p-6 rounded-xl shadow-neumorphic-light dark:shadow-neumorphic-dark mt-8">
        <h2 class="text-xl font-semibold text-gray-700 dark:text-gray-300 mb-4">Recent Activity</h2>
        <!-- Replace with your table implementation -->
        <div class="overflow-x-auto">
            <table class="min-w-full text-gray-700 dark:text-gray-300">
                <thead>
                    <tr>
                        <th class="text-left py-2">User</th>
                        <th class="text-left py-2">Action</th>
                        <th class="text-left py-2">Time</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td class="py-2 flex items-center">
                            <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" class="w-8 h-8 rounded-full mr-3">
                            John Doe
                        </td>
                        <td class="py-2">Viewed Dashboard</td>
                        <td class="py-2">1 hour ago</td>
                    </tr>
                     <tr>
                        <td class="py-2 flex items-center">
                            <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar" class="w-8 h-8 rounded-full mr-3">
                            Jane Smith
                            </td>
                        <td class="py-2">Updated Profile</td>
                        <td class="py-2">2 hours ago</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>

  </div>
</div>

<style>
@layer components {
  .shadow-neumorphic-light {
    box-shadow: 7px 7px 15px #a7a7a7, -7px -7px 15px #ffffff;
  }
  .dark .shadow-neumorphic-dark {
    box-shadow: 7px 7px 15px #1a1a1a, -7px -7px 15px #333333;
  }
}
</style>

메가 메뉴 컴포넌트

다크 모드를 지원하는 Mega Menu 구성 요소

열다 미리 보기

                <nav class="bg-gray-900 shadow-lg">
    <div class="container mx-auto px-4">
        <div class="flex items-center justify-between py-4">
            <a href="#" class="text-white text-xl font-bold">Logo</a>
            <div class="hidden md:flex md:items-center md:space-x-4">
                <a href="#" class="text-gray-300 hover:text-white transition duration-300">Home</a>
                <div class="relative group">
                    <button class="text-gray-300 hover:text-white transition duration-300">Products</button>
                    <div class="absolute z-10 hidden group-hover:block bg-gray-800 shadow-lg mt-2 rounded-md">
                        <a href="#" class="block px-4 py-2 text-gray-300 hover:text-white">Product 1</a>
                        <a href="#" class="block px-4 py-2 text-gray-300 hover:text-white">Product 2</a>
                        <a href="#" class="block px-4 py-2 text-gray-300 hover:text-white">Product 3</a>
                    </div>
                </div>
                <a href="#" class="text-gray-300 hover:text-white transition duration-300">About</a>
                <a href="#" class="text-gray-300 hover:text-white transition duration-300">Contact</a>
            </div>
            <div class="md:hidden">
                <button class="text-gray-300 hover:text-white focus:outline-none">
                    <svg class="h-6 w-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>
            </div>
        </div>
    </div>
</nav>

미디어 구성 요소

반응형 디자인과 어두운 테마를 지원하는 미디어 디스플레이를 위한 Neumorphism 스타일 구성 요소입니다.

열다 미리 보기

                <div class="flex flex-col items-center justify-center p-6 bg-white rounded-xl shadow-lg dark:bg-gray-800 dark:shadow-gray-900 hover:shadow-xl transition-shadow duration-300 ease-in-out">
    <div class="mb-4">
        <img src="https://picsum.photos/300/200" alt="Media" class="w-full h-auto rounded-lg shadow-md" />
    </div>
    <div class="flex items-center mb-2">
        <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full shadow-lg mr-2">
        <h2 class="text-lg font-semibold dark:text-white">User Name</h2>
    </div>
    <p class="text-gray-700 dark:text-gray-300 text-center">
        This is a description of the media content that is displayed above. It's designed with a soft UI style to enhance the visual appeal.
    </p>
</div>

전자 상거래 구성 요소

브루탈리즘 스타일의 이커머스 컴포넌트로, 대담한 디자인, 고대비, 다크 모드를 지원하는 반응형 레이아웃을 특징으로 합니다.

열다 미리 보기

                <div class="bg-white text-black dark:bg-gray-900 dark:text-white p-6 rounded-lg shadow-lg">
    <div class="flex flex-col md:flex-row items-center justify-between space-x-0 md:space-x-4">
        <div class="flex-shrink-0">
            <img class="w-32 h-32 rounded-lg shadow-md" src="https://picsum.photos/200/200" alt="Product Image">
        </div>
        <div class="mt-4 md:mt-0 md:flex-grow">
            <h2 class="text-2xl font-bold">Brutalism T-Shirt</h2>
            <p class="text-lg text-gray-700 dark:text-gray-300">A bold statement piece for your wardrobe. Embrace the raw aesthetic of brutalism with this unique T-Shirt.</p>
            <span class="text-xl font-semibold text-red-600 dark:text-red-400">$29.99</span>
        </div>
        <div class="mt-4 md:mt-0">
            <button class="bg-red-600 text-white font-bold py-2 px-4 rounded-full shadow hover:bg-red-700 dark:bg-red-500 dark:hover:bg-red-600 transition">Add to Cart</button>
        </div>
    </div>
    <div class="mt-6 border-t border-gray-300 dark:border-gray-700 pt-4">
        <h3 class="text-lg font-bold">Product Review</h3>
        <div class="flex items-center mt-2">
            <img class="w-8 h-8 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar">
            <div class="ml-2">
                <span class="font-semibold">John Doe</span>
                <p class="text-sm text-gray-600 dark:text-gray-400">“This shirt is awesome! Love the brutalist design.”</p>
            </div>
        </div>
        <div class="mt-2 flex items-center">
            <img class="w-8 h-8 rounded-full" src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar">
            <div class="ml-2">
                <span class="font-semibold">Jane Smith</span>
                <p class="text-sm text-gray-600 dark:text-gray-400">“Very comfortable and stylish. Highly recommend!”</p>
            </div>
        </div>
    </div>
</div>

1 ... 255 256 257 258 259 ... 315

검색 구성 요소

카테고리

모든 구성 요소