모든 구성 요소

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

위시리스트 컴포넌트

3D 요소, 흙색 및 작업 또는 제품을 보여주기 위한 다크 모드 지원으로 설계된 반응형 위시리스트 구성 요소입니다.

                <div class="max-w-md mx-auto p-6 bg-white dark:bg-gray-800 rounded-lg shadow-lg transition-transform transform hover:scale-105">  
    <h2 class="text-2xl font-semibold text-gray-800 dark:text-gray-200 mb-4">Wishlist</h2>  
    <ul class="space-y-4">  
        <li class="p-4 bg-gray-100 dark:bg-gray-700 rounded-lg shadow-md flex items-center">  
            <img src="https://picsum.photos/100/100?random=1" alt="Product Image" class="w-16 h-16 rounded-md mr-4 shadow-lg">  
            <div class="flex-grow">  
                <h3 class="font-medium text-gray-800 dark:text-gray-200">Product Title 1</h3>  
                <p class="text-gray-600 dark:text-gray-400">Brief description of product 1.</p>  
            </div>  
            <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-full dark:bg-blue-600 dark:hover:bg-blue-700 transition duration-300">Add to Cart</button>  
        </li>  
        <li class="p-4 bg-gray-100 dark:bg-gray-700 rounded-lg shadow-md flex items-center">  
            <img src="https://picsum.photos/100/100?random=2" alt="Product Image" class="w-16 h-16 rounded-md mr-4 shadow-lg">  
            <div class="flex-grow">  
                <h3 class="font-medium text-gray-800 dark:text-gray-200">Product Title 2</h3>  
                <p class="text-gray-600 dark:text-gray-400">Brief description of product 2.</p>  
            </div>  
            <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-full dark:bg-blue-600 dark:hover:bg-blue-700 transition duration-300">Add to Cart</button>  
        </li>  
        <li class="p-4 bg-gray-100 dark:bg-gray-700 rounded-lg shadow-md flex items-center">  
            <img src="https://picsum.photos/100/100?random=3" alt="Product Image" class="w-16 h-16 rounded-md mr-4 shadow-lg">  
            <div class="flex-grow">  
                <h3 class="font-medium text-gray-800 dark:text-gray-200">Product Title 3</h3>  
                <p class="text-gray-600 dark:text-gray-400">Brief description of product 3.</p>  
            </div>  
            <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-full dark:bg-blue-600 dark:hover:bg-blue-700 transition duration-300">Add to Cart</button>  
        </li>  
    </ul>  
    <div class="mt-6">  
        <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-2">Profile</h3>  
        <div class="flex items-center p-4 bg-gray-100 dark:bg-gray-700 rounded-lg shadow-md">  
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-16 h-16 rounded-full mr-4">  
            <div>  
                <h4 class="font-medium text-gray-800 dark:text-gray-200">John Doe</h4>  
                <p class="text-gray-600 dark:text-gray-400">Lorem ipsum dolor sit amet.</p>  
            </div>  
        </div>  
    </div>  
</div>

Skeuomorphic E-commerce 컴포넌트

다크 모드를 지원하는 비즈니스 웹사이트를 위한 복잡하고 반응이 빠른 단색 Skeuomorphic E-commerce 구성 요소입니다.

열다 미리 보기

                <div class="container mx-auto p-6 bg-gray-100 dark:bg-gray-800">
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">

        <!-- Product Card 1 -->
        <div class="bg-white dark:bg-gray-700 rounded-lg shadow-xl overflow-hidden transform transition duration-500 hover:scale-105 ring-4 ring-gray-300 dark:ring-gray-600">
            <div class="relative">
                <img class="w-full h-48 object-cover" src="https://picsum.photos/seed/product1/400/300" alt="Product Image">
                <div class="absolute top-4 right-4 bg-blue-500 text-white dark:bg-blue-600 dark:text-gray-200 px-3 py-1 rounded-full text-sm font-bold">New</div>
            </div>
            <div class="p-6">
                <h3 class="text-xl font-bold text-gray-800 dark:text-gray-200 mb-2">Skeuomorphic Gadget Pro</h3>
                <p class="text-gray-600 dark:text-gray-400 text-sm mb-4">Experience the future with this innovative gadget featuring realistic textures and interactions.</p>
                <div class="flex items-center justify-between">
                    <span class="text-2xl font-bold text-gray-900 dark:text-white">$249.99</span>
                    <button class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-full shadow-lg transform transition duration-300 hover:scale-110 dark:bg-blue-700 dark:hover:bg-blue-800 dark:text-gray-200">
                        Add to Cart
                    </button>
                </div>
                <div class="mt-4 text-sm text-gray-500 dark:text-gray-400">
                    <p>In Stock: <span class="font-semibold">15</span></p>
                    <p>Shipping: <span class="font-semibold">Free</span></p>
                </div>
            </div>
        </div>

        <!-- Product Card 2 -->
        <div class="bg-white dark:bg-gray-700 rounded-lg shadow-xl overflow-hidden transform transition duration-500 hover:scale-105 ring-4 ring-gray-300 dark:ring-gray-600">
            <div class="relative">
                <img class="w-full h-48 object-cover" src="https://picsum.photos/seed/product2/400/300" alt="Product Image">
                <div class="absolute top-4 right-4 bg-green-500 text-white dark:bg-green-600 dark:text-gray-200 px-3 py-1 rounded-full text-sm font-bold">-20%</div>
            </div>
            <div class="p-6">
                <h3 class="text-xl font-bold text-gray-800 dark:text-gray-200 mb-2">Classic Audio Interface</h3>
                <p class="text-gray-600 dark:text-gray-400 text-sm mb-4">Relive the nostalgia with this classic audio interface, meticulously crafted with skeuomorphic elements.</p>
                <div class="flex items-center justify-between">
                    <span class="text-2xl font-bold text-gray-900 dark:text-white">$199.00</span>
                    <button class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-full shadow-lg transform transition duration-300 hover:scale-110 dark:bg-blue-700 dark:hover:bg-blue-800 dark:text-gray-200">
                        Add to Cart
                    </button>
                </div>
                 <div class="mt-4 text-sm text-gray-500 dark:text-gray-400">
                    <p>In Stock: <span class="font-semibold">8</span></p>
                    <p>Shipping: <span class="font-semibold">$9.99</span></p>
                </div>
            </div>
        </div>

        <!-- Product Card 3 -->
        <div class="bg-white dark:bg-gray-700 rounded-lg shadow-xl overflow-hidden transform transition duration-500 hover:scale-105 ring-4 ring-gray-300 dark:ring-gray-600">
            <div class="relative">
                <img class="w-full h-48 object-cover" src="https://picsum.photos/seed/product3/400/300" alt="Product Image">
                <div class="absolute top-4 right-4 bg-yellow-500 text-gray-800 dark:bg-yellow-600 dark:text-gray-200 px-3 py-1 rounded-full text-sm font-bold">Limited</div>
            </div>
            <div class="p-6">
                <h3 class="text-xl font-bold text-gray-800 dark:text-gray-200 mb-2">Vintage Camera Lens</h3>
                <p class="text-gray-600 dark:text-gray-400 text-sm mb-4">Capture moments with this vintage-inspired lens, designed with a focus on realistic visual depth.</p>
                <div class="flex items-center justify-between">
                    <span class="text-2xl font-bold text-gray-900 dark:text-white">$349.50</span>
                    <button class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-full shadow-lg transform transition duration-300 hover:scale-110 dark:bg-blue-700 dark:hover:bg-blue-800 dark:text-gray-200">
                        Add to Cart
                    </button>
                </div>
                 <div class="mt-4 text-sm text-gray-500 dark:text-gray-400">
                    <p>In Stock: <span class="font-semibold">3</span></p>
                    <p>Shipping: <span class="font-semibold">$4.99</span></p>
                </div>
            </div>
        </div>

    </div>

</div>

뉴모피즘 프로그레스 바

대시보드용으로 설계된 반응형 뉴모피즘 스타일의 진행률 표시줄 구성 요소로, 대화형 기능을 통합하고 다크 모드를 지원합니다.

열다 미리 보기

                <div class="max-w-md mx-auto mt-10 p-5 bg-gray-100 dark:bg-gray-800 rounded-xl shadow-md">
    <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-3">Progress Bar</h2>
    <div class="relative pt-1">
        <div class="flex justify-between mb-1">
            <span class="text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-teal-600 bg-teal-200 dark:bg-teal-600 dark:text-teal-200">Task 1</span>
            <span class="text-xs font-semibold text-gray-600 dark:text-gray-400">70%</span>
        </div>
        <div class="flex items-center h-2 bg-gray-300 dark:bg-gray-600 rounded-full">
            <div class="h-full bg-teal-400 rounded-full transition-all duration-300 w-7/12"></div>
        </div>
    </div>
    <div class="relative pt-1">
        <div class="flex justify-between mb-1">
            <span class="text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-purple-600 bg-purple-200 dark:bg-purple-600 dark:text-purple-200">Task 2</span>
            <span class="text-xs font-semibold text-gray-600 dark:text-gray-400">40%</span>
        </div>
        <div class="flex items-center h-2 bg-gray-300 dark:bg-gray-600 rounded-full">
            <div class="h-full bg-purple-400 rounded-full transition-all duration-300 w-5/12"></div>
        </div>
    </div>
    <div class="relative pt-1">
        <div class="flex justify-between mb-1">
            <span class="text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-blue-600 bg-blue-200 dark:bg-blue-600 dark:text-blue-200">Task 3</span>
            <span class="text-xs font-semibold text-gray-600 dark:text-gray-400">90%</span>
        </div>
        <div class="flex items-center h-2 bg-gray-300 dark:bg-gray-600 rounded-full">
            <div class="h-full bg-blue-400 rounded-full transition-all duration-300 w-11/12"></div>
        </div>
    </div>
</div>

위시리스트 컴포넌트

포트폴리오를 위한 단순하고 브루탈리즘 스타일의 위시리스트 컴포넌트로, 고대비의 유사한 색 구성표를 특징으로 합니다. Tailwind CSS를 사용한 다크 모드 지원으로 반응합니다.

열다 미리 보기

                <div class="dark:bg-gray-900 dark:text-gray-100 bg-gray-100 text-gray-900 min-h-screen flex items-center justify-center">
  <div class="container mx-auto p-4">
    <div class="border-4 border-black dark:border-white p-6">
      <h2 class="text-2xl font-bold mb-4 dark:text-white text-black">Wishlist</h2>
      <div class="space-y-4">
        <div class="flex items-center justify-between border-2 border-black dark:border-white p-4">
          <div class="flex items-center">
            <img src="https://picsum.photos/seed/picsum/50/50" alt="Product Image" class="w-12 h-12 object-cover mr-4 border border-black dark:border-white">
            <div>
              <h3 class="font-bold dark:text-white text-black">Product Name 1</h3>
              <p class="text-sm dark:text-gray-300 text-gray-700">Category</p>
            </div>
          </div>
          <button class="bg-red-500 dark:bg-red-700 text-white py-2 px-4 border border-black dark:border-white">Remove</button>
        </div>
        <div class="flex items-center justify-between border-2 border-black dark:border-white p-4">
          <div class="flex items-center">
            <img src="https://picsum.photos/seed/picsum/50/50" alt="Product Image" class="w-12 h-12 object-cover mr-4 border border-black dark:border-white">
            <div>
              <h3 class="font-bold dark:text-white text-black">Product Name 2</h3>
              <p class="text-sm dark:text-gray-300 text-gray-700">Category</p>
            </div>
          </div>
          <button class="bg-red-500 dark:bg-red-700 text-white py-2 px-4 border border-black dark:border-white">Remove</button>
        </div>
      </div>
    </div>
  </div>
</div>

Two-Factor Authentication 구성 요소

소셜 미디어 인터페이스에 적합한 흙색의 레트로 스타일로 설계된 간단하고 반응이 빠른 이중 인증 구성 요소입니다.

열다 미리 보기

                <div class="max-w-md mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6 mt-10">
    <h2 class="text-center text-2xl font-bold text-brown-700 dark:text-brown-300 mb-4">Two-Factor Authentication</h2>
    <p class="text-gray-700 dark:text-gray-300 text-center mb-6">Secure your account with an extra layer of security.</p>
    <div class="flex justify-center mb-4">
        <img src="https://picsum.photos/100/100" alt="Auth Image" class="rounded-full shadow-md">
    </div>
    <div class="mb-4">
        <label class="block text-gray-700 dark:text-gray-300 mb-2" for="auth-code">Authentication Code</label>
        <input type="text" id="auth-code" placeholder="Enter your code" class="w-full p-2 border border-gray-300 rounded-md dark:bg-gray-700 dark:border-gray-600 dark:text-gray-200">
    </div>
    <div class="flex justify-center">
        <button class="bg-brown-600 text-white font-bold py-2 px-4 rounded hover:bg-brown-500 dark:bg-brown-400 dark:hover:bg-brown-300">Verify</button>
    </div>
</div>

Sidebar Navigation 구성 요소

Brutalism 스타일로 설계된 반응형 사이드바 탐색 구성 요소로, 전자 상거래 애플리케이션에 적합합니다. 생생한 색상, 고대비, 다양한 쇼핑 카테고리에 대한 링크, 사용자 계정 옵션, 장바구니 액세스를 위한 생생한 클릭 유도문안 버튼을 포함한 여러 대화형 요소가 특징입니다. 디자인은 다크 모드에도 적용됩니다.

열다 미리 보기

                <div class="flex flex-col w-64 h-screen p-4 bg-white dark:bg-gray-800 border-r border-gray-200 dark:border-gray-700">
    <h1 class="text-3xl font-bold text-vibrant-500 dark:text-vibrant-300">Shop Sidebar</h1>
    <ul class="mt-6 space-y-4">
        <li>  
            <a href="#" class="flex items-center p-2 text-gray-900 dark:text-gray-100 hover:bg-vibrant-500 hover:text-white dark:hover:bg-vibrant-600 rounded-lg transition ease-in-out duration-150">
                <img src="https://picsum.photos/20/20" alt="Category Icon" class="mr-3">
                <span>Home</span>
            </a>
        </li>
        <li>
            <a href="#" class="flex items-center p-2 text-gray-900 dark:text-gray-100 hover:bg-vibrant-500 hover:text-white dark:hover:bg-vibrant-600 rounded-lg transition ease-in-out duration-150">
                <img src="https://picsum.photos/20/20" alt="Category Icon" class="mr-3">
                <span>Products</span>
            </a>
        </li>
        <li>
            <a href="#" class="flex items-center p-2 text-gray-900 dark:text-gray-100 hover:bg-vibrant-500 hover:text-white dark:hover:bg-vibrant-600 rounded-lg transition ease-in-out duration-150">
                <img src="https://picsum.photos/20/20" alt="Category Icon" class="mr-3">
                <span>Categories</span>
            </a>
        </li>
        <li>
            <a href="#" class="flex items-center p-2 text-gray-900 dark:text-gray-100 hover:bg-vibrant-500 hover:text-white dark:hover:bg-vibrant-600 rounded-lg transition ease-in-out duration-150">
                <img src="https://picsum.photos/20/20" alt="Category Icon" class="mr-3">
                <span>Deals</span>
            </a>
        </li>
        <li>
            <a href="#" class="flex items-center p-2 text-gray-900 dark:text-gray-100 hover:bg-vibrant-500 hover:text-white dark:hover:bg-vibrant-600 rounded-lg transition ease-in-out duration-150">
                <img src="https://picsum.photos/20/20" alt="Category Icon" class="mr-3">
                <span>Account</span>
            </a>
        </li>
    </ul>
    <div class="mt-6">
        <a href="#" class="flex items-center justify-center h-12 bg-vibrant-500 text-white font-bold rounded-lg shadow-lg hover:bg-vibrant-600 transition ease-in-out duration-150">
            <span>View Cart</span>
        </a>
    </div>
    <div class="mt-auto">
        <a href="#" class="flex items-center p-2 text-gray-900 dark:text-gray-100 hover:bg-vibrant-500 hover:text-white dark:hover:bg-vibrant-600 rounded-lg transition ease-in-out duration-150">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="rounded-full w-8 h-8 mr-3">
            <span>Profile</span>
        </a>
    </div>
</div>

갤러리 구성 요소

블로그/콘텐츠 목적을 위해 흙색을 사용한 Neumorphism 스타일의 갤러리 구성 요소. 이 구성 요소는 여러 대화형 요소, 반응형 디자인 및 어두운 테마 지원이 포함된 풍부한 인터페이스를 제공합니다.

열다 미리 보기

                <div class="container mx-auto p-6 bg-gray-50 dark:bg-gray-900 rounded-lg shadow-lg">  <h1 class="text-3xl font-bold text-gray-800 dark:text-gray-200 mb-6">Gallery</h1>  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">    <div class="bg-gray-200 dark:bg-gray-800 rounded-lg p-4 shadow-md hover:shadow-lg transition-shadow">      <img src="https://picsum.photos/300/200?random=1" alt="Gallery Image 1" class="rounded-lg mb-2">      <h2 class="text-xl font-semibold text-gray-700 dark:text-gray-300">Image Title 1</h2>      <p class="text-gray-600 dark:text-gray-400">Short description of the image.</p>    </div>    <div class="bg-gray-200 dark:bg-gray-800 rounded-lg p-4 shadow-md hover:shadow-lg transition-shadow">      <img src="https://picsum.photos/300/200?random=2" alt="Gallery Image 2" class="rounded-lg mb-2">      <h2 class="text-xl font-semibold text-gray-700 dark:text-gray-300">Image Title 2</h2>      <p class="text-gray-600 dark:text-gray-400">Short description of the image.</p>    </div>    <div class="bg-gray-200 dark:bg-gray-800 rounded-lg p-4 shadow-md hover:shadow-lg transition-shadow">      <img src="https://picsum.photos/300/200?random=3" alt="Gallery Image 3" class="rounded-lg mb-2">      <h2 class="text-xl font-semibold text-gray-700 dark:text-gray-300">Image Title 3</h2>      <p class="text-gray-600 dark:text-gray-400">Short description of the image.</p>    </div>    <div class="bg-gray-200 dark:bg-gray-800 rounded-lg p-4 shadow-md hover:shadow-lg transition-shadow">      <img src="https://picsum.photos/300/200?random=4" alt="Gallery Image 4" class="rounded-lg mb-2">      <h2 class="text-xl font-semibold text-gray-700 dark:text-gray-300">Image Title 4</h2>      <p class="text-gray-600 dark:text-gray-400">Short description of the image.</p>    </div>    <div class="bg-gray-200 dark:bg-gray-800 rounded-lg p-4 shadow-md hover:shadow-lg transition-shadow">      <img src="https://picsum.photos/300/200?random=5" alt="Gallery Image 5" class="rounded-lg mb-2">      <h2 class="text-xl font-semibold text-gray-700 dark:text-gray-300">Image Title 5</h2>      <p class="text-gray-600 dark:text-gray-400">Short description of the image.</p>    </div>    <div class="bg-gray-200 dark:bg-gray-800 rounded-lg p-4 shadow-md hover:shadow-lg transition-shadow">      <img src="https://picsum.photos/300/200?random=6" alt="Gallery Image 6" class="rounded-lg mb-2">      <h2 class="text-xl font-semibold text-gray-700 dark:text-gray-300">Image Title 6</h2>      <p class="text-gray-600 dark:text-gray-400">Short description of the image.</p>    </div>  </div>  <div class="mt-6 text-center">    <h3 class="text-lg font-bold text-gray-700 dark:text-gray-300">Author</h3>    <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Author Avatar" class="mx-auto rounded-full w-24 h-24">    <p class="text-gray-600 dark:text-gray-400">Author Name</p>  </div></div>

레트로 비디오 플레이어 컴포넌트

레트로/빈티지 미학으로 디자인된 인터랙티브 비디오 플레이어 구성 요소로, 그레이스케일 색 구성표와 전자 상거래에 적합한 여러 인터랙티브 요소를 특징으로 하며 다크 모드를 지원합니다.

열다 미리 보기

                <div class="bg-gray-800 p-6 rounded-lg shadow-lg max-w-lg mx-auto">
    <div class="relative video-wrapper">
        <video controls class="w-full rounded-lg border border-gray-400" poster="https://picsum.photos/600/300?random=1">
            <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
            Your browser does not support the video tag.
        </video>
        <div class="absolute top-3 right-3 flex items-center space-x-2">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full border-2 border-white shadow-md">
            <div class="text-gray-200">
                <h3 class="text-lg font-bold">Video Title</h3>
                <p class="text-sm">Uploaded by User Name</p>
            </div>
        </div>
    </div>
    <div class="mt-4">
        <div class="flex justify-between items-center">
            <button class="bg-gray-700 text-white px-4 py-2 rounded hover:bg-gray-600 dark:bg-gray-600 dark:hover:bg-gray-500">Add to Cart</button>
            <button class="bg-gray-700 text-white px-4 py-2 rounded hover:bg-gray-600 dark:bg-gray-600 dark:hover:bg-gray-500">Buy Now</button>
        </div>
        <div class="mt-4">
            <p class="text-gray-300 text-sm">Description: This retro video player component is perfect for showcasing video content within an e-commerce platform, evoking nostalgia with its vintage styles.</p>
        </div>
    </div>
</div>

레트로/빈티지 쇼핑 카트

레트로/빈티지 스타일, 파스텔 색 구성표 및 단순한 복잡성을 가진 장바구니 구성 요소. Tailwind CSS를 사용하여 어두운 테마를 지원하는 반응형 디자인.

열다 미리 보기

                <div class="container mx-auto p-6 bg-gradient-to-br from-purple-300 to-pink-300 dark:from-purple-700 dark:to-pink-700 font-mono">
  <div class="max-w-sm mx-auto bg-white dark:bg-gray-800 shadow-lg rounded-lg overflow-hidden">
    <div class="px-6 py-4">
      <h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-4">Your Cart</h2>
      
      <!-- Cart Item -->
      <div class="flex items-center mb-4">
        <img class="h-12 w-12 rounded-full object-cover mr-4" src="https://picsum.photos/seed/retro1/50/50" alt="Product Image">
        <div class="flex-grow">
          <p class="text-gray-700 dark:text-gray-300 font-semibold">Radical Sneakers</p>
          <p class="text-gray-600 dark:text-gray-400 text-sm">$89.99</p>
        </div>
        <span class="text-gray-700 dark:text-gray-300">x1</span>
      </div>
      
      <!-- Cart Item -->
      <div class="flex items-center mb-4">
        <img class="h-12 w-12 rounded-full object-cover mr-4" src="https://picsum.photos/seed/retro2/50/50" alt="Product Image">
        <div class="flex-grow">
          <p class="text-gray-700 dark:text-gray-300 font-semibold">Awesome Mixtape</p>
          <p class="text-gray-600 dark:text-gray-400 text-sm">$12.50</p>
        </div>
        <span class="text-gray-700 dark:text-gray-300">x2</span>
      </div>
      
      <!-- Total -->
      <div class="flex justify-between items-center border-t border-gray-300 dark:border-gray-600 pt-4 mt-4">
        <p class="text-xl font-bold text-gray-800 dark:text-white">Total:</p>
        <p class="text-xl font-bold text-gray-800 dark:text-white">$114.99</p>
      </div>
      
    </div>
    
    <div class="bg-gray-200 dark:bg-gray-700 px-6 py-4">
      <button class="block w-full bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline">
        Checkout
      </button>
    </div>
    
  </div>
</div>

Breadcrumb Navigation 구성 요소

블로그/콘텐츠 목적을 위한 레트로/빈티지 디자인, 생생한 색 구성표 및 단순 복잡성 수준을 갖춘 이동 경로 탐색 구성 요소.

열다 미리 보기

                <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="text-sm font-medium text-purple-700 hover:text-purple-900 dark:text-purple-400 dark:hover:text-white">
        Home
      </a>
    </li>
    <li>
      <div class="flex items-center">
        <svg class="w-4 h-4 text-purple-500" 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 10l-3.293-3.293a1 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-purple-700 hover:text-purple-900 md:ml-2 dark:text-purple-400 dark:hover:text-white">Articles</a>
      </div>
    </li>
    <li aria-current="page">
      <div class="flex items-center">
        <svg class="w-4 h-4 text-purple-500" 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 10l-3.293-3.293a1 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-purple-500 md:ml-2 dark:text-gray-500">This Article</span>
      </div>
    </li>
  </ol>
</nav>

1 ... 123 124 125 126 127 ... 242