모든 구성 요소

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

OAuth 버튼 구성 요소

레트로/빈티지/80년대/90년대 테마의 OAuth 버튼 구성 요소는 유사한 색 구성표, 적당한 복잡성, 소셜 미디어용, 다크 모드를 지원하는 반응형 디자인을 제공합니다. JS는 없으며 Tailwind 클래스가있는 HTML 만 있습니다.

열다 미리 보기

                <div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900 p-4">
  <div class="w-full max-w-sm bg-white dark:bg-gray-800 rounded-lg shadow-md p-6">
    <h2 class="text-2xl font-bold text-center text-gray-800 dark:text-white mb-6">Connect with:</h2>
    <div class="space-y-4">
      <button class="flex items-center justify-center w-full px-4 py-2 border border-gray-300 dark:border-gray-700 rounded-md shadow-sm text-sm font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600 transition duration-150 ease-in-out">
        <svg class="w-4 h-4 mr-2" fill="currentColor" viewBox="0 0 20 20">
          <path d="M6.29 18.29c-.89 0-1.6-.72-1.6-1.6V3.31c0-.89.72-1.6 1.6-1.6h7.42c.89 0 1.6.72 1.6 1.6v13.38c0 .89-.72 1.6-1.6 1.6H6.29zm0-14.78v13.38h7.42V3.51H6.29zM10 14.5c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2z"/>
        </svg>
        Sign in with Google
      </button>
      <button class="flex items-center justify-center w-full px-4 py-2 border border-gray-300 dark:border-gray-700 rounded-md shadow-sm text-sm font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600 transition duration-150 ease-in-out">
        <svg class="w-4 h-4 mr-2" fill="currentColor" viewBox="0 0 20 20">
          <path d="M18 3.001A1.997 1.997 0 0016 2c-1.1 0-2 .9-2 2v1h-3V4c0-1.1-.9-2-2-2S7 2.9 7 4v1H4c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h3v-1c0-1.1.9-2 2-2s2 .9 2 2v1h3c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2h-3V4c0-1.1.9-2 2-2s2 .9 2 2v1h-3V4c0-1.1-.9-2-2-2S7 2.9 7 4v1h-3V4c0-1.1-.9-2-2-2S2 2.9 2 4v3h1c1.1 0 2 .9 2 2s-.9 2-2 2H2v3h1c1.1 0 2 .9 2 2s-.9 2-2 2H2v1h3c1.1 0 2-.9 2-2s.9-2 2-2v1h3c1.1 0 2-.9 2-2s-.9-2-2-2v1h3c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2h-3z"/>
        </svg>
        Sign in with Twitter
      </button>
      <button class="flex items-center justify-center w-full px-4 py-2 border border-gray-300 dark:border-gray-700 rounded-md shadow-sm text-sm font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600 transition duration-150 ease-in-out">
        <svg class="w-4 h-4 mr-2" fill="currentColor" viewBox="0 0 20 20">
          <path d="M10 0C4.477 0 0 4.477 0 10c0 4.991 3.643 9.185 8.438 9.87a.866.866 0 00.502-.5c.136-.97-.06-2.014-.11-2.355-.058-.387-.267-1.178 0-2.013.262-.834 1.496-.53 1.496-.53.636.443 1.486.67 2.021.96.535.289.774.85.774 1.62 0 1.18-.854 2.567-2.2 2.978-.356.105-.704.156-1.052.156-.983 0-1.94-.344-2.797-.98-1.627-1.203-2.103-3.31-.56-5.04 1.542-1.73 3.982-2.25 5.513-.97.333.27.643.616.92 1.01-.283.13-.572.248-.85.368-.578.248-1.19-.092-1.546-.408-.2.4-.55.76-.953 1.05-.5.36-1.073.59-1.642.64-.568.05-1.12-.093-1.56-.378-.44-.286-.68-1.043-.46-1.57.22-.524.87-.877 1.35-.877.642 0 1.195.21 1.66.612.464.403.783.97.953 1.57.17.6.217 1.216.147 1.838-.07.62.017 1.24-.116 1.85-.93 4.66-3.75 6.89-8.562 6.89-5.523 0-10-4.477-10-10z"/>
        </svg>
        Sign in with GitHub
      </button>
    </div>
  </div>
</div>

소셜 미디어 데이터 테이블 단색 3D simple

어두운 테마를 지원하는 소셜 미디어 인터페이스를 위한 간단한 단색 3D 디자인 데이터 테이블 구성 요소입니다.

열다 미리 보기

                <div class="container mx-auto p-4 bg-gray-200 dark:bg-gray-800 text-gray-900 dark:text-gray-100 rounded-lg shadow-lg overflow-hidden">  <div class="overflow-x-auto">    <table class="min-w-full bg-gray-300 dark:bg-gray-700 rounded-lg">      <thead>        <tr class="bg-gray-400 dark:bg-gray-600 text-gray-800 dark:text-gray-200 uppercase text-sm leading-normal">          <th class="py-3 px-6 text-left">User</th>          <th class="py-3 px-6 text-left">Activity</th>          <th class="py-3 px-6 text-center">Likes</th>          <th class="py-3 px-6 text-center">Comments</th>        </tr>      </thead>      <tbody class="text-gray-800 dark:text-gray-200 text-sm font-light">        <tr class="border-b border-gray-200 dark:border-gray-700 hover:bg-gray-100 dark:hover:bg-gray-900">          <td class="py-3 px-6 text-left whitespace-nowrap">            <div class="flex items-center">              <div class="mr-2">                <img class="w-6 h-6 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar"/>              </div>              <span>John Doe</span>            </div>          </td>          <td class="py-3 px-6 text-left">Posted a photo</td>          <td class="py-3 px-6 text-center">125</td>          <td class="py-3 px-6 text-center">36</td>        </tr>        <tr class="border-b border-gray-200 dark:border-gray-700 hover:bg-gray-100 dark:hover:bg-gray-900">          <td class="py-3 px-6 text-left whitespace-nowrap">            <div class="flex items-center">              <div class="mr-2">                <img class="w-6 h-6 rounded-full" src="https://randomuser.me/api/portraits/women/2.jpg" alt="User Avatar"/>              </div>              <span>Jane Smith</span>            </div>          </td>          <td class="py-3 px-6 text-left">Commented on a post</td>          <td class="py-3 px-6 text-center">88</td>          <td class="py-3 px-6 text-center">12</td>        </tr>        <tr class="border-b border-gray-200 dark:border-gray-700 hover:bg-gray-100 dark:hover:bg-gray-900">          <td class="py-3 px-6 text-left whitespace-nowrap">            <div class="flex items-center">              <div class="mr-2">                <img class="w-6 h-6 rounded-full" src="https://randomuser.me/api/portraits/men/3.jpg" alt="User Avatar"/>              </div>              <span>Peter Jones</span>            </div>          </td>          <td class="py-3 px-6 text-left">Shared a link</td>          <td class="py-3 px-6 text-center">54</td>          <td class="py-3 px-6 text-center">7</td>        </tr>        <tr class="border-b border-gray-200 dark:border-gray-700 hover:bg-gray-100 dark:hover:bg-gray-900">          <td class="py-3 px-6 text-left whitespace-nowrap">            <div class="flex items-center">              <div class="mr-2">                <img class="w-6 h-6 rounded-full" src="https://randomuser.me/api/portraits/women/4.jpg" alt="User Avatar"/>              </div>              <span>Mary Williams</span>            </div>          </td>          <td class="py-3 px-6 text-left">Liked a photo</td>          <td class="py-3 px-6 text-center">201</td>          <td class="py-3 px-6 text-center">45</td>        </tr>      </tbody>    </table>  </div></div>

이미지 라이트박스 구성 요소

미니멀리스트 이미지 라이트박스 컴포넌트는 반응형 디자인과 대시보드 목적을 위한 어두운 테마를 지원합니다. 이미지에 picsum.photos를 사용합니다.

열다 미리 보기

                <div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
  <div class="grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4">
    <!-- Image 1 -->
    <div class="relative group">
      <img src="https://picsum.photos/seed/1/300/200" alt="Image 1" class="object-cover w-full h-48 rounded-lg">
      <div class="absolute inset-0 flex items-center justify-center bg-black bg-opacity-50 opacity-0 group-hover:opacity-100 transition-opacity">
        <button class="text-white text-lg font-bold">View</button>
      </div>
    </div>

    <!-- Image 2 -->
    <div class="relative group">
      <img src="https://picsum.photos/seed/2/300/200" alt="Image 2" class="object-cover w-full h-48 rounded-lg">
      <div class="absolute inset-0 flex items-center justify-center bg-black bg-opacity-50 opacity-0 group-hover:opacity-100 transition-opacity">
        <button class="text-white text-lg font-bold">View</button>
      </div>
    </div>

    <!-- Image 3 -->
    <div class="relative group">
      <img src="https://picsum.photos/seed/3/300/200" alt="Image 3" class="object-cover w-full h-48 rounded-lg">
      <div class="absolute inset-0 flex items-center justify-center bg-black bg-opacity-50 opacity-0 group-hover:opacity-100 transition-opacity">
        <button class="text-white text-lg font-bold">View</button>
      </div>
    </div>

    <!-- Image 4 -->
    <div class="relative group">
      <img src="https://picsum.photos/seed/4/300/200" alt="Image 4" class="object-cover w-full h-48 rounded-lg">
      <div class="absolute inset-0 flex items-center justify-center bg-black bg-opacity-50 opacity-0 group-hover:opacity-100 transition-opacity">
        <button class="text-white text-lg font-bold">View</button>
      </div>
    </div>
  </div>

  <!-- Lightbox Overlay (hidden by default) -->
  <div id="lightbox-overlay" class="fixed inset-0 flex items-center justify-center bg-black bg-opacity-75 hidden">
    <div class="relative">
      <img id="lightbox-image" src="" alt="Lightbox Image" class="max-w-3xl max-h-screen">
      <button id="close-lightbox" class="absolute top-4 right-4 text-white text-2xl font-bold">&times;</button>
    </div>
  </div>
</div>

바닥글 구성 요소

소셜 미디어용으로 설계된 스큐어모피즘 스타일, 어스 톤 색 구성표 및 어두운 테마 지원을 갖춘 반응형 바닥글 구성 요소."

열다 미리 보기

                <html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Footer Component</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css" rel="stylesheet">
</head>
<body class="bg-gray-100 dark:bg-gray-900">

<footer class="bg-gradient-to-b from-yellow-800 to-yellow-900 text-gray-200 py-8 dark:from-gray-800 dark:to-gray-900">
  <div class="container mx-auto px-4 flex flex-col items-center">

    <!-- Social Media Links (Skeuomorphism style) -->
    <div class="flex space-x-6 mb-6">
      <a href="#" class="text-gray-300 hover:text-white transition duration-300 ease-in-out transform hover:scale-110
                        bg-gradient-to-br from-yellow-700 to-yellow-800 dark:from-gray-700 dark:to-gray-800
                        px-4 py-2 rounded-lg shadow-md hover:shadow-lg">
        Facebook
      </a>
      <a href="#" class="text-gray-300 hover:text-white transition duration-300 ease-in-out transform hover:scale-110
                        bg-gradient-to-br from-yellow-700 to-yellow-800 dark:from-gray-700 dark:to-gray-800
                        px-4 py-2 rounded-lg shadow-md hover:shadow-lg">
        Twitter
      </a>
      <a href="#" class="text-gray-300 hover:text-white transition duration-300 ease-in-out transform hover:scale-110
                        bg-gradient-to-br from-yellow-700 to-yellow-800 dark:from-gray-700 dark:to-gray-800
                        px-4 py-2 rounded-lg shadow-md hover:shadow-lg">
        Instagram
      </a>
    </div>

    <!-- Copyright Information -->
    <p class="text-sm text-gray-400 dark:text-gray-600">& Animations Copyright &copy; 2023 Your Company. All rights reserved.</p>

  </div>
</footer>

</body>
</html>

코멘트섹션

반응형, 어두운 테마와 호환되는 댓글 섹션 구성 요소는 미니멀리스트/플랫 디자인, 트라이어딕 색 구성표 및 복잡한 상호 작용 요소를 갖춘 전자 상거래를 위한 것으로, Tailwind CSS로 제작되었습니다. 데모 이미지에는 picsum.photos 및 randomuser.me 를 사용합니다.

열다 미리 보기

                <div class="container mx-auto p-4 dark:bg-gray-900 dark:text-white">
  <h2 class="text-2xl font-bold mb-6">Customer Reviews</h2>

  </div>

Comments Section 구성 요소

Neumorphism 디자인, 트라이어딕 색 구성표 및 소셜 미디어에 대한 중간 수준의 복잡성을 가진 댓글 섹션 구성 요소로, 반응형 디자인 및 어두운 테마 지원과 함께 Tailwind CSS를 사용하여 구현되었습니다.

열다 미리 보기

                
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Comments Section</title>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css" rel="stylesheet">
    <style>
        .neumorphism {
            box-shadow: 5px 5px 10px #cbced1, -5px -5px 10px #ffffff;
        }
        .dark .neumorphism {
            box-shadow: 5px 5px 10px #1a1a1a, -5px -5px 10px #333333;
        }
        .neumorphism-inset {
            box-shadow: inset 5px 5px 10px #cbced1, inset -5px -5px 10px #ffffff;
        }
        .dark .neumorphism-inset {
            box-shadow: inset 5px 5px 10px #1a1a1a, inset -5px -5px 10px #333333;
        }
    </style>
</head>
<body class="bg-gray-200 dark:bg-gray-800 transition duration-300">
    <div class="container mx-auto p-4">
        <div class="bg-white dark:bg-gray-700 rounded-lg p-6 neumorphism transition duration-300">
            <h2 class="text-2xl font-bold mb-4 text-center text-gray-800 dark:text-white">Comments</h2>

            <!-- Comment Input -->
            <div class="mb-6">
                <textarea class="w-full p-3 rounded-lg bg-gray-100 dark:bg-gray-600 text-gray-800 dark:text-white neumorphism-inset focus:outline-none focus:ring-2 focus:ring-blue-400 dark:focus:ring-blue-600 transition duration-300" rows="4" placeholder="Add a comment..."></textarea>
                <button class="mt-3 w-full bg-blue-500 text-white py-2 rounded-lg hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-400 neumorphism transition duration-300 dark:bg-blue-700 dark:hover:bg-blue-800 dark:focus:ring-blue-600">Post Comment</button>
            </div>

            <!-- Comment List -->
            <div class="space-y-4">
                <!-- Single Comment -->
                <div class="bg-gray-100 dark:bg-gray-600 p-4 rounded-lg neumorphism transition duration-300">
                    <div class="flex items-start space-x-4">
                        <img class="w-10 h-10 rounded-full object-cover neumorphism" src="https://randomuser.me/api/portraits/women/68.jpg" alt="User Avatar">
                        <div class="flex-1">
                            <div class="flex justify-between items-center">
                                <span class="font-semibold text-gray-800 dark:text-white">Sarah Johnson</span>
                                <span class="text-sm text-gray-500 dark:text-gray-300">2 hours ago</span>
                            </div>
                            <p class="text-gray-700 dark:text-gray-200 mt-1">This is a great post! Very informative.</p>
                            <div class="flex space-x-4 mt-3">
                                <button class="text-gray-600 dark:text-gray-300 hover:text-blue-500 dark:hover:text-blue-400 transition duration-300">Like</button>
                                <button class="text-gray-600 dark:text-gray-300 hover:text-blue-500 dark:hover:text-blue-400 transition duration-300">Reply</button>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Single Comment -->
                <div class="bg-gray-100 dark:bg-gray-600 p-4 rounded-lg neumorphism transition duration-300">
                    <div class="flex items-start space-x-4">
                        <img class="w-10 h-10 rounded-full object-cover neumorphism" src="https://randomuser.me/api/portraits/men/76.jpg" alt="User Avatar">
                        <div class="flex-1">
                            <div class="flex justify-between items-center">
                                <span class="font-semibold text-gray-800 dark:text-white">David Miller</span>
                                <span class="text-sm text-gray-500 dark:text-gray-300">1 hour ago</span>
                            </div>
                            <p class="text-gray-700 dark:text-gray-200 mt-1">I agree! Looking forward to more content like this.</p>
                             <div class="flex space-x-4 mt-3">
                                <button class="text-gray-600 dark:text-gray-300 hover:text-blue-500 dark:hover:text-blue-400 transition duration-300">Like</button>
                                <button class="text-gray-600 dark:text-gray-300 hover:text-blue-500 dark:hover:text-blue-400 transition duration-300">Reply</button>
                            </div>
                        </div>
                    </div>
                </div>
                
                 <!-- Reply Example -->
                 <div class="ml-14 bg-gray-200 dark:bg-gray-700 p-4 rounded-lg neumorphism transition duration-300">
                    <div class="flex items-start space-x-4">
                        <img class="w-8 h-8 rounded-full object-cover neumorphism" src="https://randomuser.me/api/portraits/women/45.jpg" alt="User Avatar">
                        <div class="flex-1">
                            <div class="flex justify-between items-center">
                                <span class="font-semibold text-gray-800 dark:text-white">Emily Clark</span>
                                <span class="text-sm text-gray-500 dark:text-gray-300">45 minutes ago</span>
                            </div>
                            <p class="text-gray-700 dark:text-gray-200 mt-1">Thanks David! Glad you liked it.</p>
                             <div class="flex space-x-4 mt-3">
                                <button class="text-gray-600 dark:text-gray-300 hover:text-blue-500 dark:hover:text-blue-400 transition duration-300">Like</button>
                                <button class="text-gray-600 dark:text-gray-300 hover:text-blue-500 dark:hover:text-blue-400 transition duration-300">Reply</button>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>
</body>
</html>

뉴모피즘(Neumorphism) 디자인, 트라이어드 색상 구성표(예: 연한 파란색, 분홍색, 노란색-주황색) 및 소셜 미디어 애플리케이션을 위한 중간 정도의 복잡성을 갖춘 360° 뷰어 구성 요소입니다. 이 구성 요소는 반응형이고, Tailwind 클래스를 사용하여 다크 모드를 지원하고, 이미지에는 picsum.photos를 사용하고 아바타에는 randomuser.me 를 사용합니다. JavaScript가 필요하지 않습니다.

열다 미리 보기

                <div class="flex justify-center items-center min-h-screen bg-gray-200 dark:bg-gray-800 p-4">

  <!-- Neumorphic Container -->
  <div class="relative w-full max-w-sm bg-gray-200 dark:bg-gray-700 rounded-xl shadow-xl p-6
              dark:shadow-[7px_7px_15px_#1c1c1c,-7px_-7px_15px_#343434]
              shadow-[7px_7px_15px_#a3a3a3,-7px_-7px_15px_#ffffff] md:max-w-md">

    <!-- 360 Viewer Placeholder (using an image for demonstration) -->
    <!-- In a real application, this would be a canvas or iframe with a 360 viewer library -->
    <div class="relative w-full h-64 rounded-lg overflow-hidden
                shadow-inner dark:shadow-[inset_5px_5px_10px_#1c1c1c,inset_-5px_-5px_10px_#343434]
                shadow-[inset_5px_5px_10px_#a3a3a3,inset_-5px_-5px_10px_#ffffff]">
      <img src="https://picsum.photos/600/400" alt="360 View Placeholder" class="w-full h-full object-cover">
      <!-- Example Triadic Colors for potential UI elements layered over the image -->
      <div class="absolute top-2 right-2 w-8 h-8 bg-blue-400 dark:bg-blue-600 rounded-full opacity-75"></div>
      <div class="absolute bottom-2 left-2 w-8 h-8 bg-pink-400 dark:bg-pink-600 rounded-full opacity-75"></div>
      <div class="absolute bottom-2 right-2 w-8 h-8 bg-yellow-500 dark:bg-yellow-700 rounded-full opacity-75"></div>
    </div>

    <!-- Component Title -->
    <div class="mt-6 text-center text-gray-700 dark:text-gray-300 text-xl font-semibold">
      Interactive 360° View
    </div>

    <!-- User Avatar and Info -->
    <div class="flex items-center justify-center mt-4">
      <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-2 border-blue-400 dark:border-blue-600">
      <div class="ml-3 text-gray-600 dark:text-gray-400">
        <p class="font-medium">John Doe</p>
        <p class="text-sm">Exploring the view</p>
      </div>
    </div>

    <!-- Interactive Buttons Placeholder -->
    <div class="flex justify-around mt-6">
      <button class="p-3 rounded-full bg-gray-200 dark:bg-gray-700
                     shadow-md dark:shadow-[5px_5px_10px_#1c1c1c,-5px_-5px_10px_#343434]
                     shadow-[5px_5px_10px_#a3a3a3,-5px_-5px_10px_#ffffff]
                     text-gray-700 dark:text-gray-300 hover:shadow-inner
                     dark:hover:shadow-[inset_2px_2px_5px_#1c1c1c,inset_-2px_-2px_5px_#343434]
                     hover:shadow-[inset_2px_2px_5px_#a3a3a3,inset_-2px_-2px_5px_#ffffff]
                     transition duration-200">
        <!-- Example Icon - Replace with a real icon -->
        <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="M15 10l4.555-4.555A1.5 1.5 0 0017.444 ..."/>
        </svg>
      </button>
      <button class="p-3 rounded-full bg-gray-200 dark:bg-gray-700
                     shadow-md dark:shadow-[5px_5px_10px_#1c1c1c,-5px_-5px_10px_#343434]
                     shadow-[5px_5px_10px_#a3a3a3,-5px_-5px_10px_#ffffff]
                     text-gray-700 dark:text-gray-300 hover:shadow-inner
                     dark:hover:shadow-[inset_2px_2px_5px_#1c1c1c,inset_-2px_-2px_5px_#343434]
                     hover:shadow-[inset_2px_2px_5px_#a3a3a3,inset_-2px_-2px_5px_#ffffff]
                     transition duration-200">
        <!-- Example Icon - Replace with a real icon -->
        <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 6v6m0 0v6m0-6h6m-6 0H6"/>
        </svg>
      </button>
    </div>

  </div>

</div>

헤더 구성 요소

3D 디자인, 파스텔 색 구성표, 복잡한 복잡성, 대시보드 목적, 반응형 디자인 및 어두운 테마 지원을 제공하는 Tailwind 헤더 구성 요소

열다 미리 보기

                <header class="relative w-full py-4 dark:bg-gray-800">
  <div class="container mx-auto flex justify-between items-center px-4">
    <div class="text-2xl font-bold text-gray-800 dark:text-white relative">
      Dashboard
      <span class="absolute top-0 right-0 transform translate-x-1 -translate-y-1 w-3 h-3 bg-purple-300 rounded-full animate-ping"></span>
      <span class="absolute top-0 right-0 transform translate-x-1 -translate-y-1 w-3 h-3 bg-purple-500 rounded-full"></span>
    </div>
    <nav class="hidden md:flex space-x-6">
      <a href="#" class="text-gray-600 dark:text-gray-300 hover:text-purple-600 dark:hover:text-purple-400 transition duration-300 ease-in-out transform hover:scale-105">Overview</a>
      <a href="#" class="text-gray-600 dark:text-gray-300 hover:text-purple-600 dark:hover:text-purple-400 transition duration-300 ease-in-out transform hover:scale-105">Analytics</a>
      <a href="#" class="text-gray-600 dark:text-gray-300 hover:text-purple-600 dark:hover:text-purple-400 transition duration-300 ease-in-out transform hover:scale-105">Reports</a>
      <a href="#" class="text-gray-600 dark:text-gray-300 hover:text-purple-600 dark:hover:text-purple-400 transition duration-300 ease-in-out transform hover:scale-105">Settings</a>
    </nav>
    <div class="flex items-center space-x-4">
      <div class="relative">
        <input type="text" placeholder="Search..." class="px-4 py-2 rounded-full bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-white focus:outline-none focus:ring-2 focus:ring-purple-400 transition duration-300 ease-in-out">
        <span class="absolute inset-y-0 right-0 pr-3 flex items-center text-gray-600 dark:text-gray-300">
          <svg class="h-5 w-5" 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="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg>
        </span>
      </div>
      <button class="p-2 rounded-full bg-gray-200 dark:bg-gray-700 text-gray-600 dark:text-gray-300 hover:bg-purple-200 dark:hover:bg-purple-600 transition duration-300 ease-in-out">
        <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="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0a6 6 0 00-6 0m6 0h-6"></path></svg>
      </button>
      <img class="h-10 w-10 rounded-full border-2 border-purple-400" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
    </div>
    <button class="md:hidden text-gray-600 dark:text-gray-300">
      <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 12h16M4 18h16"></path></svg>
    </button>
  </div>
</header>

로더 구성 요소

다크 모드 소셜 미디어 인터페이스를 위해 설계된 간단한 로더 구성 요소는 단색 색 구성표를 사용합니다.

열다 미리 보기

                <div class="flex items-center justify-center min-h-screen bg-gray-900 dark:bg-gray-800">
    <div class="flex">
        <div class="loader bg-gray-600 dark:bg-gray-400 rounded-full w-16 h-16 animate-bounce mr-4"></div>
        <div class="loader bg-gray-600 dark:bg-gray-400 rounded-full w-16 h-16 animate-bounce"></div>
    </div>
    <div class="flex flex-col items-center ml-4">
        <h2 class="text-gray-200 dark:text-gray-100 text-xl mb-2">Loading...</h2>
        <div class="flex space-x-2">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-12 h-12 rounded-full border-2 border-gray-600 dark:border-gray-400">
            <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="Avatar" class="w-12 h-12 rounded-full border-2 border-gray-600 dark:border-gray-400">
        </div>
    </div>
</div>
<style>
    @keyframes bounce {
        0%, 100% {
            transform: translateY(0);
        }
        50% {
            transform: translateY(-15px);
        }
    }
</style>

로더 구성 요소

로더 컴포넌트(Loaders Component)는 블로그 또는 콘텐츠 중심의 웹사이트를 위해 트라이어딕 색 구성표를 사용하는 스큐어모픽 스타일로 디자인되었습니다. 콘텐츠 소비에 적합한 간단한 레이아웃이 특징이며 다크 모드 지원을 통합합니다.

열다 미리 보기

                <div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
    <div class="loader">
        <div class="rounded-lg border-4 border-blue-500 dark:border-blue-300 h-16 w-16 animate-spin"></div>
        <div class="mt-5 text-center">
            <img class="rounded-full h-12 w-12 mx-auto" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar" />
            <div class="text-lg font-bold text-gray-800 dark:text-gray-200">Loading Content...</div>
        </div>
    </div>
</div>
<style>
    .loader {
        background: linear-gradient(145deg, #e6e6e6, #f0f0f0);
        border-radius: 15px;
        box-shadow: 20px 20px 60px #d1d1d1,
                    -20px -20px 60px #ffffff;
        padding: 20px;
    }
</style>

1 ... 116 117 118 119 120 ... 242

카테고리

모든 구성 요소

OAuth 버튼 구성 요소

소셜 미디어 데이터 테이블 단색 3D simple

이미지 라이트박스 구성 요소

바닥글 구성 요소

코멘트섹션

Comments Section 구성 요소

Neumorphic 360 Viewer 구성 요소

헤더 구성 요소

로더 구성 요소

로더 구성 요소