검색 구성 요소

모든 구성 요소

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

Breadcrumb Navigation 구성 요소

다크 모드를 지원하는 Tailwind CSS 이동 경로 탐색 구성 요소.

                <nav class="flex" aria-label="Breadcrumb">
  <ol class="inline-flex items-center space-x-1 md:space-x-3">
    <li class="inline-flex items-center">
      <a href="#" class="inline-flex items-center text-sm font-medium text-gray-700 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white">
        <svg class="w-4 h-4 mr-2" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M10.707 2.293a1 1 0 00-1.414 0l-7 7a1 1 0 001.414 1.414L4 10.414V17a1 1 0 001 1h2a1 1 0 001-1v-2a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 001 1h2a1 1 0 001-1v-6.586l.293.293a1 1 0 001.414-1.414l-7-7z"></path></svg>
        Home
      </a>
    </li>
    <li>
      <div class="flex items-center">
        <svg class="w-6 h-6 text-gray-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"></path></svg>
        <a href="#" class="ml-1 text-sm font-medium text-gray-700 hover:text-gray-900 md:ml-2 dark:text-gray-400 dark:hover:text-white">Projects</a>
      </div>
    </li>
    <li aria-current="page">
      <div class="flex items-center">
        <svg class="w-6 h-6 text-gray-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"></path></svg>
        <span class="ml-1 text-sm font-medium text-gray-400 md:ml-2 dark:text-gray-500">Flowbite</span>
      </div>
    </li>
  </ol>
</nav>

탭 구성 요소

Tailwind CSS를 사용하여 다크 모드용으로 설계된 반응형 탭 구성 요소입니다. 사용자가 클릭하여 콘텐츠를 표시할 수 있는 다양한 탭과 함께 자리 표시자 이미지 및 아바타가 있습니다.

열다 미리 보기

                <div class="bg-gray-800 text-white rounded-lg shadow-md">
    <div class="flex border-b border-gray-700">
        <button class="py-2 px-4 text-sm font-medium hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-gray-600" onclick="showTab('tab1')">Tab 1</button>
        <button class="py-2 px-4 text-sm font-medium hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-gray-600" onclick="showTab('tab2')">Tab 2</button>
        <button class="py-2 px-4 text-sm font-medium hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-gray-600" onclick="showTab('tab3')">Tab 3</button>
    </div>
    <div id="tab1" class="p-4">
        <h2 class="text-lg font-semibold">Tab 1 Content</h2>
        <p>Content for tab 1 goes here.</p>
        <img src="https://picsum.photos/400/200?random=1" alt="Placeholder Image" class="rounded-md mt-2">
        <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-2">
            <span>John Doe</span>
        </div>
    </div>
    <div id="tab2" class="hidden p-4">
        <h2 class="text-lg font-semibold">Tab 2 Content</h2>
        <p>Content for tab 2 goes here.</p>
        <img src="https://picsum.photos/400/200?random=2" alt="Placeholder Image" class="rounded-md mt-2">
        <div class="flex items-center mt-4">
            <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-2">
            <span>Jane Doe</span>
        </div>
    </div>
    <div id="tab3" class="hidden p-4">
        <h2 class="text-lg font-semibold">Tab 3 Content</h2>
        <p>Content for tab 3 goes here.</p>
        <img src="https://picsum.photos/400/200?random=3" alt="Placeholder Image" class="rounded-md mt-2">
        <div class="flex items-center mt-4">
            <img src="https://randomuser.me/api/portraits/men/2.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-2">
            <span>Mike Smith</span>
        </div>
    </div>
</div>

소셜 로그인 구성 요소

레트로/빈티지에서 영감을 받은 소셜 로그인 구성 요소로, 다크 모드 지원, 반응형 디자인, 80년대/90년대의 향수를 불러일으키는 미학을 갖추고 있습니다.

열다 미리 보기

                <div class="flex flex-col items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
    <div class="bg-white dark:bg-gray-800 shadow-md rounded-lg p-6 max-w-sm w-full text-center">
        <h2 class="text-xl font-bold text-gray-800 dark:text-gray-200 mb-4">Welcome Back!</h2>
        <p class="text-gray-600 dark:text-gray-400 mb-6">Login with your favorite social media account</p>
        <div class="flex flex-col space-y-4">
            <a href="#" class="flex items-center justify-center space-x-2 border-2 border-blue-500 rounded-lg py-2 hover:bg-blue-500 hover:text-white transition duration-300">
                <img src="https://picsum.photos/24/24" alt="Facebook Avatar" class="rounded-full">
                <span class="font-semibold">Login with Facebook</span>
            </a>
            <a href="#" class="flex items-center justify-center space-x-2 border-2 border-red-500 rounded-lg py-2 hover:bg-red-500 hover:text-white transition duration-300">
                <img src="https://picsum.photos/24/24" alt="Google Avatar" class="rounded-full">
                <span class="font-semibold">Login with Google</span>
            </a>
            <a href="#" class="flex items-center justify-center space-x-2 border-2 border-yellow-500 rounded-lg py-2 hover:bg-yellow-500 hover:text-white transition duration-300">
                <img src="https://picsum.photos/24/24" alt="Twitter Avatar" class="rounded-full">
                <span class="font-semibold">Login with Twitter</span>
            </a>
        </div>
        <div class="mt-6">
            <span class="text-gray-500 dark:text-gray-400">Or login with your email</span>
        </div>
        <input type="email" placeholder="Email" class="mt-2 w-full p-2 rounded-lg border border-gray-300 dark:border-gray-700 bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-gray-200 focus:outline-none focus:ring focus:ring-blue-500 dark:focus:ring-blue-500">
        <input type="password" placeholder="Password" class="mt-2 w-full p-2 rounded-lg border border-gray-300 dark:border-gray-700 bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-gray-200 focus:outline-none focus:ring focus:ring-blue-500 dark:focus:ring-blue-500">
        <button class="mt-4 w-full bg-blue-500 hover:bg-blue-600 text-white font-semibold rounded-lg py-2 transition duration-300">Login</button>
    </div>
    <div class="mt-4 text-gray-500 dark:text-gray-400">
        <span>Don't have an account? <a href="#" class="text-blue-500 hover:underline">Sign up</a></span>
    </div>
</div>

Session Timeout Alert 구성 요소

반응형 세션 시간 초과 경고 구성 요소로, 3D 디자인 스타일, 어두운 테마 지원 및 자리 표시자 이미지를 통합합니다.

열다 미리 보기

                <div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
    <div class="w-full max-w-md p-6 bg-white dark:bg-gray-800 rounded-lg shadow-lg transform transition-all hover:scale-105">
        <div class="flex items-center mb-4">
            <img src="https://randomuser.me/api/portraits/men/46.jpg" alt="User Avatar" class="w-16 h-16 rounded-full shadow-md">
            <div class="ml-4">
                <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Session Timeout Alert</h2>
                <p class="text-gray-600 dark:text-gray-400">Your session will expire soon.</p>
            </div>
        </div>
        <div class="mb-4">
            <img src="https://picsum.photos/400/200" alt="Alert Image" class="w-full h-32 object-cover rounded-lg shadow-md">
        </div>
        <p class="text-gray-600 dark:text-gray-400">To maintain security, please save your work and log back in soon.</p>
        <div class="mt-6 flex justify-between">
            <button class="px-4 py-2 text-white bg-blue-500 hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-400 rounded-lg shadow-md">Stay Logged In</button>
            <button class="px-4 py-2 text-gray-700 bg-gray-300 hover:bg-gray-400 focus:outline-none focus:ring-2 focus:ring-gray-300 rounded-lg shadow-md">Log Out</button>
        </div>
    </div>
</div>

데이터 테이블

머티리얼 디자인 스타일의 반응형 데이터 테이블 구성요소로, 자바스크립트 없이 다크 모드와 반응형 동작을 지원합니다. 데모용 자리 표시자 이미지가 포함되어 있습니다.

열다 미리 보기

                <div class="container mx-auto p-4 dark:bg-gray-900">
  <div class="shadow overflow-hidden border-b border-gray-200 dark:border-gray-800 sm:rounded-lg">
    <table class="min-w-full divide-y divide-gray-200 dark:divide-gray-800">
      <thead class="bg-gray-50 dark:bg-gray-800">
        <tr>
          <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">
            Name
          </th>
          <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">
            Title
          </th>
          <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">
            Status
          </th>
          <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">
            Role
          </th>
          <th scope="col" class="relative px-6 py-3">
            <span class="sr-only">Edit</span>
          </th>
        </tr>
      </thead>
      <tbody class="bg-white dark:bg-gray-900 divide-y divide-gray-200 dark:divide-gray-800">
        <tr>
          <td class="px-6 py-4 whitespace-nowrap">
            <div class="flex items-center">
              <div class="flex-shrink-0 h-10 w-10">
                <img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="">
              </div>
              <div class="ml-4">
                <div class="text-sm font-medium text-gray-900 dark:text-white">
                  John Doe
                </div>
                <div class="text-sm text-gray-500 dark:text-gray-400">
                  [email protected]
                </div>
              </div>
            </div>
          </td>
          <td class="px-6 py-4 whitespace-nowrap">
            <div class="text-sm text-gray-900 dark:text-white">Software Engineer</div>
            <div class="text-sm text-gray-500 dark:text-gray-400">Optimization</div>
          </td>
          <td class="px-6 py-4 whitespace-nowrap">
            <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 dark:bg-green-800 text-green-800 dark:text-green-100">
              Active
            </span>
          </td>
          <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">
            Admin
          </td>
          <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
            <a href="#" class="text-indigo-600 hover:text-indigo-900 dark:text-indigo-400 dark:hover:text-indigo-600">Edit</a>
          </td>
        </tr>
        <tr>
          <td class="px-6 py-4 whitespace-nowrap">
            <div class="flex items-center">
              <div class="flex-shrink-0 h-10 w-10">
                <img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/women/2.jpg" alt="">
              </div>
              <div class="ml-4">
                <div class="text-sm font-medium text-gray-900 dark:text-white">
                  Jane Smith
                </div>
                <div class="text-sm text-gray-500 dark:text-gray-400">
                  [email protected]
                </div>
              </div>
            </div>
          </td>
          <td class="px-6 py-4 whitespace-nowrap">
            <div class="text-sm text-gray-900 dark:text-white">UI/UX Designer</div>
            <div class="text-sm text-gray-500 dark:text-gray-400">Creative</div>
          </td>
          <td class="px-6 py-4 whitespace-nowrap">
            <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-yellow-100 dark:bg-yellow-800 text-yellow-800 dark:text-yellow-100">
              Pending
            </span>
          </td>
          <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">
            User
          </td>
          <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
            <a href="#" class="text-indigo-600 hover:text-indigo-900 dark:text-indigo-400 dark:hover:text-indigo-600">Edit</a>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

Shopping Cart 구성 요소

다크 모드 지원과 반응형 디자인을 갖춘 브루탈리즘 장바구니 구성 요소입니다.

열다 미리 보기

                <div class="container mx-auto p-4 bg-gray-100 dark:bg-gray-900 border-4 border-black dark:border-white">
  <h1 class="text-2xl font-bold mb-4 text-black dark:text-white">Shopping Cart</h1>
  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
    <div class="border-2 border-black dark:border-white p-4 relative">
      <img src="https://picsum.photos/seed/item1/300/200" alt="Item 1" class="w-full h-48 object-cover mb-4 border-4 border-black dark:border-white">
      <h2 class="text-xl font-bold mb-2 text-black dark:text-white">Item 1</h2>
      <p class="text-gray-700 dark:text-gray-300 mb-2">Description of item 1.</p>
      <p class="text-black dark:text-white font-bold">$19.99</p>
      <button class="mt-4 p-2 bg-black text-white dark:bg-white dark:text-black border-2 border-black dark:border-white absolute bottom-4 right-4">Remove</button>
    </div>
    <div class="border-2 border-black dark:border-white p-4 relative">
      <img src="https://picsum.photos/seed/item2/300/200" alt="Item 2" class="w-full h-48 object-cover mb-4 border-4 border-black dark:border-white">
      <h2 class="text-xl font-bold mb-2 text-black dark:text-white">Item 2</h2>
      <p class="text-gray-700 dark:text-gray-300 mb-2">Description of item 2.</p>
      <p class="text-black dark:text-white font-bold">$29.99</p>
      <button class="mt-4 p-2 bg-black text-white dark:bg-white dark:text-black border-2 border-black dark:border-white absolute bottom-4 right-4">Remove</button>
    </div>
    <div class="border-2 border-black dark:border-white p-4 relative">
      <img src="https://picsum.photos/seed/item3/300/200" alt="Item 3" class="w-full h-48 object-cover mb-4 border-4 border-black dark:border-white">
      <h2 class="text-xl font-bold mb-2 text-black dark:text-white">Item 3</h2>
      <p class="text-gray-700 dark:text-gray-300 mb-2">Description of item 3.</p>
      <p class="text-black dark:text-white font-bold">$39.99</p>
      <button class="mt-4 p-2 bg-black text-white dark:bg-white dark:text-black border-2 border-black dark:border-white absolute bottom-4 right-4">Remove</button>
    </div>
  </div>
  <div class="mt-8 border-t-4 border-black dark:border-white pt-4 flex justify-between items-center">
    <h2 class="text-xl font-bold text-black dark:text-white">Total:</h2>
    <p class="text-xl font-bold text-black dark:text-white">$89.97</p>
  </div>
  <div class="mt-4 flex justify-end">
    <button class="p-4 bg-black text-white dark:bg-white dark:text-black border-4 border-black dark:border-white text-xl font-bold">Checkout</button>
  </div>
</div>

Navigation 구성 요소

Tailwind CSS로 디자인된 레트로/빈티지에서 영감을 받은 탐색 구성 요소로, 반응형 효과와 어두운 테마 지원을 제공합니다.

열다 미리 보기

                <nav class="bg-gray-800 text-white py-4 shadow-lg">
    <div class="container mx-auto flex justify-between items-center">
        <div class="flex items-center space-x-4">
            <a href="#" class="text-xl font-bold hover:text-gray-400 transition duration-300">RetroNav</a>
            <ul class="hidden md:flex space-x-4">
                <li><a href="#" class="hover:text-gray-400 transition duration-300">Home</a></li>
                <li><a href="#" class="hover:text-gray-400 transition duration-300">About</a></li>
                <li><a href="#" class="hover:text-gray-400 transition duration-300">Services</a></li>
                <li><a href="#" class="hover:text-gray-400 transition duration-300">Contact</a></li>
            </ul>
        </div>
        <div class="md:hidden">
            <button class="text-gray-400 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 12h16m-7 6h7" />
                </svg>
            </button>
        </div>
    </div>
</nav>

<div class="bg-gray-900 text-white p-8 flex flex-col items-center">
    <h1 class="text-3xl font-bold mb-4">Welcome to RetroNav</h1>
    <p class="mb-4">Experience the nostalgia of the 80s and 90s with our vintage-inspired designs.</p>
    <img src="https://picsum.photos/300/200?random=1" alt="Random Image" class="mb-4 rounded-lg shadow-md">
    <div class="flex items-center space-x-4">
        <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-12 h-12 rounded-full border-2 border-gray-600">
        <span class="font-semibold">User Name</span>
    </div>
</div>

<style>
    /* Dark mode support */
    @media (prefers-color-scheme: dark) {
        body {
            background-color: #1a1a1a;
            color: white;
        }
        nav {
            background-color: #2c2c2c;
        }
    }
</style>

Chat Window 구성 요소

머티리얼 디자인 원칙과 Tailwind CSS로 스타일이 지정된 반응형 채팅 창 구성 요소로, 다크 모드를 지원합니다.

열다 미리 보기

                <div class="bg-white dark:bg-gray-800 shadow-lg rounded-lg max-w-md w-full p-4">
    <div class="flex items-center justify-between mb-4">
        <h2 class="text-lg font-semibold text-gray-800 dark:text-white">Chat Window</h2>
        <button class="text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white focus:outline-none">
            <span>&times;</span>
        </button>
    </div>
    <div class="flex flex-col space-y-4 overflow-y-auto h-64">
        <div class="flex items-start space-x-2">
            <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/10.jpg" alt="User Avatar">
            <div class="bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-white p-2 rounded-lg shadow-md">
                Hello! How are you?
            </div>
        </div>
        <div class="flex items-start space-x-2 justify-end">
            <div class="bg-blue-500 text-white p-2 rounded-lg shadow-md">
                I am fine, thank you! And you?
            </div>
            <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/women/10.jpg" alt="User Avatar">
        </div>
        <div class="flex items-start space-x-2">
            <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/11.jpg" alt="User Avatar">
            <div class="bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-white p-2 rounded-lg shadow-md">
                Doing great! Just working on some projects.
            </div>
        </div>
        <div class="flex items-start space-x-2 justify-end">
            <div class="bg-blue-500 text-white p-2 rounded-lg shadow-md">
                That sounds interesting!
            </div>
            <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/women/11.jpg" alt="User Avatar">
        </div>
    </div>
    <div class="mt-4">
        <input type="text" placeholder="Type your message..." class="w-full bg-gray-100 dark:bg-gray-600 border border-gray-300 rounded-lg p-2 focus:outline-none focus:ring focus:ring-blue-300 dark:focus:ring-blue-600">
    </div>
</div>

필터 구성 요소

마이크로 인터랙션으로 디자인되고 어두운 테마 지원에 최적화된 반응형 필터 구성 요소입니다.

열다 미리 보기

                <div class="bg-white dark:bg-gray-800 p-5 rounded-lg shadow-md transition-all duration-300">
    <h2 class="text-xl font-semibold mb-4">Filters</h2>
    <div class="flex flex-col md:flex-row md:space-x-4 mb-4">
        <input type="text" placeholder="Search..." class="border rounded-lg p-2 focus:outline-none focus:ring focus:ring-purple-500 dark:bg-gray-900 dark:border-gray-600 transition duration-300" />
        <select class="border rounded-lg p-2 focus:outline-none focus:ring focus:ring-purple-500 dark:bg-gray-900 dark:border-gray-600 transition duration-300">
            <option value="">Select Category</option>
            <option value="category1">Category 1</option>
            <option value="category2">Category 2</option>
        </select>
        <button class="bg-purple-500 text-white rounded-lg p-2 hover:bg-purple-600 transition duration-300 dark:bg-purple-700 dark:hover:bg-purple-600">Apply</button>
    </div>
    <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
        <div class="bg-gray-200 dark:bg-gray-700 p-4 rounded-lg shadow transition duration-300 hover:shadow-lg">
            <img src="https://picsum.photos/200?random=1" alt="Random Image" class="w-full h-32 object-cover rounded-md mb-2" />
            <h3 class="text-lg font-medium">Filter Item 1</h3>
        </div>
        <div class="bg-gray-200 dark:bg-gray-700 p-4 rounded-lg shadow transition duration-300 hover:shadow-lg">
            <img src="https://picsum.photos/200?random=2" alt="Random Image" class="w-full h-32 object-cover rounded-md mb-2" />
            <h3 class="text-lg font-medium">Filter Item 2</h3>
        </div>
        <div class="bg-gray-200 dark:bg-gray-700 p-4 rounded-lg shadow transition duration-300 hover:shadow-lg">
            <img src="https://picsum.photos/200?random=3" alt="Random Image" class="w-full h-32 object-cover rounded-md mb-2" />
            <h3 class="text-lg font-medium">Filter Item 3</h3>
        </div>
    </div>
    <div class="mt-4">
        <p class="text-sm text-gray-600 dark:text-gray-400">Using filters can help narrow down your search results based on your preferences!</p>
    </div>
</div>

Shopping Cart 구성 요소

Brutalism 디자인, 반응형 효과 및 어두운 테마를 지원하는 장바구니 구성 요소.

열다 미리 보기

                <div class="container mx-auto p-8 bg-gray-100 dark:bg-gray-900 text-gray-900 dark:text-gray-100 font-mono">
  <h1 class="text-5xl font-bold mb-8 border-b-4 border-gray-900 dark:border-gray-100 pb-2">Your Cart</h1>
  <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
    <div class="bg-white dark:bg-gray-800 p-6 border-4 border-gray-900 dark:border-gray-100">
      <div class="flex justify-between items-center mb-4">
        <h2 class="text-2xl font-bold">Item Name</h2>
        <span class="text-xl font-bold">$99.99</span>
      </div>
      <p class="mb-4">Brief description of the item goes here. Brutalist aesthetic with high contrast and strong lines.</p>
      <div class="flex justify-between items-center">
        <div class="flex items-center">
          <button class="bg-gray-900 dark:bg-gray-100 text-white dark:text-gray-900 px-3 py-1 font-bold text-xl border-4 border-gray-900 dark:border-gray-100 border-r-0">-</button>
          <span class="px-4 py-1 border-y-4 border-gray-900 dark:border-gray-100 text-xl">1</span>
          <button class="bg-gray-900 dark:bg-gray-100 text-white dark:text-gray-900 px-3 py-1 font-bold text-xl border-4 border-gray-900 dark:border-gray-100 border-l-0">+</button>
        </div>
        <button class="text-red-600 font-bold border-4 border-red-600 px-4 py-2">Remove</button>
      </div>
    </div>
        <div class="bg-white dark:bg-gray-800 p-6 border-4 border-gray-900 dark:border-gray-100">
      <div class="flex justify-between items-center mb-4">
        <h2 class="text-2xl font-bold">Another Item</h2>
        <span class="text-xl font-bold">$199.99</span>
      </div>
      <p class="mb-4">Another description for another item. Keeping with the raw and bold design principles.</p>
      <div class="flex justify-between items-center">
        <div class="flex items-center">
          <button class="bg-gray-900 dark:bg-gray-100 text-white dark:text-gray-900 px-3 py-1 font-bold text-xl border-4 border-gray-900 dark:border-gray-100 border-r-0">-</button>
          <span class="px-4 py-1 border-y-4 border-gray-900 dark:border-gray-100 text-xl">2</span>
          <button class="bg-gray-900 dark:bg-gray-100 text-white dark:text-gray-900 px-3 py-1 font-bold text-xl border-4 border-gray-900 dark:border-gray-100 border-l-0">+</button>
        </div>
        <button class="text-red-600 font-bold border-4 border-red-600 px-4 py-2">Remove</button>
      </div>
    </div>
  </div>
  <div class="mt-8 border-t-4 border-gray-900 dark:border-gray-100 pt-8 flex justify-between items-center">
    <h2 class="text-3xl font-bold">Total</h2>
    <span class="text-3xl font-bold">$299.98</span>
  </div>
  <div class="mt-8 text-right">
    <button class="bg-gray-900 dark:bg-gray-100 text-white dark:text-gray-900 text-2xl font-bold px-8 py-4 border-4 border-gray-900 dark:border-gray-100">Checkout</button>
  </div>
</div>

1 ... 291 292 293 294 295 ... 315

검색 구성 요소

카테고리

모든 구성 요소