검색 구성 요소

모든 구성 요소

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

사용자 언급 구성 요소 - 스큐어모피즘

사용자는 스큐어모피즘 디자인, 반응형 효과 및 어두운 테마 지원이 있는 구성 요소를 언급하며 tailwind css와 함께 html만 사용합니다. 자바 스크립트가 필요하지 않습니다.

                <div class="p-4 bg-gray-100 dark:bg-gray-800 min-h-screen flex justify-center items-center">
  <div class="w-full max-w-md bg-white dark:bg-gray-700 rounded-lg shadow-xl p-6 relative overflow-hidden">
    <div class="absolute inset-0 bg-gradient-to-br from-gray-200 to-white dark:from-gray-900 dark:to-gray-700 opacity-50 pointer-events-none"></div>
    
    <div class="relative z-10">
      <h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-6 text-center">Mentions</h2>

      <div class="space-y-4">
        <!-- Mention 1 -->
        <div class="flex items-center space-x-4 bg-gray-50 dark:bg-gray-600 p-4 rounded-lg shadow-md transform transition duration-300 hover:scale-105">
          <img class="w-12 h-12 rounded-full border-2 border-gray-300 dark:border-gray-500 shadow-inner" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
          <div class="flex-1">
            <p class="text-gray-900 dark:text-white font-semibold">John Doe</p>
            <p class="text-gray-600 dark:text-gray-300 text-sm">Mentioned you in a comment</p>
          </div>
          <span class="text-xs text-gray-500 dark:text-gray-400">2h ago</span>
        </div>

        <!-- Mention 2 -->
        <div class="flex items-center space-x-4 bg-gray-50 dark:bg-gray-600 p-4 rounded-lg shadow-md transform transition duration-300 hover:scale-105">
          <img class="w-12 h-12 rounded-full border-2 border-gray-300 dark:border-gray-500 shadow-inner" src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar">
          <div class="flex-1">
            <p class="text-gray-900 dark:text-white font-semibold">Jane Smith</p>
            <p class="text-gray-600 dark:text-gray-300 text-sm">Added you to a project</p>
          </div>
           <span class="text-xs text-gray-500 dark:text-gray-400">5h ago</span>
        </div>

         <!-- Mention 3 -->
        <div class="flex items-center space-x-4 bg-gray-50 dark:bg-gray-600 p-4 rounded-lg shadow-md transform transition duration-300 hover:scale-105">
          <img class="w-12 h-12 rounded-full border-2 border-gray-300 dark:border-gray-500 shadow-inner" src="https://randomuser.me/api/portraits/men/70.jpg" alt="User Avatar">
          <div class="flex-1">
            <p class="text-gray-900 dark:text-white font-semibold">Peter Jones</p>
            <p class="text-gray-600 dark:text-gray-300 text-sm">Reacted to your post</p>
          </div>
           <span class="text-xs text-gray-500 dark:text-gray-400">1d ago</span>
        </div>
      </div>
    </div>
  </div>
</div>

등급 시스템 구성 요소

Tailwind CSS로 디자인된 레트로/빈티지 스타일의 등급 시스템 구성 요소로, 반응형 디자인과 어두운 테마 지원을 특징으로 합니다.

열다 미리 보기

                <div class="bg-white dark:bg-gray-800 p-5 rounded-lg shadow-lg max-w-md mx-auto">
    <h2 class="text-2xl font-bold text-center text-gray-800 dark:text-white mb-4">Rate This Item</h2>
    <div class="flex justify-center mb-4">
        <img src="https://picsum.photos/200/100" alt="Item Image" class="rounded-md">
    </div>
    <div class="flex justify-center mb-4">
        <img src="https://randomuser.me/api/portraits/men/10.jpg" alt="User Avatar" class="rounded-full w-12 h-12 border-2 border-gray-300 dark:border-gray-600 mr-2">
        <span class="text-gray-800 dark:text-white self-center">John Doe</span>
    </div>
    <div class="flex justify-center mb-4">
        <span class="text-yellow-500 text-3xl">★ ★ ★ ★ ☆</span>
    </div>
    <div class="flex justify-between mt-4">
        <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline transition duration-300 ease-in-out">Submit</button>
        <button class="bg-gray-300 dark:bg-gray-700 hover:bg-gray-400 dark:hover:bg-gray-600 text-gray-800 dark:text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline transition duration-300 ease-in-out">Cancel</button>
    </div>
</div>

사이드바 구성 요소

스큐어모픽 스타일로 디자인된 사이드바 컴포넌트로, 디지털 포맷으로 현실 세계의 느낌을 제공합니다. 반응형 디자인과 어두운 테마를 지원합니다.

열다 미리 보기

                <div class="flex flex-col h-screen bg-white dark:bg-gray-800 shadow-lg rounded-lg w-64">
    <div class="flex items-center justify-center h-16 bg-gray-200 dark:bg-gray-700 rounded-t-lg">
        <h1 class="text-xl font-bold text-gray-800 dark:text-white">Sidebar</h1>
    </div>
    <div class="flex-grow overflow-y-auto p-4">
        <ul class="space-y-2">
            <li>
                <a href="#" class="flex items-center p-3 text-gray-600 rounded-lg hover:bg-gray-300 dark:text-gray-300 dark:hover:bg-gray-600 transition ease-in-out duration-150">
                    <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3" />
                    <span>Profile</span>
                </a>
            </li>
            <li>
                <a href="#" class="flex items-center p-3 text-gray-600 rounded-lg hover:bg-gray-300 dark:text-gray-300 dark:hover:bg-gray-600 transition ease-in-out duration-150">
                    <img src="https://picsum.photos/40/40?random=1" alt="Placeholder" class="w-10 h-10 rounded mr-3" />
                    <span>Dashboard</span>
                </a>
            </li>
            <li>
                <a href="#" class="flex items-center p-3 text-gray-600 rounded-lg hover:bg-gray-300 dark:text-gray-300 dark:hover:bg-gray-600 transition ease-in-out duration-150">
                    <img src="https://picsum.photos/40/40?random=2" alt="Placeholder" class="w-10 h-10 rounded mr-3" />
                    <span>Settings</span>
                </a>
            </li>
            <li>
                <a href="#" class="flex items-center p-3 text-gray-600 rounded-lg hover:bg-gray-300 dark:text-gray-300 dark:hover:bg-gray-600 transition ease-in-out duration-150">
                    <img src="https://picsum.photos/40/40?random=3" alt="Placeholder" class="w-10 h-10 rounded mr-3" />
                    <span>Messages</span>
                </a>
            </li>
            <li>
                <a href="#" class="flex items-center p-3 text-gray-600 rounded-lg hover:bg-gray-300 dark:text-gray-300 dark:hover:bg-gray-600 transition ease-in-out duration-150">
                    <img src="https://picsum.photos/40/40?random=4" alt="Placeholder" class="w-10 h-10 rounded mr-3" />
                    <span>Logout</span>
                </a>
            </li>
        </ul>
    </div>
</div>

Breadcrumb Navigation 구성 요소

Tailwind CSS를 사용하여 Neumorphism 스타일로 설계된 반응형 이동 경로 탐색 구성 요소이며 어두운 테마를 지원합니다.

열다 미리 보기

                <nav class="bg-white dark:bg-gray-800 rounded-xl shadow-md p-4 mb-6 max-w-4xl mx-auto">
    <ol class="list-reset flex text-gray-700 dark:text-gray-300">
        <li>
            <a href="#" class="text-blue-500 hover:text-blue-700">Home</a>
        </li>
        <li>
            <span class="mx-2">/</span>
        </li>
        <li>
            <a href="#" class="text-blue-500 hover:text-blue-700">Library</a>
        </li>
        <li>
            <span class="mx-2">/</span>
        </li>
        <li>
            <a href="#" class="text-blue-500 hover:text-blue-700">Data</a>
        </li>
    </ol>
</nav>

<style>
    /* Neumorphism styles */
    nav {
        box-shadow: 8px 8px 15px rgba(0, 0, 0, 0.1),
                    -8px -8px 15px rgba(255, 255, 255, 0.7);
    }
    nav.dark {
        box-shadow: 8px 8px 15px rgba(0, 0, 0, 0.5),
                    -8px -8px 15px rgba(0, 0, 0, 0.2);
    }
</style>

MaterialDesign탭

반응형 탭 구성요소는 어두운 모드 지원 및 반응형 효과를 포함하여 Tailwind CSS를 사용하는 Material Design 원칙을 따릅니다.

열다 미리 보기

                <div class="material-tabs-container">
  <div class="material-tabs-header">
    <button class="material-tab-button active">Tab 1</button>
    <button class="material-tab-button">Tab 2</button>
    <button class="material-tab-button">Tab 3</button>
  </div>
  <div class="material-tabs-content">
    <div class="material-tab-pane active">
      <h2 class="text-xl font-bold mb-4">Content of Tab 1</h2>
      <p>This is the content for Tab 1. It follows Material Design guidelines with responsive padding and font sizes.</p>
      <img src="https://picsum.photos/seed/picsum/400/200" alt="Placeholder Image" class="my-4 rounded-md">
      <div class="flex items-center mt-4">
        <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-4">
        <span>Posted by John Doe</span>
      </div>
    </div>
    <div class="material-tab-pane">
      <h2 class="text-xl font-bold mb-4">Content of Tab 2</h2>
      <p>This is the content for Tab 2, showcasing different types of information within a tabbed interface.</p>
      <ul class="list-disc list-inside mt-4">
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
      </ul>
    </div>
    <div class="material-tab-pane">
      <h2 class="text-xl font-bold mb-4">Content of Tab 3</h2>
      <p>This is the content for Tab 3. Each tab pane can contain varied content, adhering to the responsive design.</p>
      <p class="text-gray-700 dark:text-gray-300 mt-4">Additional text for Tab 3 content.</p>
    </div>
  </div>
</div>

<style>
  /* Basic Material Design inspired styles */
  .material-tabs-container {
    @apply bg-white dark:bg-gray-800 shadow-md rounded-md p-4;
  }

  .material-tabs-header {
    @apply flex border-b border-gray-200 dark:border-gray-700;
  }

  .material-tab-button {
    @apply py-2 px-4 text-center text-gray-600 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-400 focus:outline-none;
    transition: color 0.3s ease;
  }

  .material-tab-button.active {
    @apply border-b-2 border-blue-600 dark:border-blue-400 text-blue-600 dark:text-blue-400;
  }

  .material-tabs-content {
    @apply mt-4;
  }

  .material-tab-pane {
    @apply hidden;
  }

  .material-tab-pane.active {
    @apply block;
  }

  /* Responsive adjustments */
  @media (max-width: 600px) {
    .material-tabs-header {
      @apply flex-col;
    }

    .material-tab-button {
      @apply w-full text-left;
    }
  }

  /* Dark mode styles */
  /* Handled by Tailwind's dark: utility classes */
</style>

Dashboards 구성 요소

Dashboards Neumorphism 디자인, 반응형 효과 및 어두운 테마 지원이 있는 구성 요소입니다.

열다 미리 보기

                <section class="p-8 dark:bg-gray-900 dark:text-white">
  <div class="container mx-auto">
    <div class="grid grid-cols-1 gap-8 md:grid-cols-2 lg:grid-cols-3">

      <!-- Card 1 -->
      <div class="rounded-xl bg-gray-200 p-6 shadow-xl dark:bg-gray-800">
        <h3 class="mb-4 text-xl font-semibold">Sales Overview</h3>
        <p class="text-gray-700 dark:text-gray-300">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
      </div>

      <!-- Card 2 -->
      <div class="rounded-xl bg-gray-200 p-6 shadow-xl dark:bg-gray-800">
        <h3 class="mb-4 text-xl font-semibold">Revenue Analysis</h3>
        <p class="text-gray-700 dark:text-gray-300">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
      </div>

      <!-- Card 3 -->
      <div class="rounded-xl bg-gray-200 p-6 shadow-xl dark:bg-gray-800">
        <h3 class="mb-4 text-xl font-semibold">Customer Growth</h3>
        <p class="text-gray-700 dark:text-gray-300">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
      </div>

      <!-- Card 4 -->
      <div class="rounded-xl bg-gray-200 p-6 shadow-xl dark:bg-gray-800">
        <h3 class="mb-4 text-xl font-semibold">Marketing Performance</h3>
        <p class="text-gray-700 dark:text-gray-300">Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      </div>

      <!-- Card 5 -->
      <div class="rounded-xl bg-gray-200 p-6 shadow-xl dark:bg-gray-800">
        <h3 class="mb-4 text-xl font-semibold">Inventory Status</h3>
        <p class="text-gray-700 dark:text-gray-300">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.</p>
      </div>

      <!-- Card 6 -->
      <div class="rounded-xl bg-gray-200 p-6 shadow-xl dark:bg-gray-800">
        <h3 class="mb-4 text-xl font-semibold">Website Traffic</h3>
        <p class="text-gray-700 dark:text-gray-300">Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit.</p>
      </div>

    </div>
  </div>
</section>

Shopping Cart 구성 요소

Skeuomorphism 디자인, 반응형 효과 및 어두운 테마 지원이 있는 장바구니 구성 요소입니다.

열다 미리 보기

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

  <div class="space-y-4">

    <!-- Cart Item -->
    <div class="flex items-center bg-white dark:bg-gray-700 p-4 rounded-lg shadow-md">
      <img class="w-16 h-16 object-cover rounded-md mr-4 border border-gray-300 dark:border-gray-600" src="https://picsum.photos/80" alt="Product Image">
      <div class="flex-grow">
        <h2 class="text-lg font-semibold text-gray-900 dark:text-white">Product Name</h2>
        <p class="text-gray-600 dark:text-gray-300">Quantity: 1</p>
        <p class="text-gray-800 dark:text-white">$19.99</p>
      </div>
      <button class="bg-red-500 hover:bg-red-600 text-white py-2 px-4 rounded-full shadow-lg">Remove</button>
    </div>

    <!-- Cart Item -->
    <div class="flex items-center bg-white dark:bg-gray-700 p-4 rounded-lg shadow-md">
      <img class="w-16 h-16 object-cover rounded-md mr-4 border border-gray-300 dark:border-gray-600" src="https://picsum.photos/81" alt="Product Image">
      <div class="flex-grow">
        <h2 class="text-lg font-semibold text-gray-900 dark:text-white">Another Product</h2>
        <p class="text-gray-600 dark:text-gray-300">Quantity: 2</p>
        <p class="text-gray-800 dark:text-white">$29.50</p>
      </div>
      <button class="bg-red-500 hover:bg-red-600 text-white py-2 px-4 rounded-full shadow-lg">Remove</button>
    </div>

  </div>

  <div class="mt-6 flex justify-end items-center">
    <div class="text-xl font-bold text-gray-900 dark:text-white mr-4">Total: $69.00</div>
    <button class="bg-blue-600 hover:bg-blue-700 text-white py-3 px-6 rounded-lg shadow-xl">Checkout</button>
  </div>
</div>

Material Design Tabs 구성 요소

Tailwind CSS를 사용하는 머티리얼 디자인 스타일의 탭 컴포넌트로, 반응형 효과와 어두운 테마 지원을 제공합니다.

열다 미리 보기

                <div class="w-full">
  <div class="border-b border-gray-200 dark:border-gray-700">
    <nav class="-mb-0.5 flex space-x-6" aria-label="Tabs">
      <button type="button" class="group inline-flex items-center border-b-2 py-4 px-1 text-sm font-medium" aria-current="page">
        <svg class="mr-2 h-5 w-5 text-indigo-500" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
          <path fill-rule="evenodd" d="M1.5 1.5A.75.75 0 000 2.25v13.5a.75.75 0 00.75.75h15a.75.75 0 00.75-.75V2.25a.75.75 0 00-.75-.75H1.5zM10.5 6a.75.75 0 00-1.5 0v6a.75.75 0 001.5 0V6zm3 0a.75.75 0 00-1.5 0v6a.75.75 0 001.5 0V6zM6 3a.75.75 0 00-1.5 0v9a.75.75 0 001.5 0V3z" clip-rule="evenodd" />
        </svg>
        <span class="text-indigo-600 dark:text-indigo-400">My Account</span>
      </button>
      <button type="button" class="group inline-flex items-center border-b-2 border-transparent py-4 px-1 text-sm font-medium text-gray-500 hover:border-gray-300 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300">
        <svg class="mr-2 h-5 w-5 text-gray-400 group-hover:text-gray-500" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
          <path fill-rule="evenodd" d="M8.625 9.75a.375.375 0 11-.75 0 .375.375 0 01.75 0zm0 3a.375.375 0 11-.75 0 .375.375 0 01.75 0zm1.875-3a.375.375 0 11-.75 0 .375.375 0 01.75 0zm0 3a.375.375 0 11-.75 0 .375.375 0 01.75 0zM3.375 21a1.125 1.125 0 001.125 1.125h15A1.125 1.125 0 0020.625 21V6.75a1.125 1.125 0 00-1.125-1.125h-15a1.125 1.125 0 00-1.125 1.125V21zM19.125 6.75a.375.375 0 00-.375-.375H4.875a.375.375 0 00-.375.375v13.5c0 .207.168.375.375.375h15c.207 0 .375-.168.375-.375V6.75z" clip-rule="evenodd" />
        </svg>
        <span class="text-gray-500 group-hover:text-gray-700 dark:text-gray-400 dark:group-hover:text-gray-300">Company</span>
      </button>
      <button type="button" class="group inline-flex items-center border-b-2 border-transparent py-4 px-1 text-sm font-medium text-gray-500 hover:border-gray-300 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300">
        <svg class="mr-2 h-5 w-5 text-gray-400 group-hover:text-gray-500" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
          <path d="M10.5 6a.75.75 0 100 1.5 1.5 1.5 0 011.5 1.5v1.5a.75.75 0 101.5 0V9a3 3 0 00-3-3zM3 19.5a1.5 1.5 0 011.5-1.5h15a1.5 1.5 0 011.5 1.5v.75a.75.75 0 01-.75.75H3.75a.75.75 0 01-.75-.75v-.75zM3 6.75A.75.75 0 013.75 6h.75a.75.75 0 01.75.75v.75a.75.75 0 01-.75.75h-.75A.75.75 0 013 7.5v-.75zM6 6.75A.75.75 0 016.75 6h.75a.75.75 0 01.75.75v.75a.75.75 0 01-.75.75h-.75A.75.75 0 016 7.5v-.75zM9 6.75A.75.75 0 019.75 6h.75a.75.75 0 01.75.75v.75a.75.75 0 01-.75.75h-.75A.75.75 0 019 7.5v-.75z" />
        </svg>
        <span class="text-gray-500 group-hover:text-gray-700 dark:text-gray-400 dark:group-hover:text-gray-300">Teams</span>
      </button>
      <button type="button" class="group inline-flex items-center border-b-2 border-transparent py-4 px-1 text-sm font-medium text-gray-500 hover:border-gray-300 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300">
        <svg class="mr-2 h-5 w-5 text-gray-400 group-hover:text-gray-500" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
          <path d="M12 1.5a.75.75 0 01.75.75V3a.75.75 0 01-1.5 0V2.25a.75.75 0 01.75-.75zM12 21a.75.75 0 01.75.75V22.5a.75.75 0 01-1.5 0V21.75a.75.75 0 01.75-.75zM19.5 8.25a.75.75 0 00-1.5 0v1.5a.75.75 0 001.5 0V8.25zM6 8.25a.75.75 0 00-1.5 0v1.5a.75.75 0 001.5 0V8.25zM19.5 15.75a.75.75 0 00-1.5 0v1.5a.75.75 0 001.5 0v-1.5zM6 15.75a.75.75 0 00-1.5 0v1.5a.75.75 0 001.5 0v-1.5zM15.75 3.75a.75.75 0 000 1.5h1.5a.75.75 0 000-1.5h-1.5zM6.75 3.75a.75.75 0 000 1.5h1.5a.75.75 0 000-1.5h-1.5zM15.75 18.75a.75.75 0 000 1.5h1.5a.75.75 0 000-1.5h-1.5zM6.75 18.75a.75.75 0 000 1.5h1.5a.75.75 0 000-1.5h-1.5zM12 6.75a3 3 0 100 6 3 3 0 000-6z" />
        </svg>
        <span class="text-gray-500 group-hover:text-gray-700 dark:text-gray-400 dark:group-hover:text-gray-300">Billing</span>
      </button>
      <button type="button" class="group inline-flex items-center border-b-2 border-transparent py-4 px-1 text-sm font-medium text-gray-500 hover:border-gray-300 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300">
        <svg class="mr-2 h-5 w-5 text-gray-400 group-hover:text-gray-500" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
          <path fill-rule="evenodd" d="M12 2.25c-5.385 0-9.75 4.365-9.75 9.75s4.365 9.75 9.75 9.75 9.75-4.365 9.75-9.75S17.385 2.25 12 2.25zM12.75 9a.75.75 0 00-1.5 0v2.25H9a.75.75 0 000 1.5h2.25V15a.75.75 0 001.5 0v-2.25H15a.75.75 0 000-1.5h-2.25V9z" clip-rule="evenodd" />
        </svg>
        <span class="text-gray-500 group-hover:text-gray-700 dark:text-gray-400 dark:group-hover:text-gray-300">Integrations</span>
      </button>
    </nav>
  </div>
</div>

Layout Components 컴포넌트

실제 세계를 모방한 스큐어모픽 스타일로 디자인된 레이아웃 구성 요소로, Tailwind CSS를 사용하여 반응형 요소와 어두운 테마를 지원합니다.

열다 미리 보기

                <div class="min-h-screen flex flex-col bg-gray-100 dark:bg-gray-900">
    <header class="bg-white dark:bg-gray-800 shadow-md flex justify-between items-center p-4 rounded-lg">
        <h1 class="text-xl font-bold text-gray-800 dark:text-white">My Skeuomorphic Layout</h1>
        <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-2 border-gray-300 dark:border-gray-700">
    </header>
    <main class="flex-grow p-4 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
        <div class="bg-white dark:bg-gray-800 shadow-lg rounded-lg overflow-hidden transition-all transform hover:scale-105">
            <img src="https://picsum.photos/300/200?random=1" alt="Placeholder" class="w-full h-32 object-cover mb-2">
            <div class="p-4">
                <h2 class="text-lg font-semibold text-gray-800 dark:text-white">Card Title</h2>
                <p class="text-gray-600 dark:text-gray-400">This is a brief description of the card content. It mimics a real-world element.</p>
            </div>
        </div>
        <div class="bg-white dark:bg-gray-800 shadow-lg rounded-lg overflow-hidden transition-all transform hover:scale-105">
            <img src="https://picsum.photos/300/200?random=2" alt="Placeholder" class="w-full h-32 object-cover mb-2">
            <div class="p-4">
                <h2 class="text-lg font-semibold text-gray-800 dark:text-white">Card Title</h2>
                <p class="text-gray-600 dark:text-gray-400">This is a brief description of the card content. It mimics a real-world element.</p>
            </div>
        </div>
        <div class="bg-white dark:bg-gray-800 shadow-lg rounded-lg overflow-hidden transition-all transform hover:scale-105">
            <img src="https://picsum.photos/300/200?random=3" alt="Placeholder" class="w-full h-32 object-cover mb-2">
            <div class="p-4">
                <h2 class="text-lg font-semibold text-gray-800 dark:text-white">Card Title</h2>
                <p class="text-gray-600 dark:text-gray-400">This is a brief description of the card content. It mimics a real-world element.</p>
            </div>
        </div>
    </main>
    <footer class="bg-white dark:bg-gray-800 shadow-md p-4 text-center rounded-lg">
        <p class="text-gray-600 dark:text-gray-400">© 2023 My Company. All rights reserved.</p>
    </footer>
</div>

Breadcrumb Navigation 구성 요소

Tailwind CSS를 사용하여 만든 다크 모드를 지원하는 Neumorphism 스타일로 설계된 반응형 이동 경로 탐색 구성 요소입니다.

열다 미리 보기

                <nav class="bg-white dark:bg-gray-800 shadow-lg rounded-lg p-4 mx-4">
    <ol class="list-reset flex items-center space-x-2">
        <li>
            <a href="#" class="text-gray-600 dark:text-gray-400 hover:text-blue-500 dark:hover:text-blue-300 transition duration-300">
                Home
            </a>
            <svg class="w-4 h-4 text-gray-400 dark:text-gray-600" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 12h14m-7 7l7-7-7-7" /></svg>
        </li>
        <li>
            <a href="#" class="text-gray-600 dark:text-gray-400 hover:text-blue-500 dark:hover:text-blue-300 transition duration-300">
                Category
            </a>
            <svg class="w-4 h-4 text-gray-400 dark:text-gray-600" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 12h14m-7 7l7-7-7-7" /></svg>
        </li>
        <li>
            <span class="text-gray-400 dark:text-gray-600">
                Sub-category
            </span>
        </li>
    </ol>
</nav>

<style>
    /* Neumorphism Styling */
    .bg-white {
        box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.1), -10px -10px 20px rgba(255, 255, 255, 0.7);
    }
    .dark .bg-gray-800 {
        box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.3), -10px -10px 20px rgba(0, 0, 0, 0.7);
    }
    a {
        transition: all 0.3s ease;
    }
</style>

1 ... 274 275 276 277 278 ... 315

검색 구성 요소

카테고리

모든 구성 요소