검색 구성 요소

모든 구성 요소

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

Heat Maps 구성 요소

히트 맵 컴포넌트는 어스 톤, 적당한 복잡성, 어두운 테마를 지원하는 반응형 디자인의 브루탈리즘 스타일로 디자인되었습니다.

                <div class="bg-gray-100 dark:bg-gray-900 p-6 rounded-lg">
    <h2 class="text-2xl font-bold mb-4 text-brown-800 dark:text-brown-200">Project Heat Maps</h2>
    <p class="mb-6 text-gray-700 dark:text-gray-300">Showcasing data visualizations through temperature maps in a bold and raw design style.</p>
    <div class="grid gap-4 grid-cols-1 md:grid-cols-2 lg:grid-cols-3">
        <div class="bg-brown-200 dark:bg-brown-700 rounded-lg shadow-md p-4">
            <img src="https://picsum.photos/400/200?random=1" alt="Heat Map 1" class="rounded-lg mb-2">
            <h3 class="font-bold text-lg text-brown-800 dark:text-brown-200">Heat Map 1</h3>
            <p class="text-brown-600 dark:text-brown-300">Description of heat map 1, highlighting interesting data points.</p>
        </div>
        <div class="bg-brown-200 dark:bg-brown-700 rounded-lg shadow-md p-4">
            <img src="https://picsum.photos/400/200?random=2" alt="Heat Map 2" class="rounded-lg mb-2">
            <h3 class="font-bold text-lg text-brown-800 dark:text-brown-200">Heat Map 2</h3>
            <p class="text-brown-600 dark:text-brown-300">Description of heat map 2, showcasing a different aspect of the data.</p>
        </div>
        <div class="bg-brown-200 dark:bg-brown-700 rounded-lg shadow-md p-4">
            <img src="https://picsum.photos/400/200?random=3" alt="Heat Map 3" class="rounded-lg mb-2">
            <h3 class="font-bold text-lg text-brown-800 dark:text-brown-200">Heat Map 3</h3>
            <p class="text-brown-600 dark:text-brown-300">Description of heat map 3, emphasizing key trends.</p>
        </div>
    </div>
    <div class="mt-6">
        <h3 class="font-bold text-xl text-brown-800 dark:text-brown-200">Team</h3>
        <div class="flex space-x-4 mt-2">
            <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar 1" class="w-12 h-12 rounded-full border-2 border-brown-800 dark:border-brown-200">
            <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Avatar 2" class="w-12 h-12 rounded-full border-2 border-brown-800 dark:border-brown-200">
            <img src="https://randomuser.me/api/portraits/men/12.jpg" alt="Avatar 3" class="w-12 h-12 rounded-full border-2 border-brown-800 dark:border-brown-200">
        </div>
    </div>
</div>

Navigation 구성 요소

반응형 다크 모드 탐색 구성 요소는 파스텔 색 구성표와 단순한 레이아웃으로 전자 상거래를 위해 설계되었습니다.

열다 미리 보기

                <nav class="bg-gray-800 dark:bg-gray-900 p-4">
    <div class="container mx-auto flex items-center justify-between">
        <div class="flex items-center space-x-4">
            <a href="#" class="text-pink-300 hover:text-pink-400 dark:text-pink-200 dark:hover:text-pink-300">Home</a>
            <a href="#" class="text-pink-300 hover:text-pink-400 dark:text-pink-200 dark:hover:text-pink-300">Shop</a>
            <a href="#" class="text-pink-300 hover:text-pink-400 dark:text-pink-200 dark:hover:text-pink-300">About Us</a>
            <a href="#" class="text-pink-300 hover:text-pink-400 dark:text-pink-200 dark:hover:text-pink-300">Contact</a>
        </div>
        <div class="flex items-center space-x-4">
            <a href="#" class="text-pink-300 hover:text-pink-400 dark:text-pink-200 dark:hover:text-pink-300">
                <img class="h-8 w-8 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar">
            </a>
            <a href="#" class="text-pink-300 hover:text-pink-400 dark:text-pink-200 dark:hover:text-pink-300">Cart</a>
        </div>
    </div>
</nav>

사이드바 구성 요소

레트로/빈티지 스타일로 디자인된 반응형 사이드바 구성 요소로, 대시보드 레이아웃을 위한 생생한 색상으로 디자인되었습니다. 여기에는 다크 모드에 대한 지원이 포함됩니다.

열다 미리 보기

                <div class="flex flex-col w-64 h-screen p-4 bg-blue-600 text-white dark:bg-blue-900">
    <h2 class="text-2xl font-bold mb-6 text-yellow-500">Dashboard</h2>
    <div class="flex flex-col space-y-4">
        <a href="#" class="p-2 hover:bg-yellow-500 hover:text-black rounded-md transition">Home</a>
        <a href="#" class="p-2 hover:bg-yellow-500 hover:text-black rounded-md transition">Reports</a>
        <a href="#" class="p-2 hover:bg-yellow-500 hover:text-black rounded-md transition">Analytics</a>
        <a href="#" class="p-2 hover:bg-yellow-500 hover:text-black rounded-md transition">Settings</a>
    </div>
    <div class="mt-auto pt-4 border-t border-gray-300 dark:border-gray-700">
        <div class="flex items-center space-x-2">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full">
            <span class="text-sm font-semibold">John Doe</span>
        </div>
    </div>
</div>

Retro Tag Cloud 구성 요소

Tailwind CSS를 사용하는 반응형 태그 클라우드 구성 요소로, 레트로/빈티지 디자인 미학, 파스텔 색 구성표 및 단순한 복잡성을 갖추고 있습니다. 다크 모드 지원을 포함한 포트폴리오에 적합합니다.

열다 미리 보기

                <div class="bg-stone-50 dark:bg-stone-900 p-6 rounded-lg shadow-md">
  <h2 class="text-xl font-mono text-stone-700 dark:text-stone-300 mb-4">Skills</h2>
  <div class="flex flex-wrap gap-2">
    <span class="px-3 py-1 bg-rose-200 dark:bg-rose-700 text-rose-800 dark:text-rose-200 text-sm font-mono rounded-full shadow-sm">HTML</span>
    <span class="px-3 py-1 bg-teal-200 dark:bg-teal-700 text-teal-800 dark:text-teal-200 text-sm font-mono rounded-full shadow-sm">CSS</span>
    <span class="px-3 py-1 bg-fuchsia-200 dark:bg-fuchsia-700 text-fuchsia-800 dark:text-fuchsia-200 text-sm font-mono rounded-full shadow-sm">Tailwind CSS</span>
    <span class="px-3 py-1 bg-violet-200 dark:bg-violet-700 text-violet-800 dark:text-violet-200 text-sm font-mono rounded-full shadow-sm">JavaScript</span>
    <span class="px-3 py-1 bg-amber-200 dark:bg-amber-700 text-amber-800 dark:text-amber-200 text-sm font-mono rounded-full shadow-sm">Python</span>
    <span class="px-3 py-1 bg-cyan-200 dark:bg-cyan-700 text-cyan-800 dark:text-cyan-200 text-sm font-mono rounded-full shadow-sm">React</span>
    <span class="px-3 py-1 bg-lime-200 dark:bg-lime-700 text-lime-800 dark:text-lime-200 text-sm font-mono rounded-full shadow-sm">Django</span>
  </div>
</div>

뉴모피즘 로더

전자 상거래를 위한 Neumorphism 스타일과 파스텔 색 구성표가 있는 로더 구성 요소. 단순하고 복잡하며 다크 모드 지원으로 반응합니다. 자바스크립트가 없습니다.

열다 미리 보기

                <div class="flex items-center justify-center h-screen bg-gray-100 dark:bg-gray-800">
  <div class="loader ease-linear rounded-full border-8 border-t-8 border-gray-200 dark:border-gray-700 h-32 w-32 relative" style="border-top-color: #a78bfa;">
    <div class="absolute inset-0 flex items-center justify-center text-gray-500 dark:text-gray-400 text-2xl">
      Loading...
    </div>
  </div>
</div>

<style>
  .loader {
    animation: spin 2s linear infinite;
    box-shadow: 8px 8px 16px #a7a7a7, -8px -8px 16px #ffffff; /* Neumorphism effect */
  }

  @keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
  }

  .dark .loader {
     box-shadow: 8px 8px 16px #4b5563, -8px -8px 16px #1f2937; /* Neumorphism effect for dark mode */
  }
</style>

Navigation Enhancement 구성 요소

Tailwind CSS를 사용하여 포트폴리오를 보여주기 위한 간단한 다크 모드 탐색 개선 구성 요소입니다.

열다 미리 보기

                <nav class="bg-gray-800 dark:bg-gray-900 p-4">
    <div class="max-w-6xl mx-auto flex justify-between items-center">
        <h1 class="text-white text-xl font-bold">My Portfolio</h1>
        <ul class="flex space-x-4">
            <li><a href="#" class="text-gray-300 dark:text-gray-400 hover:text-white">Home</a></li>
            <li><a href="#" class="text-gray-300 dark:text-gray-400 hover:text-white">About</a></li>
            <li><a href="#" class="text-gray-300 dark:text-gray-400 hover:text-white">Projects</a></li>
            <li><a href="#" class="text-gray-300 dark:text-gray-400 hover:text-white">Contact</a></li>
        </ul>
    </div>
</nav>

<section class="bg-gray-900 dark:bg-gray-800 p-8">
    <div class="max-w-6xl mx-auto text-center">
        <h2 class="text-white text-2xl font-bold">Featured Projects</h2>
        <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mt-6">
            <div class="bg-gray-700 dark:bg-gray-600 p-4 rounded-lg">
                <img src="https://picsum.photos/200/300?random=1" alt="Project 1" class="rounded-lg w-full" />
                <h3 class="text-white font-semibold mt-2">Project 1</h3>
                <p class="text-gray-300 dark:text-gray-400">Description of Project 1.</p>
            </div>
            <div class="bg-gray-700 dark:bg-gray-600 p-4 rounded-lg">
                <img src="https://picsum.photos/200/300?random=2" alt="Project 2" class="rounded-lg w-full" />
                <h3 class="text-white font-semibold mt-2">Project 2</h3>
                <p class="text-gray-300 dark:text-gray-400">Description of Project 2.</p>
            </div>
            <div class="bg-gray-700 dark:bg-gray-600 p-4 rounded-lg">
                <img src="https://picsum.photos/200/300?random=3" alt="Project 3" class="rounded-lg w-full" />
                <h3 class="text-white font-semibold mt-2">Project 3</h3>
                <p class="text-gray-300 dark:text-gray-400">Description of Project 3.</p>
            </div>
        </div>
    </div>
</section>

<footer class="bg-gray-800 dark:bg-gray-900 p-4 mt-8">
    <div class="max-w-6xl mx-auto text-center">
        <p class="text-gray-300 dark:text-gray-400">© 2023 My Portfolio. All rights reserved.</p>
    </div>
</footer>

Community Forum 구성 요소

머티리얼 디자인 원칙을 활용하는 간단한 커뮤니티 포럼 구성 요소로, 어스 톤 색 구성표와 함께 블로그 콘텐츠 소비에 맞게 조정되고 다크 모드 지원을 위한 반응형 디자인입니다.

열다 미리 보기

                <div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-lg max-w-4xl mx-auto mt-10">
    <h2 class="text-2xl font-semibold text-gray-800 dark:text-white mb-4">Community Forum</h2>
    <div class="mb-4">
        <h3 class="text-xl font-medium text-gray-700 dark:text-gray-300">Latest Discussions</h3>
        <ul class="list-disc list-inside space-y-3 mt-2">
            <li class="p-4 bg-gray-100 dark:bg-gray-700 rounded-md shadow border border-gray-200 dark:border-gray-600">
                <div class="flex items-center">
                    <img class="w-10 h-10 rounded-full mr-3" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User 1">
                    <div>
                        <p class="text-gray-800 dark:text-white font-bold">John Doe</p>
                        <p class="text-gray-600 dark:text-gray-400 text-sm">What are your thoughts on the new features?</p>
                    </div>
                </div>
                <span class="text-sm text-gray-500 dark:text-gray-400">2 hours ago</span>
            </li>
            <li class="p-4 bg-gray-100 dark:bg-gray-700 rounded-md shadow border border-gray-200 dark:border-gray-600">
                <div class="flex items-center">
                    <img class="w-10 h-10 rounded-full mr-3" src="https://randomuser.me/api/portraits/women/32.jpg" alt="User 2">
                    <div>
                        <p class="text-gray-800 dark:text-white font-bold">Jane Smith</p>
                        <p class="text-gray-600 dark:text-gray-400 text-sm">Can someone recommend a good blog to follow?</p>
                    </div>
                </div>
                <span class="text-sm text-gray-500 dark:text-gray-400">3 hours ago</span>
            </li>
        </ul>
    </div>
    <div class="mt-6">
        <h3 class="text-xl font-medium text-gray-700 dark:text-gray-300">Create a new topic</h3>
        <form class="mt-4">
            <textarea class="w-full p-3 border border-gray-300 dark:border-gray-600 rounded-md" rows="4" placeholder="What's on your mind?"></textarea>
            <button class="mt-2 bg-green-500 hover:bg-green-600 dark:bg-green-600 dark:hover:bg-green-700 text-white font-semibold py-2 px-4 rounded-lg focus:outline-none" type="submit">Post</button>
        </form>
    </div>
</div>

Registration Form 구성 요소

회색조 색 구성표와 풍부한 대화형 요소가 있는 미니멀한 등록 양식으로, 반응형이며 Tailwind CSS를 사용한 다크 모드 지원이 포함됩니다.

열다 미리 보기

                <div class="min-h-screen flex items-center justify-center bg-gray-100 dark:bg-gray-900">
    <form class="bg-white dark:bg-gray-800 shadow-md rounded-lg p-8 max-w-md w-full">
        <h2 class="text-2xl font-semibold text-gray-800 dark:text-white mb-6 text-center">Register</h2>
        <div class="mb-4">
            <label class="block text-gray-700 dark:text-gray-300 mb-2" for="name">Full Name</label>
            <input class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 dark:text-gray-300 dark:bg-gray-700 focus:outline-none focus:shadow-outline" id="name" type="text" placeholder="John Doe" required>
        </div>
        <div class="mb-4">
            <label class="block text-gray-700 dark:text-gray-300 mb-2" for="email">Email Address</label>
            <input class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 dark:text-gray-300 dark:bg-gray-700 focus:outline-none focus:shadow-outline" id="email" type="email" placeholder="[email protected]" required>
        </div>
        <div class="mb-4">
            <label class="block text-gray-700 dark:text-gray-300 mb-2" for="password">Password</label>
            <input class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 dark:text-gray-300 dark:bg-gray-700 focus:outline-none focus:shadow-outline" id="password" type="password" placeholder="********" required>
        </div>
        <div class="mb-4">
            <label class="block text-gray-700 dark:text-gray-300 mb-2" for="avatar">Profile Picture</label>
            <div class="flex items-center justify-center mb-4">
                <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="rounded-full w-16 h-16 border-2 border-gray-300 dark:border-gray-600">
            </div>
            <input class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 dark:text-gray-300 dark:bg-gray-700 focus:outline-none focus:shadow-outline" id="avatar" type="url" placeholder="https://picsum.photos/200" required>
        </div>
        <div class="flex items-center justify-between mb-4">
            <label class="flex items-center">
                <input class="mr-2 leading-tight" type="checkbox" required>
                <span class="text-sm text-gray-600 dark:text-gray-300">I agree to the terms and conditions</span>
            </label>
        </div>
        <div class="flex items-center justify-center">
            <button class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline">Register</button>
        </div>
    </form>
</div>

E-commerce 레이아웃 구성 요소

머티리얼 디자인 원칙에 따라 Tailwind CSS로 빌드된 어두운 테마를 지원하는 반응형 전자상거래 레이아웃 구성 요소입니다. 여기에는 탐색 모음, 제품 목록이 있는 기본 콘텐츠 영역 및 바닥글이 포함됩니다. 색 구성표는 파스텔입니다.

열다 미리 보기

                <div class="min-h-screen bg-pastel-100 dark:bg-pastel-900">
  <!-- Navigation Bar -->
  <nav class="bg-pastel-200 dark:bg-pastel-800 shadow">
    <div class="container mx-auto px-6 py-3">
      <div class="flex items-center justify-between">
        <div class="text-pastel-900 dark:text-pastel-100 font-semibold text-xl">My E-commerce</div>
        <div class="flex items-center space-x-4">
          <a href="#" class="text-pastel-900 dark:text-pastel-100 hover:text-pastel-700 dark:hover:text-pastel-300">Home</a>
          <a href="#" class="text-pastel-900 dark:text-pastel-100 hover:text-pastel-700 dark:hover:text-pastel-300">Shop</a>
          <a href="#" class="text-pastel-900 dark:text-pastel-100 hover:text-pastel-700 dark:hover:text-pastel-300">Cart</a>
        </div>
      </div>
    </div>
  </nav>

  <!-- Main Content Area -->
  <main class="container mx-auto mt-6 px-6 py-3">
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
      <!-- Product Card (Repeat this block for multiple products) -->
      <div class="bg-white dark:bg-pastel-800 rounded-lg shadow-lg overflow-hidden">
        <img class="w-full h-48 object-cover" src="https://picsum.photos/seed/product1/300/200" alt="Product Image">
        <div class="p-4">
          <h3 class="text-pastel-900 dark:text-pastel-100 font-semibold text-lg mb-2">Product Name</h3>
          <p class="text-pastel-700 dark:text-pastel-300 text-sm mb-4">This is a brief description of the product.</p>
          <div class="flex items-center justify-between">
            <span class="text-pastel-900 dark:text-pastel-100 font-bold text-xl">$19.99</span>
            <button class="bg-pastel-500 hover:bg-pastel-600 text-white font-bold py-2 px-4 rounded">Add to Cart</button>
          </div>
        </div>
      </div>
      <!-- End Product Card -->

      <!-- Example of another product card -->
       <div class="bg-white dark:bg-pastel-800 rounded-lg shadow-lg overflow-hidden">
        <img class="w-full h-48 object-cover" src="https://picsum.photos/seed/product2/300/200" alt="Product Image">
        <div class="p-4">
          <h3 class="text-pastel-900 dark:text-pastel-100 font-semibold text-lg mb-2">Another Product</h3>
          <p class="text-pastel-700 dark:text-pastel-300 text-sm mb-4">This is a brief description of another product.</p>
          <div class="flex items-center justify-between">
            <span class="text-pastel-900 dark:text-pastel-100 font-bold text-xl">$25.00</span>
            <button class="bg-pastel-500 hover:bg-pastel-600 text-white font-bold py-2 px-4 rounded">Add to Cart</button>
          </div>
        </div>
      </div>
    </div>
  </main>

  <!-- Footer -->
  <footer class="bg-pastel-200 dark:bg-pastel-800 mt-6 py-6">
    <div class="container mx-auto text-center text-pastel-900 dark:text-pastel-100">
      <p>&copy; 2023 My E-commerce. All rights reserved.</p>
    </div>
  </footer>
</div>

User Mentions 구성 요소

비즈니스 웹 사이트를 위해 설계된 어두운 테마를 지원하는 반응형 사용자 언급 구성 요소입니다. Tailwind CSS 및 흙색 색 구성표를 사용하는 마이크로 인터랙션이 특징입니다.

열다 미리 보기

                <div class="bg-gray-100 dark:bg-gray-800 p-6 rounded-md">
  <div class="flex items-center space-x-4">
    <img class="w-10 h-10 rounded-full ring-2 ring-amber-600" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar">
    <div class="flex-1">
      <p class="text-gray-800 dark:text-gray-200 font-semibold">John Doe</p>
      <p class="text-gray-600 dark:text-gray-400 text-sm">Mentioned you in a comment:</p>
      <p class="text-gray-700 dark:text-gray-300 mt-1">"Hey, check out this new feature!"</p>
    </div>
    <button class="text-amber-600 hover:text-amber-800 dark:text-amber-400 dark:hover:text-amber-600 transition-colors duration-200 ease-in-out">
      <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 8a6 6 0 01-7.743 5.743L10 14l-1 1-1 1H3v2H2v2h10l2-2 1-1 1.573-1.573A6 6 0 0118 8zM4.293 15.707L10 9.999V7a1 1 0 012 0v.001h1a1 1 0 011 1v3l3.707 3.707A1 1 0 0117 17H5a1 1 0 01-.707-1.707z" clip-rule="evenodd" />
      </svg>
    </button>
  </div>
  <div class="flex justify-end mt-4 space-x-2">
    <button class="px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 bg-gray-200 dark:bg-gray-700 rounded-md hover:bg-gray-300 dark:hover:bg-gray-600 transition-colors duration-200 ease-in-out">Reply</button>
    <button class="px-4 py-2 text-sm font-medium text-white bg-amber-600 rounded-md hover:bg-amber-700 transition-colors duration-200 ease-in-out">View Post</button>
  </div>
</div>

1 ... 246 247 248 249 250 ... 315

검색 구성 요소

카테고리

모든 구성 요소