검색 구성 요소

모든 구성 요소

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

헤더 구성 요소

마이크로 인터랙션과 생생한 색상이 있는 대시보드를 위한 반응형 헤더 구성 요소로, 어두운 테마를 지원합니다.

                <header class="bg-blue-600 dark:bg-gray-800 p-4 flex justify-between items-center transition-all duration-300">
    <div class="flex items-center space-x-4">
        <img src="https://picsum.photos/40/40" alt="Logo" class="rounded-full h-10 w-10 hover:scale-110 transition-transform duration-300">
        <h1 class="text-white text-xl font-bold hover:text-blue-300 transition-colors duration-300">Dashboard</h1>
    </div>
    <nav class="hidden md:flex space-x-6">
        <a href="#" class="text-white hover:text-blue-300 transition-colors duration-300">Home</a>
        <a href="#" class="text-white hover:text-blue-300 transition-colors duration-300">Reports</a>
        <a href="#" class="text-white hover:text-blue-300 transition-colors duration-300">Settings</a>
    </nav>
    <div class="flex items-center space-x-4">
        <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="rounded-full h-10 w-10 border-2 border-white hover:border-blue-300 transition-all duration-300">
        <button class="bg-blue-700 dark:bg-blue-500 text-white px-4 py-2 rounded-lg hover:bg-blue-500 transition-colors duration-300">Logout</button>
    </div>
</header>

토스트 알림

반응형, 어두운 테마와 호환되는 Toast Notifications Components는 보색 구성표를 사용하는 미니멀리스트/플랫 디자인의 전자 상거래를 위한 구성 요소입니다.

열다 미리 보기

                <div class="fixed bottom-4 right-4 space-y-2">

  <!-- Success Toast (Example) -->
  <div class="bg-green-500 text-white px-4 py-3 rounded-lg shadow-md dark:bg-green-700">
    <div class="flex items-center justify-between">
      <div class="flex items-center">
        <svg class="h-6 w-6 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
        </svg>
        <div>
          <p class="font-bold">Success!</p>
          <p class="text-sm">Item added to cart successfully.</p>
        </div>
      </div>
    </div>
  </div>

  <!-- Error Toast (Example) -->
  <div class="bg-red-500 text-white px-4 py-3 rounded-lg shadow-md dark:bg-red-700">
    <div class="flex items-center justify-between">
      <div class="flex items-center">
        <svg class="h-6 w-6 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l7-7m0 0l7 7m0-7l-7 7m7-7L7 7"></path>
        </svg>
        <div>
          <p class="font-bold">Error!</p>
          <p class="text-sm">Failed to add item to cart.</p>
        </div>
      </div>
    </div>
  </div>

    <!-- Info Toast (Example) -->
  <div class="bg-blue-500 text-white px-4 py-3 rounded-lg shadow-md dark:bg-blue-700">
    <div class="flex items-center justify-between">
      <div class="flex items-center">
       <svg class="h-6 w-6 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4H12a9 9 0 007.562-3.438 9 9 0 000-10.124A9 9 0 0012 3a9 9 0 00-7.562 3.438A9 9 0 004.062 12a9 9 0 003.438 7.562z"></path>
        </svg>
        <div>
          <p class="font-bold">Info!</p>
          <p class="text-sm">Your item is being processed.</p>
        </div>
      </div>
    </div>
  </div>


</div>

Feedback Components 구성 요소

전자 상거래를 위해 설계된 미니멀한 피드백 구성 요소로, 부드러운 파스텔 색상, 반응형 디자인 및 어두운 테마 지원을 특징으로 합니다. 구성 요소에는 입력 필드가 있는 피드백 양식, 등급 시스템 및 제출 버튼이 포함되어 있으며 모두 Tailwind CSS로 스타일이 지정되었습니다.

열다 미리 보기

                <div class="max-w-md mx-auto p-6 bg-white rounded-lg shadow-md dark:bg-gray-800">
    <h2 class="text-2xl font-semibold text-gray-800 dark:text-gray-200 mb-4">Your Feedback Matters!</h2>
    <p class="text-gray-600 dark:text-gray-400 mb-6">We value your opinion. Please leave your feedback below!</p>
    <form class="space-y-4">
        <div>
            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300" for="name">Name</label>
            <input id="name" type="text" placeholder="Your Name" class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-pink-500 dark:bg-gray-700 dark:border-gray-600 dark:text-gray-200" required />
        </div>
        <div>
            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300" for="email">Email</label>
            <input id="email" type="email" placeholder="Your Email" class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-pink-500 dark:bg-gray-700 dark:border-gray-600 dark:text-gray-200" required />
        </div>
        <div>
            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300" for="rating">Rating</label>
            <select id="rating" class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-pink-500 dark:bg-gray-700 dark:border-gray-600 dark:text-gray-200" required>
                <option value="5">⭐⭐⭐⭐⭐</option>
                <option value="4">⭐⭐⭐⭐</option>
                <option value="3">⭐⭐⭐</option>
                <option value="2">⭐⭐</option>
                <option value="1">⭐</option>
            </select>
        </div>
        <div>
            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300" for="message">Message</label>
            <textarea id="message" rows="4" placeholder="Your Feedback" class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-pink-500 dark:bg-gray-700 dark:border-gray-600 dark:text-gray-200" required></textarea>
        </div>
        <div>
            <button type="submit" class="w-full py-2 px-4 bg-pink-500 text-white font-semibold rounded-md shadow-md hover:bg-pink-600 focus:outline-none focus:ring-2 focus:ring-pink-500 dark:bg-pink-600 dark:hover:bg-pink-700">Submit Feedback</button>
        </div>
    </form>
    <div class="mt-6 flex items-center space-x-2">
        <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="h-10 w-10 rounded-full">
        <span class="text-gray-600 dark:text-gray-400">John Doe</span>
    </div>

    <div class="mt-4 text-sm text-gray-500 dark:text-gray-400">
        <p>Feedback received on: <span class="text-gray-800 dark:text-gray-200">10/23/2023</span></p>
    </div>
</div>

뉴모피즘LikeReactionButtons

Responsive Like/Reaction Buttons 어두운 테마 지원 및 Neumorphism 디자인이 있는 블로그/콘텐츠를 위한 구성 요소입니다.

열다 미리 보기

                <div class="flex items-center justify-center p-4 dark:bg-gray-900">
  <div class="flex space-x-4">
    <!-- Like Button -->
    <button class="flex items-center space-x-2 px-4 py-2 rounded-full text-gray-600 bg-gray-200 dark:text-gray-300 dark:bg-gray-800 shadow-neumorphic-light dark:shadow-neumorphic-dark">
      <svg class="w-5 h-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="M14 10h4.764a2 2 0 011.808 2.808l-7.922 10.604a3 3 0 01-5.371 0L2.428 12.81a2 2 0 011.808-2.808H9M4 5h16a1 1 0 011 1v2a1 1 0 01-1 1H4a1 1 0 01-1-1V6a1 1 0 011-1z"></path></svg>
      <span>Like</span>
    </button>
    <!-- Celebrate Button -->
    <button class="flex items-center space-x-2 px-4 py-2 rounded-full text-gray-600 bg-gray-200 dark:text-gray-300 dark:bg-gray-800 shadow-neumorphic-light dark:shadow-neumorphic-dark">
      <svg class="w-5 h-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 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0-3-4.03-3-9s1.343-9 3-9m0 18v-9"></path></svg>
      <span>Celebrate</span>
    </button>
    <!-- Insightful Button -->
    <button class="flex items-center space-x-2 px-4 py-2 rounded-full text-gray-600 bg-gray-200 dark:text-gray-300 dark:bg-gray-800 shadow-neumorphic-light dark:shadow-neumorphic-dark">
      <svg class="w-5 h-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="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1m-.707 6.364l-.707-.707M12 20h1m-6.364-1.636l-.707.707M3 12H4m-.707-6.364l.707-.707M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m3 0h5M9 7h12a2 2 0 012 2v5a2 2 0 01-2 2H9m0-9v9m4-9v.01"></path></svg>
      <span>Insightful</span>
    </button>
  </div>
</div>

<style>
.shadow-neumorphic-light {
  box-shadow: 5px 5px 10px #a7a7a7, -5px -5px 10px #ffffff;
}
.dark .shadow-neumorphic-dark {
  box-shadow: 5px 5px 10px #1a1a1a, -5px -5px 10px #333333;
}
</style>

Shopping Cart 구성 요소

소셜 미디어 인터페이스에 최적화된 장바구니 구성 요소로, 마이크로 인터랙션, 생생한 색상 및 단순한 레이아웃을 특징으로 합니다. 반응형 디자인과 다크 모드 지원이 포함됩니다.

열다 미리 보기

                <div class="p-4 bg-white dark:bg-gray-800 rounded-lg">
  <h2 class="text-xl font-bold mb-4 text-indigo-600 dark:text-indigo-400">Shopping Cart</h2>
  <div class="space-y-4">
    <!-- Cart Item -->
    <div class="flex items-center justify-between border-b pb-4 border-gray-200 dark:border-gray-700">
      <div class="flex items-center">
        <img src="https://picsum.photos/seed/item1/50/50" alt="Product Image" class="rounded mr-4">
        <div>
          <p class="font-semibold text-gray-800 dark:text-gray-200">Product Name 1</p>
          <p class="text-gray-600 dark:text-gray-400 text-sm">$19.99</p>
        </div>
      </div>
      <div class="text-indigo-600 dark:text-indigo-400 font-bold animate-bounce">
        x1
      </div>
    </div>
    <!-- Cart Item -->
    <div class="flex items-center justify-between border-b pb-4 border-gray-200 dark:border-gray-700">
      <div class="flex items-center">
        <img src="https://picsum.photos/seed/item2/50/50" alt="Product Image" class="rounded mr-4">
        <div>
          <p class="font-semibold text-gray-800 dark:text-gray-200">Product Name 2</p>
          <p class="text-gray-600 dark:text-gray-400 text-sm">$29.50</p>
        </div>
      </div>
      <div class="text-indigo-600 dark:text-indigo-400 font-bold animate-bounce">
        x2
      </div>
    </div>
  </div>
  <div class="flex justify-between items-center mt-6">
    <p class="text-lg font-bold text-gray-800 dark:text-gray-200">Total:</p>
    <p class="text-lg font-bold text-indigo-600 dark:text-indigo-400">$78.98</p>
  </div>
  <button class="mt-6 w-full bg-indigo-500 hover:bg-indigo-600 text-white py-2 rounded-md transition duration-300">
    Checkout
  </button>
</div>

Glassmorphism 햄버거 메뉴

간단하고 반응이 빠른 햄버거 메뉴 구성 요소로, Glassmorphism 디자인, 보색 구성표 및 다크 모드를 지원합니다.

열다 미리 보기

                <nav class="backdrop-filter backdrop-blur-lg bg-opacity-20 bg-blue-500 dark:bg-gray-800 dark:bg-opacity-20 p-4">
  <div class="container mx-auto flex justify-between items-center">
    <div class="text-white text-lg font-semibold">My Blog</div>
    <button class="text-white focus:outline-none lg:hidden">
      <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-4 6h4"></path>
      </svg>
    </button>
    <div class="hidden lg:flex space-x-4">
      <a href="#" class="text-white hover:text-gray-200">Home</a>
      <a href="#" class="text-white hover:text-gray-200">About</a>
      <a href="#" class="text-white hover:text-gray-200">Contact</a>
    </div>
  </div>
</nav>

레트로 소셜 미디어 내비게이션

소셜 미디어를 위한 다크 모드가 있는 반응형 내비게이션 구성 요소(레트로/빈티지, 어스 톤, 중간 복잡성)

열다 미리 보기

                <nav class="bg-stone-200 dark:bg-stone-800 p-4">
  <div class="container mx-auto flex items-center justify-between">
    <div class="text-xl font-bold text-stone-800 dark:text-stone-200">SocialApp</div>
    <ul class="flex space-x-4">
      <li><a href="#" class="text-stone-600 dark:text-stone-400 hover:text-stone-800 dark:hover:text-stone-200">Feed</a></li>
      <li><a href="#" class="text-stone-600 dark:text-stone-400 hover:text-stone-800 dark:hover:text-stone-200">Profile</a></li>
      <li><a href="#" class="text-stone-600 dark:text-stone-400 hover:text-stone-800 dark:hover:text-stone-200">Messages</a></li>
      <li><a href="#" class="text-stone-600 dark:text-stone-400 hover:text-stone-800 dark:hover:text-stone-200">Settings</a></li>
    </ul>
  </div>
</nav>

필터 구성 요소

실제 컨트롤을 모방한 스큐어모픽 스타일로 설계된 필터 구성 요소로, 회색조 색 구성표를 활용하여 복잡한 대화형 요소가 있는 대시보드에 적합합니다.

열다 미리 보기

                <div class="p-5 bg-gray-200 dark:bg-gray-800 rounded-lg shadow-lg">
    <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200 mb-4">Filters</h2>
    <div class="flex flex-col space-y-4">
        <div class="flex items-center">
            <label for="search" class="text-gray-600 dark:text-gray-300 w-1/3">Search:</label>
            <input id="search" type="text" class="bg-gray-300 dark:bg-gray-700 text-gray-800 dark:text-gray-200 border border-gray-400 dark:border-gray-600  rounded-lg p-2 w-2/3 shadow-md focus:outline-none focus:ring focus:ring-gray-500" placeholder="Search..." />
        </div>
        <div class="flex items-center">
            <label for="date" class="text-gray-600 dark:text-gray-300 w-1/3">Date:</label>
            <input id="date" type="date" class="bg-gray-300 dark:bg-gray-700 text-gray-800 dark:text-gray-200 border border-gray-400 dark:border-gray-600 rounded-lg p-2 w-2/3 shadow-md focus:outline-none focus:ring focus:ring-gray-500" />
        </div>
        <div class="flex items-center">
            <label for="category" class="text-gray-600 dark:text-gray-300 w-1/3">Category:</label>
            <select id="category" class="bg-gray-300 dark:bg-gray-700 text-gray-800 dark:text-gray-200 border border-gray-400 dark:border-gray-600 rounded-lg p-2 w-2/3 shadow-md focus:outline-none focus:ring focus:ring-gray-500">
                <option>All</option>
                <option>Category 1</option>
                <option>Category 2</option>
                <option>Category 3</option>
            </select>
        </div>
        <div class="flex items-center">
            <label class="text-gray-600 dark:text-gray-300 w-1/3">Status:</label>
            <div class="flex items-center space-x-4 w-2/3">
                <label class="flex items-center">
                    <input type="checkbox" class="form-checkbox h-4 w-4 text-gray-600 dark:text-gray-300">
                    <span class="ml-2 text-gray-800 dark:text-gray-200">Active</span>
                </label>
                <label class="flex items-center">
                    <input type="checkbox" class="form-checkbox h-4 w-4 text-gray-600 dark:text-gray-300">
                    <span class="ml-2 text-gray-800 dark:text-gray-200">Inactive</span>
                </label>
            </div>
        </div>
        <button class="bg-gray-600 dark:bg-gray-400 text-white rounded-lg p-2 hover:bg-gray-700 dark:hover:bg-gray-500 transition duration-200">Apply Filters</button>
    </div>
</div>

Sidebar Navigation 구성 요소

대시보드를 위해 설계된 간단하고 반응이 빠른 사이드바 탐색 구성 요소로, 매력적인 애니메이션과 흙빛 색 구성표를 특징으로 합니다. 다크 모드를 지원합니다.

열다 미리 보기

                <div class="flex flex-col h-screen bg-gray-200 dark:bg-gray-800 border-r border-gray-300 dark:border-gray-700 shadow-lg transition-transform duration-300 ease-in-out">
    <div class="flex items-center justify-center h-16 border-b border-gray-300 dark:border-gray-700 bg-green-600 dark:bg-green-800">
        <h1 class="text-xl text-white font-bold">Dashboard</h1>
    </div>
    <nav class="flex-1 p-4">
        <ul class="space-y-2">
            <li>
                <a href="#" class="flex items-center p-2 text-gray-700 dark:text-gray-300 hover:bg-green-500 dark:hover:bg-green-700 rounded transition-all duration-300 ease-in-out">
                    <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-8 h-8 rounded-full mr-2">
                    <span>Profile</span>
                </a>
            </li>
            <li>
                <a href="#" class="flex items-center p-2 text-gray-700 dark:text-gray-300 hover:bg-green-500 dark:hover:bg-green-700 rounded transition-all duration-300 ease-in-out">
                    <img src="https://picsum.photos/seed/pic1/30/30" alt="Image 1" class="w-8 h-8 rounded-full mr-2">
                    <span>Reports</span>
                </a>
            </li>
            <li>
                <a href="#" class="flex items-center p-2 text-gray-700 dark:text-gray-300 hover:bg-green-500 dark:hover:bg-green-700 rounded transition-all duration-300 ease-in-out">
                    <img src="https://picsum.photos/seed/pic2/30/30" alt="Image 2" class="w-8 h-8 rounded-full mr-2">
                    <span>Settings</span>
                </a>
            </li>
        </ul>
    </nav>
    <div class="p-4 border-t border-gray-300 dark:border-gray-700">
        <a href="#" class="block text-center text-gray-700 dark:text-gray-300 hover:bg-green-500 dark:hover:bg-green-700 rounded p-2 transition-all duration-300 ease-in-out">Logout</a>
    </div>
</div>

소셜 공유 버튼

반응형 소셜 공유 버튼 구성 요소는 어두운 테마 지원, 브루탈리즘 디자인, 유사한 색 구성표 및 복잡한 상호 작용을 제공하며 포트폴리오 웹 사이트를 위해 Tailwind CSS로 구축되었습니다.

열다 미리 보기

                <div class="bg-gray-100 dark:bg-gray-900 p-8 min-h-screen flex items-center justify-center">
  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">

    <!-- Social Share Button 1 -->
    <div class="bg-white dark:bg-gray-800 border-4 border-black dark:border-white p-6 shadow-[8px_8px_0_0_#000] dark:shadow-[8px_8px_0_0_#fff] transform transition-transform duration-200 hover:scale-105">
      <div class="flex items-center space-x-4">
        <div class="text-yellow-500 text-3xl">
          <i class="fab fa-twitter"></i>
        </div>
        <div>
          <h3 class="text-xl font-bold text-gray-900 dark:text-white">Share on Twitter</h3>
          <p class="text-gray-600 dark:text-gray-400">Spread the word!</p>
        </div>
      </div>
      <button class="mt-6 w-full bg-yellow-500 text-black py-3 px-4 border-2 border-black dark:border-white font-bold text-lg transform translate-x-1 translate-y-1 shadow-[4px_4px_0_0_#000] dark:shadow-[4px_4px_0_0_#fff] hover:translate-x-0 hover:translate-y-0 hover:shadow-none transition-all duration-200">
        Tweet
      </button>
    </div>

    <!-- Social Share Button 2 -->
    <div class="bg-white dark:bg-gray-800 border-4 border-black dark:border-white p-6 shadow-[8px_8px_0_0_#000] dark:shadow-[8px_8px_0_0_#fff] transform transition-transform duration-200 hover:scale-105">
      <div class="flex items-center space-x-4">
        <div class="text-orange-500 text-3xl">
          <i class="fab fa-facebook-f"></i>
        </div>
        <div>
          <h3 class="text-xl font-bold text-gray-900 dark:text-white">Share on Facebook</h3>
          <p class="text-gray-600 dark:text-gray-400">Connect with friends!</p>
        </div>
      </div>
      <button class="mt-6 w-full bg-orange-500 text-black py-3 px-4 border-2 border-black dark:border-white font-bold text-lg transform translate-x-1 translate-y-1 shadow-[4px_4px_0_0_#000] dark:shadow-[4px_4px_0_0_#fff] hover:translate-x-0 hover:translate-y-0 hover:shadow-none transition-all duration-200">
        Share
      </button>
    </div>

    <!-- Social Share Button 3 -->
    <div class="bg-white dark:bg-gray-800 border-4 border-black dark:border-white p-6 shadow-[8px_8px_0_0_#000] dark:shadow-[8px_8px_0_0_#fff] transform transition-transform duration-200 hover:scale-105">
      <div class="flex items-center space-x-4">
        <div class="text-red-500 text-3xl">
          <i class="fab fa-pinterest-p"></i>
        </div>
        <div>
          <h3 class="text-xl font-bold text-gray-900 dark:text-white">Share on Pinterest</h3>
          <p class="text-gray-600 dark:text-gray-400">Inspire others!</p>
        </div>
      </div>
      <button class="mt-6 w-full bg-red-500 text-black py-3 px-4 border-2 border-black dark:border-white font-bold text-lg transform translate-x-1 translate-y-1 shadow-[4px_4px_0_0_#000] dark:shadow-[4px_4px_0_0_#fff] hover:translate-x-0 hover:translate-y-0 hover:shadow-none transition-all duration-200">
        Pin It
      </button>
    </div>

    <!-- Social Share Button 4 -->
    <div class="bg-white dark:bg-gray-800 border-4 border-black dark:border-white p-6 shadow-[8px_8px_0_0_#000] dark:shadow-[8px_8px_0_0_#fff] transform transition-transform duration-200 hover:scale-105">
      <div class="flex items-center space-x-4">
        <div class="text-blue-500 text-3xl">
          <i class="fab fa-linkedin-in"></i>
        </div>
        <div>
          <h3 class="text-xl font-bold text-gray-900 dark:text-white">Share on LinkedIn</h3>
          <p class="text-gray-600 dark:text-gray-400">Grow your network!</p>
        </div>
      </div>
      <button class="mt-6 w-full bg-blue-500 text-black py-3 px-4 border-2 border-black dark:border-white font-bold text-lg transform translate-x-1 translate-y-1 shadow-[4px_4px_0_0_#000] dark:shadow-[4px_4px_0_0_#fff] hover:translate-x-0 hover:translate-y-0 hover:shadow-none transition-all duration-200">
        Connect
      </button>
    </div>

  </div>
</div>

1 ... 170 171 172 173 174 ... 335

검색 구성 요소

카테고리

모든 구성 요소