검색 구성 요소

모든 구성 요소

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

미니멀리스트 트라이어딕 프로그레스 바

트라이어딕 색 구성표와 어두운 테마 지원이 있는 미니멀하고 반응이 빠른 진행률 표시줄로 소셜 미디어 응용 프로그램에 적합합니다.

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

  <!-- Progress Bar Container -->
  <div class="w-full max-w-md bg-cyan-200 dark:bg-cyan-800 rounded-full h-4 mb-4 relative">
    <!-- Progress Indicator - Using an arbitrary value with [] for demonstration -->
    <div class="bg-fuchsia-500 dark:bg-fuchsia-400 h-4 rounded-full" style="width: 75%;">
      <span class="absolute right-2 top-0 text-xs font-semibold text-gray-700 dark:text-gray-300">75%</span>
    </div>
  </div>

  <!-- Another Progress Bar Example -->
  <div class="w-full max-w-md bg-cyan-200 dark:bg-cyan-800 rounded-full h-4 relative">
    <div class="bg-yellow-500 dark:bg-yellow-400 h-4 rounded-full" style="width: 50%;">
      <span class="absolute right-2 top-0 text-xs font-semibold text-gray-700 dark:text-gray-300">50%</span>
    </div>
  </div>

</div>

Layout Components 컴포넌트

브루탈리즘(Brutalism)에서 영감을 받은 레이아웃 구성 요소로, 파스텔 톤의 색 구성표와 적당한 복잡성으로 콘텐츠 소비를 위한 것으로, 반응형 디자인과 다크 모드를 지원합니다.

열다 미리 보기

                <div class="min-h-screen bg-pink-100 p-8 dark:bg-gray-900">
  <header class="mb-8 border-b-4 border-black pb-4 dark:border-white">
    <h1 class="text-5xl font-bold text-black drop-shadow-[6px_6px_0_rgba(0,0,0,1)] dark:text-white dark:drop-shadow-[6px_6px_0_rgba(255,255,255,1)]">
      Brutal Blog
    </h1>
  </header>

  <div class="grid grid-cols-1 gap-8 md:grid-cols-3">
    <!-- Main Content Area -->
    <main class="border-4 border-black bg-purple-200 p-6 dark:border-white dark:bg-gray-800 md:col-span-2">
      <article class="mb-8">
        <h2 class="text-3xl font-bold text-black dark:text-white">The Raw Truth of Web Design</h2>
        <p class="mb-4 text-sm text-gray-700 dark:text-gray-300">Posted on October 26, 2023</p>
        <img src="https://picsum.photos/seed/brutalism/800/400" alt="Abstract brutalist architecture" class="mb-4 w-full border-4 border-black dark:border-white" />
        <p class="mb-4 text-black dark:text-white">
          In the realm of web design, Brutalism stands as a defiant counterpoint to sleek interfaces and polished user experiences. It's a style that embraces rawness, exposes underlying structures, and often challenges conventional notions of beauty.
        </p>
        <p class="text-black dark:text-white">
          Characterized by stark typography, high-contrast colors, and a deliberate disregard for typical aesthetic norms, Brutalism can be jarring yet incredibly impactful. It screams authenticity and unfiltered expression, often using simple, unadorned HTML elements to convey its message.
        </p>
      </article>

      <article>
        <h2 class="text-3xl font-bold text-black dark:text-white">Pastel Brutalism: An Oxymoron?</h2>
        <p class="mb-4 text-sm text-gray-700 dark:text-gray-300">Posted on October 25, 2023</p>
        <img src="https://picsum.photos/seed/pastel/800/400" alt="Pastel color blocks" class="mb-4 w-full border-4 border-black dark:border-white" />
        <p class="mb-4 text-black dark:text-white">
          Combining the unyielding nature of Brutalism with the softness of pastel colors creates an intriguing paradox. The gentle hues temper the harshness, yet the underlying structural honesty remains. This approach offers a unique visual language, capable of conveying both strength and delicate nuance.
        </p>
        <p class="text-black dark:text-white">
          It's an exploration of contrasts, where the raw edges meet the subtle fades, inviting viewers to reconsider their perceptions of digital aesthetics. The goal is not to prettify, but to present an unvarnished truth, albeit one wrapped in a surprisingly gentle palette.
        </p>
      </article>
    </main>

    <!-- Sidebar / Related Content -->
    <aside class="border-4 border-black bg-green-200 p-6 dark:border-white dark:bg-gray-800">
      <h3 class="mb-4 text-2xl font-bold text-black dark:text-white">Related Reads</h3>
      <ul class="space-y-4">
        <li class="border-b-2 border-black pb-2 dark:border-white">
          <a href="#" class="block text-black hover:underline dark:text-white">The Art of Deliberate Imperfection</a>
          <p class="text-sm text-gray-700 dark:text-gray-300">Explore why imperfections can enhance design.</p>
        </li>
        <li class="border-b-2 border-black pb-2 dark:border-white">
          <a href="#" class="block text-black hover:underline dark:text-white">High Contrast & Readability</a>
          <p class="text-sm text-gray-700 dark:text-gray-300">A deep dive into accessible brutalist design.</p>
        </li>
        <li class="border-b-2 border-black pb-2 dark:border-white">
          <a href="#" class="block text-black hover:underline dark:text-white">Embracing the Unconventional Grid</a>
          <p class="text-sm text-gray-700 dark:text-gray-300">Breaking free from traditional layouts.</p>
        </li>
      </ul>

      <h3 class="mb-4 mt-8 text-2xl font-bold text-black dark:text-white">About the Author</h3>
      <div class="flex items-center space-x-4">
        <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Author Avatar" class="h-16 w-16 border-4 border-black dark:border-white" />
        <div>
          <p class="font-bold text-black dark:text-white">Maximus Code</p>
          <p class="text-sm text-gray-700 dark:text-gray-300">Digital Architect & Brutalism Enthusiast.</p>
        </div>
      </div>
    </aside>
  </div>

  <footer class="mt-8 border-t-4 border-black pt-4 text-center text-black dark:border-white dark:text-white">
    <p>&copy; 2023 Brutal Blog. All rights reserved, roughly.</p>
  </footer>
</div>

미디어 임베드 컴포넌트

Glassmorphism 미디어는 비즈니스/기업 웹 사이트를 위한 Earth Tones를 사용한 구성 요소를 포함합니다. 간단한 레이아웃, 반응형 및 어두운 테마 지원.

열다 미리 보기

                <div class="flex items-center justify-center min-h-screen bg-stone-100 dark:bg-stone-900 p-4">
  <div class="relative bg-white dark:bg-stone-800 bg-opacity-60 dark:bg-opacity-60 backdrop-filter backdrop-blur-lg rounded-xl shadow-lg p-6 w-full max-w-md border border-stone-200 dark:border-stone-700 overflow-hidden">
    <div class="absolute inset-0 z-0 bg-gradient-to-br from-stone-300/40 via-stone-200/20 to-stone-100/10 dark:from-stone-700/40 dark:via-stone-800/20 dark:to-stone-900/10 rounded-xl"></div>
    
    <div class="relative z-10 space-y-4">
      <!-- Video/Media Placeholder -->
      <div class="aspect-w-16 aspect-h-9 rounded-lg overflow-hidden bg-stone-300 dark:bg-stone-700 flex items-center justify-center">
        <iframe src="https://www.youtube.com/embed/dQw4w9WgXcQ" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen class="w-full h-full object-cover"></iframe>
      </div>
      
      <!-- Title -->
      <div class="text-xl font-semibold text-stone-800 dark:text-stone-100">
        Business Insights: Q3 Performance
      </div>
      
      <!-- Description -->
      <p class="text-stone-600 dark:text-stone-300 text-sm">
        A concise overview of our key achievements and strategic initiatives for the third quarter, highlighting growth and future outlook.
      </p>
      
      <!-- Action Button (Optional) -->
      <button class="w-full bg-stone-700 hover:bg-stone-800 dark:bg-stone-600 dark:hover:bg-stone-700 text-white font-medium py-2 px-4 rounded-lg transition duration-300 ease-in-out">
        Learn More
      </button>
      
      <!-- Metadata/Source (Optional) -->
      <div class="flex items-center text-stone-500 dark:text-stone-400 text-xs mt-2">
        <svg class="w-4 h-4 mr-1" 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="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path></svg>
        <span>Published: October 26, 2023</span>
      </div>
    </div>
  </div>
</div>

드롭다운 메뉴 컴포넌트

전자 상거래를 위한 간단한 glassmorphism 스타일의 드롭다운 메뉴 구성 요소로, 반응형 디자인과 다크 모드를 지원합니다.

열다 미리 보기

                <div class="relative inline-block text-left">
  <div>
    <button type="button" class="inline-flex justify-center w-full rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white/30 text-sm font-medium text-gray-700 hover:bg-white/40 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:bg-gray-800/30 dark:text-gray-200 dark:hover:bg-gray-700/40 dark:border-gray-700 backdrop-filter backdrop-blur-lg" id="menu-button" aria-expanded="true" aria-haspopup="true">
      Options
      <svg class="-mr-1 ml-2 h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
        <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
      </svg>
    </button>
  </div>

  <div class="origin-top-right absolute right-0 mt-2 w-56 rounded-md shadow-lg bg-white/30 ring-1 ring-black ring-opacity-5 focus:outline-none dark:bg-gray-800/30 backdrop-filter backdrop-blur-lg" role="menu" aria-orientation="vertical" aria-labelledby="menu-button" tabindex="-1">
    <div class="py-1" role="none">
      <a href="#" class="text-gray-700 block px-4 py-2 text-sm hover:bg-white/40 dark:text-gray-200 dark:hover:bg-gray-700/40" role="menuitem" tabindex="-1" id="menu-item-0">Category 1</a>
      <a href="#" class="text-gray-700 block px-4 py-2 text-sm hover:bg-white/40 dark:text-gray-200 dark:hover:bg-gray-700/40" role="menuitem" tabindex="-1" id="menu-item-1">Category 2</a>
      <a href="#" class="text-gray-700 block px-4 py-2 text-sm hover:bg-white/40 dark:text-gray-200 dark:hover:bg-gray-700/40" role="menuitem" tabindex="-1" id="menu-item-2">Category 3</a>
      <form method="POST" action="#" role="none">
        <button type="submit" class="text-gray-700 block w-full text-left px-4 py-2 text-sm hover:bg-white/40 dark:text-gray-200 dark:hover:bg-gray-700/40" role="menuitem" tabindex="-1" id="menu-item-3">View All</button>
      </form>
    </div>
  </div>
</div>

소셜 미디어 탐색 구성 요소

소셜 미디어 애플리케이션을 위한 간단하고 반응이 빠른 탐색 구성 요소로, 어두운 테마와 Material Design에서 영감을 받은 보색 구성표가 있습니다. 여기에는 로고, 탐색 링크 및 사용자 아바타가 포함됩니다.

열다 미리 보기

                <nav class="bg-blue-500 dark:bg-blue-900 p-4 shadow-md">
  <div class="container mx-auto flex items-center justify-between">
    <!-- Logo -->
    <a href="#" class="text-white text-2xl font-bold">SocialLink</a>

    <!-- Navigation Links -->
    <div class="hidden md:flex space-x-6">
      <a href="#" class="text-white hover:text-yellow-200 transition duration-300">Home</a>
      <a href="#" class="text-white hover:text-yellow-200 transition duration-300">Notifications</a>
      <a href="#" class="text-white hover:text-yellow-200 transition duration-300">Messages</a>
      <a href="#" class="text-white hover:text-yellow-200 transition duration-300">Profile</a>
    </div>

    <!-- User Avatar -->
    <div class="flex items-center space-x-4">
      <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-2 border-white">

      <!-- Mobile Menu Button (Hamburger) -->
      <button class="md:hidden text-white focus:outline-none">
        <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 12h16M4 18h16"></path>
        </svg>
      </button>
    </div>
  </div>

  <!-- Mobile Navigation (Hidden by default) -->
  <div class="md:hidden mt-4 space-y-2">
    <a href="#" class="block text-white hover:text-yellow-200 transition duration-300 px-4 py-2">Home</a>
    <a href="#" class="block text-white hover:text-yellow-200 transition duration-300 px-4 py-2">Notifications</a>
    <a href="#" class="block text-white hover:text-yellow-200 transition duration-300 px-4 py-2">Messages</a>
    <a href="#" class="block text-white hover:text-yellow-200 transition duration-300 px-4 py-2">Profile</a>
  </div>
</nav>

Brutalist Sticky Navigation 컴포넌트

브루탈리스트 스티키 네비게이션 바(Brutalist Sticky Navigation Bar) - 다크 모드를 지원하는 블로그를 위한 그레이스케일(Grayscale)

열다 미리 보기

                <nav class="bg-gray-900 border-b-4 border-gray-100 sticky top-0 z-50 font-mono">
  <div class="container mx-auto px-4 py-6 flex flex-wrap justify-between items-center">
    <div class="text-gray-100 text-4xl font-extrabold uppercase tracking-tighter">
      <a href="#" class="hover:text-gray-400 transition duration-300 ease-in-out">THE BLOG</a>
    </div>
    <div class="block lg:hidden">
      <button class="text-gray-100 focus:outline-none focus:text-gray-400">
        <svg class="h-8 w-8" 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"></path>
        </svg>
      </button>
    </div>
    <div class="w-full lg:w-auto lg:flex flex-grow lg:flex-grow-0 hidden lg:block mt-4 lg:mt-0">
      <ul class="flex flex-col lg:flex-row space-y-4 lg:space-y-0 lg:space-x-8 text-xl font-bold uppercase">
        <li>
          <a href="#" class="block text-gray-100 hover:text-gray-400 border-b-2 border-transparent hover:border-gray-400 pb-1 transition duration-300 ease-in-out">Home</a>
        </li>
        <li>
          <a href="#" class="block text-gray-100 hover:text-gray-400 border-b-2 border-transparent hover:border-gray-400 pb-1 transition duration-300 ease-in-out">Articles</a>
        </li>
        <li>
          <a href="#" class="block text-gray-100 hover:text-gray-400 border-b-2 border-transparent hover:border-gray-400 pb-1 transition duration-300 ease-in-out">About</a>
        </li>
        <li>
          <a href="#" class="block text-gray-100 hover:text-gray-400 border-b-2 border-transparent hover:border-gray-400 pb-1 transition duration-300 ease-in-out">Contact</a>
        </li>
      </ul>
    </div>
  </div>
  <div class="bg-gray-800 border-t-4 border-gray-100 py-3">
    <div class="container mx-auto px-4 flex flex-wrap justify-center lg:justify-between items-center text-gray-300 text-sm">
      <div class="tracking-wide mb-2 lg:mb-0">
        FEATURED TOPICS: <span class="font-bold">TECHNOLOGY / DESIGN / ART / CULTURE</span>
      </div>
      <div class="flex space-x-4">
        <input type="text" placeholder="SEARCH THE VOID..." class="px-3 py-1 bg-gray-700 text-gray-100 placeholder-gray-400 border-2 border-gray-100 focus:outline-none focus:border-gray-400 text-sm">
        <button class="bg-gray-600 text-gray-100 px-4 py-1 border-2 border-gray-100 hover:bg-gray-400 hover:text-gray-900 transition duration-300 ease-in-out">GO</button>
      </div>
    </div>
  </div>
</nav>

소셜 구성 요소 구성 요소

대시보드를 위한 간단하고 반응이 빠른 소셜 구성 요소 섹션으로, 단색 색 구성표와 스큐어모피즘에서 영감을 받은 디자인을 특징으로 합니다.

열다 미리 보기

                <div class="p-4 bg-gray-200 dark:bg-gray-800 shadow-xl rounded-lg">
  <h2 class="text-xl font-bold mb-4 text-gray-800 dark:text-gray-200">Social Feed</h2>
  <div class="space-y-4">
    <!-- Post 1 -->
    <div class="bg-gray-100 dark:bg-gray-700 p-4 rounded-lg shadow-md">
      <div class="flex items-center mb-2">
        <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-2 border-gray-300 dark:border-gray-500 mr-3">
        <div>
          <p class="font-semibold text-gray-900 dark:text-gray-100">John Doe</p>
          <p class="text-sm text-gray-600 dark:text-gray-400">2 hours ago</p>
        </div>
      </div>
      <p class="text-gray-800 dark:text-gray-200 mb-3">Exploring the new dashboard features! Really intuitive and clean design. #dashboard #UIUX</p>
      <img src="https://picsum.photos/400/200?random=1" alt="Post Image" class="w-full rounded-md shadow-inner mb-2">
      <div class="flex justify-between text-gray-600 dark:text-gray-400 text-sm">
        <span>❤️ 23 Likes</span>
        <span>💬 5 Comments</span>
      </div>
    </div>

    <!-- Post 2 -->
    <div class="bg-gray-100 dark:bg-gray-700 p-4 rounded-lg shadow-md">
      <div class="flex items-center mb-2">
        <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-2 border-gray-300 dark:border-gray-500 mr-3">
        <div>
          <p class="font-semibold text-gray-900 dark:text-gray-100">Jane Smith</p>
          <p class="text-sm text-gray-600 dark:text-gray-400">Yesterday</p>
        </div>
      </div>
      <p class="text-gray-800 dark:text-gray-200 mb-3">Just launched my new project! Check it out in the updated dashboard. Let me know your thoughts! #projectlaunch #dashboard</p>
      <div class="flex justify-between text-gray-600 dark:text-gray-400 text-sm">
        <span>❤️ 45 Likes</span>
        <span>💬 12 Comments</span>
      </div>
    </div>

    <!-- Post 3 -->
    <div class="bg-gray-100 dark:bg-gray-700 p-4 rounded-lg shadow-md">
      <div class="flex items-center mb-2">
        <img src="https://randomuser.me/api/portraits/men/20.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-2 border-gray-300 dark:border-gray-500 mr-3">
        <div>
          <p class="font-semibold text-gray-900 dark:text-gray-100">Peter Jones</p>
          <p class="text-sm text-gray-600 dark:text-gray-400">3 days ago</p>
        </div>
      </div>
      <p class="text-gray-800 dark:text-gray-200 mb-3">The new analytics module in the dashboard is a game-changer! So much data presented clearly. Highly recommend! #analytics #datadriven</p>
      <img src="https://picsum.photos/400/200?random=2" alt="Post Image" class="w-full rounded-md shadow-inner mb-2">
      <div class="flex justify-between text-gray-600 dark:text-gray-400 text-sm">
        <span>❤️ 60 Likes</span>
        <span>💬 8 Comments</span>
      </div>
    </div>
  </div>
</div>

Shopping Cart 구성 요소

전자 상거래를 위한 간단한 장바구니 구성 요소로, 반응형 머티리얼 디자인 모양, 보색 구성표 및 어두운 테마 지원을 제공합니다.

열다 미리 보기

                <div class="container mx-auto p-4 dark:bg-gray-900">
  <div class="bg-white dark:bg-gray-800 shadow-md rounded-lg p-6">
    <h2 class="text-2xl font-bold mb-6 text-gray-800 dark:text-gray-200">Shopping Cart</h2>

    <!-- Cart Item 1 -->
    <div class="flex items-center border-b border-gray-200 dark:border-gray-700 pb-4 mb-4">
      <img class="w-20 h-20 object-cover rounded-md mr-4" src="https://picsum.photos/seed/item1/200/200" alt="Product Image">
      <div class="flex-grow">
        <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Product Name 1</h3>
        <p class="text-gray-600 dark:text-gray-400">Category</p>
        <div class="flex items-center mt-2">
          <span class="text-xl font-bold text-gray-800 dark:text-gray-200">$29.99</span>
          <span class="ml-4 text-gray-500 dark:text-gray-400">Qty: 1</span>
        </div>
      </div>
      <button class="text-red-500 hover:text-red-700 dark:text-red-400 dark:hover:text-red-600">Remove</button>
    </div>

    <!-- Cart Item 2 -->
    <div class="flex items-center border-b border-gray-200 dark:border-gray-700 pb-4 mb-4">
      <img class="w-20 h-20 object-cover rounded-md mr-4" src="https://picsum.photos/seed/item2/200/200" alt="Product Image">
      <div class="flex-grow">
        <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Product Name 2</h3>
        <p class="text-gray-600 dark:text-gray-400">Category</p>
        <div class="flex items-center mt-2">
          <span class="text-xl font-bold text-gray-800 dark:text-gray-200">$49.99</span>
          <span class="ml-4 text-gray-500 dark:text-gray-400">Qty: 1</span>
        </div>
      </div>
      <button class="text-red-500 hover:text-red-700 dark:text-red-400 dark:hover:text-red-600">Remove</button>
    </div>

    <!-- Cart Summary -->
    <div class="flex justify-between items-center mt-6">
      <span class="text-xl font-bold text-gray-800 dark:text-gray-200">Total:</span>
      <span class="text-2xl font-bold text-blue-600 dark:text-blue-400">$79.98</span>
    </div>

    <button class="mt-8 w-full bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-4 rounded-md shadow-md dark:bg-blue-500 dark:hover:bg-blue-600">
      Proceed to Checkout
    </button>
  </div>
</div>

코퍼레이트 3D 트라이어딕 모달

트라이어드 색 구성표가 있는 반응형 3D 디자인 모달 구성 요소로, 비즈니스 및 기업 웹 사이트에 적합하며 다크 모드를 지원합니다.

열다 미리 보기

                <div class="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full flex justify-center items-center dark:bg-gray-900 dark:bg-opacity-70">
  <div class="relative p-8 bg-white dark:bg-gray-800 w-full max-w-md mx-auto rounded-3xl shadow-2xl transform transition-all duration-300 ease-in-out scale-100 opacity-100 rotate-x-0 group-hover:scale-105 group-hover:opacity-95 group-hover:rotate-x-3d-effect" style="transform-style: preserve-3d; transition: transform 0.6s ease; perspective: 1000px;">
    <!-- 3D depth effect for modal container -->
    <div class="absolute inset-0 bg-gradient-to-br from-blue-500 via-purple-500 to-pink-500 dark:from-blue-700 dark:via-purple-700 dark:to-pink-700 opacity-20 rounded-3xl" style="transform: translateZ(-20px);"></div>
    
    <div class="relative z-10">
      <h3 class="text-2xl font-extrabold text-gray-900 dark:text-white mb-6 text-center tracking-wide">
        <span class="inline-block" style="transform: translateZ(20px);">Welcome</span> 
        <span class="inline-block" style="transform: translateZ(10px);">to</span> 
        <span class="inline-block" style="transform: translateZ(0px);">Our Business</span>
      </h3>
      <div class="flex flex-col items-center mb-6">
        <img class="w-24 h-24 rounded-full border-4 border-blue-400 dark:border-blue-600 mb-4 shadow-lg" src="https://randomuser.me/api/portraits/men/75.jpg" alt="Avatar" style="transform: translateZ(15px);">
        <p class="text-gray-700 dark:text-gray-300 text-base leading-relaxed text-center" style="transform: translateZ(5px);">
          Thank you for visiting. Explore our services and discover how we can help your business grow.
        </p>
      </div>
      <div class="grid grid-cols-2 gap-4 mb-6" style="transform: translateZ(10px);">
        <div class="text-center p-3 bg-blue-100 dark:bg-blue-900 rounded-lg shadow-md">
          <p class="text-blue-700 dark:text-blue-300 font-semibold text-lg">Solutions</p>
        </div>
        <div class="text-center p-3 bg-purple-100 dark:bg-purple-900 rounded-lg shadow-md">
          <p class="text-purple-700 dark:text-purple-300 font-semibold text-lg">Innovation</p>
        </div>
        <div class="col-span-2 text-center p-3 bg-pink-100 dark:bg-pink-900 rounded-lg shadow-md">
          <p class="text-pink-700 dark:text-pink-300 font-semibold text-lg">Growth</p>
        </div>
      </div>
      <div class="flex justify-end space-x-4">
        <button class="bg-gradient-to-r from-blue-500 to-purple-500 text-white dark:from-blue-700 dark:to-purple-700 dark:text-gray-100 py-3 px-6 rounded-full font-bold shadow-lg transform transition-transform duration-300 ease-in-out hover:scale-105 active:scale-95" style="transform: translateZ(10px);">
          Learn More
        </button>
        <button class="bg-gray-300 text-gray-800 dark:bg-gray-600 dark:text-gray-200 py-3 px-6 rounded-full font-semibold shadow-md transform transition-transform duration-300 ease-in-out hover:scale-105 active:scale-95" style="transform: translateZ(5px);">
          Close
        </button>
      </div>
    </div>
  </div>
</div>

드롭다운 메뉴 컴포넌트

Material Design, Analogous color scheme 및 Tailwind CSS를 사용하는 복잡한 상호 작용을 사용하는 전자 상거래를 위한 드롭다운 메뉴 구성 요소입니다. 반응형이며 JavaScript 없이 어두운 테마를 지원합니다.

열다 미리 보기

                <div class="relative inline-block text-left">
  <div>
    <button type="button" class="inline-flex justify-center w-full rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-200 dark:hover:bg-gray-700" id="menu-button" aria-expanded="true" aria-haspopup="true">
      Options
      <svg class="-mr-1 ml-2 h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
        <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
      </svg>
    </button>
  </div>

  <div class="origin-top-right absolute right-0 mt-2 w-56 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 focus:outline-none dark:bg-gray-800 dark:ring-gray-700" role="menu" aria-orientation="vertical" aria-labelledby="menu-button" tabindex="-1">
    <div class="py-1" role="none">
      <!-- Active: "bg-gray-100 text-gray-900", Not Active: "text-gray-700" -->
      <a href="#" class="text-gray-700 block px-4 py-2 text-sm hover:bg-gray-100 dark:text-gray-200 dark:hover:bg-gray-700" role="menuitem" tabindex="-1" id="menu-item-0">Account settings</a>
      <a href="#" class="text-gray-700 block px-4 py-2 text-sm hover:bg-gray-100 dark:text-gray-200 dark:hover:bg-gray-700" role="menuitem" tabindex="-1" id="menu-item-1">Support</a>
      <a href="#" class="text-gray-700 block px-4 py-2 text-sm hover:bg-gray-100 dark:text-gray-200 dark:hover:bg-gray-700" role="menuitem" tabindex="-1" id="menu-item-2">License</a>
      <form method="POST" action="#" role="none">
        <button type="submit" class="text-gray-700 block w-full text-left px-4 py-2 text-sm hover:bg-gray-100 dark:text-gray-200 dark:hover:bg-gray-700" role="menuitem" tabindex="-1" id="menu-item-3">Sign out</button>
      </form>
    </div>
  </div>
</div>

1 ... 124 125 126 127 128 ... 335

검색 구성 요소

카테고리

모든 구성 요소