모든 구성 요소

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

머티리얼 디자인 모달

반응형 디자인과 어두운 테마를 지원하는 Material Design 스타일의 Modal Component입니다. 모달 오버레이, 카드와 같은 모양의 모달 컨테이너 및 닫기 버튼이 포함됩니다. JavaScript는 포함되어 있지 않습니다.

열다 미리 보기

                <div class="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full">
  <div class="relative top-20 mx-auto p-5 border w-96 shadow-lg rounded-md bg-white dark:bg-gray-800">
    <div class="mt-3 text-center">
      <h3 class="text-lg leading-6 font-medium text-gray-900 dark:text-white">Modal Title</h3>
      <div class="mt-2 px-7 py-3">
        <p class="text-sm text-gray-500 dark:text-gray-300">Modal content goes here. This is a placeholder for your information.</p>
      </div>
      <div class="items-center px-4 py-3">
        <button id="ok-btn" class="px-4 py-2 bg-blue-500 text-white text-base font-medium rounded-md w-full shadow-sm hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500">Got It!</button>
      </div>
    </div>
  </div>
</div>

메가 메뉴 컴포넌트

Tailwind CSS로 디자인된 반응형 메가 메뉴 구성 요소로, 매력적인 애니메이션과 어두운 테마 지원을 위한 마이크로 인터랙션을 제공합니다.

열다 미리 보기

                <div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-lg">
    <div class="flex justify-between items-center">
        <h2 class="text-xl font-semibold text-gray-900 dark:text-white">Mega Menu</h2>
        <button class="focus:outline-none hover:bg-gray-200 dark:hover:bg-gray-700 p-2 rounded-lg transition ease-in-out duration-300">Menu</button>
    </div>
    <div class="mt-4 grid grid-cols-1 md:grid-cols-3 gap-4">
        <div class="bg-gray-100 dark:bg-gray-700 rounded-lg overflow-hidden p-4 transition-transform transform hover:scale-105">
            <h3 class="font-bold text-lg text-gray-900 dark:text-white">Category 1</h3>
            <ul class="mt-2">
                <li class="my-2 hover:text-blue-500 dark:hover:text-blue-300 transition duration-200"><a href="#">Item 1</a></li>
                <li class="my-2 hover:text-blue-500 dark:hover:text-blue-300 transition duration-200"><a href="#">Item 2</a></li>
                <li class="my-2 hover:text-blue-500 dark:hover:text-blue-300 transition duration-200"><a href="#">Item 3</a></li>
            </ul>
            <img src="https://picsum.photos/200/150?random=1" alt="Category 1" class="mt-4 rounded-lg w-full">
        </div>
        <div class="bg-gray-100 dark:bg-gray-700 rounded-lg overflow-hidden p-4 transition-transform transform hover:scale-105">
            <h3 class="font-bold text-lg text-gray-900 dark:text-white">Category 2</h3>
            <ul class="mt-2">
                <li class="my-2 hover:text-blue-500 dark:hover:text-blue-300 transition duration-200"><a href="#">Item 1</a></li>
                <li class="my-2 hover:text-blue-500 dark:hover:text-blue-300 transition duration-200"><a href="#">Item 2</a></li>
                <li class="my-2 hover:text-blue-500 dark:hover:text-blue-300 transition duration-200"><a href="#">Item 3</a></li>
            </ul>
            <img src="https://picsum.photos/200/150?random=2" alt="Category 2" class="mt-4 rounded-lg w-full">
        </div>
        <div class="bg-gray-100 dark:bg-gray-700 rounded-lg overflow-hidden p-4 transition-transform transform hover:scale-105">
            <h3 class="font-bold text-lg text-gray-900 dark:text-white">Category 3</h3>
            <ul class="mt-2">
                <li class="my-2 hover:text-blue-500 dark:hover:text-blue-300 transition duration-200"><a href="#">Item 1</a></li>
                <li class="my-2 hover:text-blue-500 dark:hover:text-blue-300 transition duration-200"><a href="#">Item 2</a></li>
                <li class="my-2 hover:text-blue-500 dark:hover:text-blue-300 transition duration-200"><a href="#">Item 3</a></li>
            </ul>
            <img src="https://picsum.photos/200/150?random=3" alt="Category 3" class="mt-4 rounded-lg w-full">
        </div>
    </div>
    <div class="mt-6 border-t border-gray-300 dark:border-gray-600 pt-4">
        <h4 class="font-semibold text-gray-900 dark:text-white">Follow Us</h4>
        <div class="flex space-x-4 mt-2">
            <a href="#" class="flex items-center space-x-2 transition duration-200 hover:text-blue-500 dark:hover:text-blue-300">
                <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User 1" class="w-8 h-8 rounded-full">
                <span>Profile 1</span>
            </a>
            <a href="#" class="flex items-center space-x-2 transition duration-200 hover:text-blue-500 dark:hover:text-blue-300">
                <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="User 2" class="w-8 h-8 rounded-full">
                <span>Profile 2</span>
            </a>
        </div>
    </div>
</div>

드롭다운 메뉴 컴포넌트

Tailwind CSS를 사용하는 머티리얼 디자인 원칙에 따라 설계된 반응형 드롭다운 메뉴 구성요소로, 어두운 모드를 지원하고 자리표시자 이미지를 포함합니다.

열다 미리 보기

                <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-offset-gray-100 focus:ring-indigo-500 dark:bg-gray-800 dark:text-gray-200 dark:border-gray-600 dark:hover:bg-gray-700" aria-haspopup="true" aria-expanded="true" aria-controls="options">
      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.23 7.21a.75.75 0 011.06 0l3.47 3.47 3.47-3.47a.75.75 0 111.06 1.06l-4.24 4.24a.75.75 0 01-1.06 0l-4.24-4.24a.75.75 0 010-1.06z" clip-rule="evenodd" />
      </svg>
    </button>
  </div>

  <div class="absolute z-10 mt-2 w-56 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 focus:outline-none dark:bg-gray-800" role="menu" aria-orientation="vertical" aria-labelledby="options-menu">
    <div class="py-1" role="none">
      <a href="#" class="text-gray-700 block px-4 py-2 text-sm hover:bg-gray-100 hover:text-gray-900 dark:text-gray-200 dark:hover:bg-gray-700 dark:hover:text-white" role="menuitem">
        Profile
      </a>
      <a href="#" class="text-gray-700 block px-4 py-2 text-sm hover:bg-gray-100 hover:text-gray-900 dark:text-gray-200 dark:hover:bg-gray-700 dark:hover:text-white" role="menuitem">
        Account
      </a>
      <a href="#" class="text-gray-700 block px-4 py-2 text-sm hover:bg-gray-100 hover:text-gray-900 dark:text-gray-200 dark:hover:bg-gray-700 dark:hover:text-white" role="menuitem">
        Dashboard
      </a>
      <div class="border-t border-gray-100 dark:border-gray-700"></div>
      <a href="#" class="text-gray-700 block px-4 py-2 text-sm hover:bg-gray-100 hover:text-gray-900 dark:text-gray-200 dark:hover:bg-gray-700 dark:hover:text-white" role="menuitem">
        Logout
      </a>
    </div>
  </div>
</div>

<div class="hidden md:flex md:items-center">
  <img src="https://picsum.photos/200/100?random=1" alt="Placeholder Image" class="h-10 w-10 rounded-full shadow-lg" />
  <span class="ml-2 text-sm font-medium text-gray-700 dark:text-gray-200">User Name</span>
</div>

제품 카드 구성 요소

Brutalism 스타일의 제품 카드 구성 요소로, 높은 대비, 반응형 효과 및 다크 모드를 지원합니다.

열다 미리 보기

                <div class="flex flex-wrap justify-center space-x-4 space-y-4 p-5 bg-gray-100 dark:bg-gray-800">
    <div class="max-w-sm rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-900 shadow overflow-hidden transition-transform transform hover:scale-105">
        <img class="w-full h-48 object-cover" src="https://picsum.photos/seed/pic1/400/300" alt="Product Image">
        <div class="p-4">
            <h2 class="font-bold text-xl text-gray-900 dark:text-white">Product Title</h2>
            <p class="text-gray-700 dark:text-gray-400">This is a brief description of the product, explaining its features and benefits.</p>
            <div class="flex items-center justify-between mt-4">
                <span class="text-gray-800 dark:text-gray-200 font-bold text-lg">$29.99</span>
                <button class="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 dark:bg-blue-700 dark:hover:bg-blue-800 focus:outline-none focus:ring">Add to Cart</button>
            </div>
        </div>
    </div>
    <div class="max-w-sm rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-900 shadow overflow-hidden transition-transform transform hover:scale-105">
        <img class="w-full h-48 object-cover" src="https://picsum.photos/seed/pic2/400/300" alt="Product Image">
        <div class="p-4">
            <h2 class="font-bold text-xl text-gray-900 dark:text-white">Product Title</h2>
            <p class="text-gray-700 dark:text-gray-400">This is a brief description of the product, explaining its features and benefits.</p>
            <div class="flex items-center justify-between mt-4">
                <span class="text-gray-800 dark:text-gray-200 font-bold text-lg">$39.99</span>
                <button class="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 dark:bg-blue-700 dark:hover:bg-blue-800 focus:outline-none focus:ring">Add to Cart</button>
            </div>
        </div>
    </div>
    <div class="max-w-sm rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-900 shadow overflow-hidden transition-transform transform hover:scale-105">
        <img class="w-full h-48 object-cover" src="https://picsum.photos/seed/pic3/400/300" alt="Product Image">
        <div class="p-4">
            <h2 class="font-bold text-xl text-gray-900 dark:text-white">Product Title</h2>
            <p class="text-gray-700 dark:text-gray-400">This is a brief description of the product, explaining its features and benefits.</p>
            <div class="flex items-center justify-between mt-4">
                <span class="text-gray-800 dark:text-gray-200 font-bold text-lg">$49.99</span>
                <button class="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 dark:bg-blue-700 dark:hover:bg-blue-800 focus:outline-none focus:ring">Add to Cart</button>
            </div>
        </div>
    </div>
</div>

아코디언 구성 요소

Neumorphism 디자인, 반응형 효과 및 어두운 테마를 지원하는 아코디언 구성 요소.

열다 미리 보기

                <div class="max-w-md mx-auto p-8">
  <div class="shadow-neumorphism-light dark:shadow-neumorphism-dark rounded-lg mb-4">
    <div class="p-4 cursor-pointer">
      <h3 class="text-lg font-medium text-gray-800 dark:text-gray-200">Section 1</h3>
    </div>
    <div class="p-4 hidden">
      <p class="text-gray-700 dark:text-gray-300">Content for section 1.</p>
    </div>
  </div>

  <div class="shadow-neumorphism-light dark:shadow-neumorphism-dark rounded-lg mb-4">
    <div class="p-4 cursor-pointer">
      <h3 class="text-lg font-medium text-gray-800 dark:text-gray-200">Section 2</h3>
    </div>
    <div class="p-4 hidden">
      <p class="text-gray-700 dark:text-gray-300">Content for section 2.</p>
    </div>
  </div>

  <div class="shadow-neumorphism-light dark:shadow-neumorphism-dark rounded-lg">
    <div class="p-4 cursor-pointer">
      <h3 class="text-lg font-medium text-gray-800 dark:text-gray-200">Section 3</h3>
    </div>
    <div class="p-4 hidden">
      <p class="text-gray-700 dark:text-gray-300">Content for section 3.</p>
    </div>
  </div>
</div>

<style>
.shadow-neumorphism-light {
  box-shadow: 7px 7px 15px #cbced1, -7px -7px 15px #ffffff;
}
.dark .shadow-neumorphism-dark {
  box-shadow: 7px 7px 15px #222222, -7px -7px 15px #444444;
}
</style>

스큐어모픽 배지

반응형 효과와 어두운 테마를 지원하는 Skeuomorphic Badges 컴포넌트입니다.

열다 미리 보기

                <span class="inline-flex items-center rounded-md bg-gray-200 px-2.5 py-0.5 text-sm font-medium text-gray-800 shadow-md dark:bg-gray-700 dark:text-gray-200">
  Badge
</span>

<span class="inline-flex items-center rounded-full bg-red-100 px-2.5 py-0.5 text-xs font-medium text-red-800 shadow-inner dark:bg-red-900 dark:text-red-200">
  Badge
</span>

<span class="inline-flex items-center rounded-md bg-blue-50 px-3 py-1 text-base font-medium text-blue-700 ring-1 ring-inset ring-blue-700/10 dark:bg-blue-900 dark:text-blue-200 dark:ring-blue-200/10">
  Badge
</span>

<span class="inline-flex items-center px-3 py-0.5 rounded-full bg-green-100 text-sm font-medium text-green-800 shadow-lg dark:bg-green-800 dark:text-green-100">
  <svg class="-ml-1 mr-1.5 h-2 w-2 text-green-400 dark:text-green-600" fill="currentColor" viewBox="0 0 8 8">
    <circle cx="4" cy="4" r="3" />
  </svg>
  Badge with dot
</span>

사이드바 구성 요소

Tailwind CSS를 사용하여 디자인된 반응형 다크 모드 사이드바 구성 요소로, 어두운 배경, 호버 효과, 이미지 및 아바타에 대한 자리 표시자를 제공합니다.

열다 미리 보기

                <div class="flex flex-col h-screen bg-gray-800 text-white p-4">
    <div class="flex items-center mb-6">
        <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-2">
        <h1 class="text-xl font-semibold">User Name</h1>
    </div>
    <nav class="flex-1">
        <ul>
            <li class="mb-4">
                <a href="#" class="flex items-center p-2 rounded hover:bg-gray-700 transition duration-300">
                    <img src="https://picsum.photos/50/50" alt="Home Icon" class="w-6 h-6 mr-2">Home
                </a>
            </li>
            <li class="mb-4">
                <a href="#" class="flex items-center p-2 rounded hover:bg-gray-700 transition duration-300">
                    <img src="https://picsum.photos/50/50" alt="Profile Icon" class="w-6 h-6 mr-2">Profile
                </a>
            </li>
            <li class="mb-4">
                <a href="#" class="flex items-center p-2 rounded hover:bg-gray-700 transition duration-300">
                    <img src="https://picsum.photos/50/50" alt="Settings Icon" class="w-6 h-6 mr-2">Settings
                </a>
            </li>
            <li class="mb-4">
                <a href="#" class="flex items-center p-2 rounded hover:bg-gray-700 transition duration-300">
                    <img src="https://picsum.photos/50/50" alt="Logout Icon" class="w-6 h-6 mr-2">Logout
                </a>
            </li>
        </ul>
    </nav>
    <footer>
        <p class="text-gray-400 text-sm">© 2023 Your Company</p>
    </footer>
</div>

Interactive Components 구성 요소

반응형 효과와 어두운 테마를 지원하는 인터랙티브 3D 구성 요소

열다 미리 보기

                <div class="dark:bg-gray-900 py-12">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="lg:text-center">
            <h2 class="text-base text-indigo-600 font-semibold tracking-wide uppercase dark:text-indigo-400">Interactive</h2>
            <p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl dark:text-white">
                A new way to engage
            </p>
            <p class="mt-4 max-w-2xl text-xl text-gray-500 lg:mx-auto dark:text-gray-400">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
            </p>
        </div>

        <div class="mt-10">
            <dl class="space-y-10 md:space-y-0 md:grid md:grid-cols-2 md:gap-x-8 md:gap-y-10">
                <div class="relative">
                    <dt>
                        <div class="absolute flex items-center justify-center h-12 w-12 rounded-md bg-indigo-500 text-white transform -rotate-6 hover:rotate-0 transition duration-300 ease-in-out">
                            <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
                            </svg>
                        </div>
                        <p class="ml-16 text-lg leading-6 font-medium text-gray-900 dark:text-white">Competitive exchange rates</p>
                    </dt>
                    <dd class="mt-2 ml-16 text-base text-gray-500 dark:text-gray-400">
                        Lorem ipsum, dolor sit amet consectetur adipisicing elit. Maiores impedit perferendis suscipit eaque, iste dolor cupiditate blanditiis ratione.
                    </dd>
                </div>

                <div class="relative">
                    <dt>
                        <div class="absolute flex items-center justify-center h-12 w-12 rounded-md bg-indigo-500 text-white transform rotate-6 hover:rotate-0 transition duration-300 ease-in-out">
                            <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 6l3 1m0 0l-3 9a2 2 0 002 2h9l.75-.75M7 16l3.5-3.5M14.25 8.25l.75-.75m0 0l2-2M7 16H3a2 2 0 00-2 2v2a2 2 0 002 2h14a2 2 0 002-2v-2a2 2 0 00-2-2h-4m5-10l2 2m0 0l2 2m0-4l-2-2m0 0l-2-2m-3 10l3.5-3.5" />
                            </svg>
                        </div>
                        <p class="ml-16 text-lg leading-6 font-medium text-gray-900 dark:text-white">No hidden fees</p>
                    </dt>
                    <dd class="mt-2 ml-16 text-base text-gray-500 dark:text-gray-400">
                        Lorem ipsum, dolor sit amet consectetur adipisicing elit. Maiores impedit perferendis suscipit eaque, iste dolor cupiditate blanditiis ratione.
                    </dd>
                </div>

                <div class="relative">
                    <dt>
                        <div class="absolute flex items-center justify-center h-12 w-12 rounded-md bg-indigo-500 text-white transform rotate-3 hover:rotate-0 transition duration-300 ease-in-out">
                            <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
                            </svg>
                        </div>
                        <p class="ml-16 text-lg leading-6 font-medium text-gray-900 dark:text-white">Transfers are instant</p>
                    </dt>
                    <dd class="mt-2 ml-16 text-base text-gray-500 dark:text-gray-400">
                        Lorem ipsum, dolor sit amet consectetur adipisicing elit. Maiores impedit perferendis suscipit eaque, iste dolor cupiditate blanditiis ratione.
                    </dd>
                </div>

                <div class="relative">
                    <dt>
                        <div class="absolute flex items-center justify-center h-12 w-12 rounded-md bg-indigo-500 text-white transform -rotate-3 hover:rotate-0 transition duration-300 ease-in-out">
                            <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 8h10M7 12h10m-9 4h4m-4 2h4M9 10H4a2 2 0 00-2 2v7a2 2 0 002 2h16a2 2 0 002-2v-7a2 2 0 00-2-2h-5l-.5-1.5z" />
                            </svg>
                        </div>
                        <p class="ml-16 text-lg leading-6 font-medium text-gray-900 dark:text-white">Mobile notifications</p>
                    </dt>
                    <dd class="mt-2 ml-16 text-base text-gray-500 dark:text-gray-400">
                        Lorem ipsum, dolor sit amet consectetur adipisicing elit. Maiores impedit perferendis suscipit eaque, iste dolor cupiditate blanditiis ratione.
                    </dd>
                </div>
            </dl>
        </div>
    </div>
</div>

Skeuomorphism 그리드 레이아웃 구성 요소

Skeuomorphism 그리드 레이아웃 컴포넌트는 반응형 효과와 어두운 테마를 지원합니다.

열다 미리 보기

                <div class="container mx-auto p-4">
  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
    <!-- Card 1 -->
    <div class="bg-gradient-to-br from-gray-200 to-gray-400 dark:from-gray-700 dark:to-gray-900 p-6 rounded-lg shadow-xl transform transition duration-500 hover:scale-105">
      <div class="flex justify-center items-center mb-4">
        <img class="w-20 h-20 rounded-full border-4 border-gray-300 dark:border-gray-600 shadow-lg" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar">
      </div>
      <h3 class="text-xl font-bold text-gray-800 dark:text-gray-200 mb-2">Skeuomorphic Card</h3>
      <p class="text-gray-700 dark:text-gray-300 mb-4">This is an example of a card with a skeuomorphic design approach, featuring gradients and shadows to mimic real-world textures.</p>
      <button class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-full shadow-md transition duration-300">Learn More</button>
    </div>

    <!-- Card 2 -->
    <div class="bg-gradient-to-br from-gray-200 to-gray-400 dark:from-gray-700 dark:to-gray-900 p-6 rounded-lg shadow-xl transform transition duration-500 hover:scale-105">
      <div class="flex justify-center items-center mb-4">
        <img class="w-20 h-20 rounded-full border-4 border-gray-300 dark:border-gray-600 shadow-lg" src="https://randomuser.me/api/portraits/women/2.jpg" alt="Avatar">
      </div>
      <h3 class="text-xl font-bold text-gray-800 dark:text-gray-200 mb-2">Interactive Element</h3>
      <p class="text-gray-700 dark:text-gray-300 mb-4">Elements are designed to feel tangible, with hover effects that provide visual feedback, simulating physical interaction.</p>
      <button class="bg-green-600 hover:bg-green-700 text-white font-bold py-2 px-4 rounded-full shadow-md transition duration-300">View Details</button>
    </div>

    <!-- Card 3 -->
    <div class="bg-gradient-to-br from-gray-200 to-gray-400 dark:from-gray-700 dark:to-gray-900 p-6 rounded-lg shadow-xl transform transition duration-500 hover:scale-105">
      <div class="flex justify-center items-center mb-4">
        <img class="w-20 h-20 rounded-full border-4 border-gray-300 dark:border-gray-600 shadow-lg" src="https://randomuser.me/api/portraits/men/3.jpg" alt="Avatar">
      </div>
      <h3 class="text-xl font-bold text-gray-800 dark:text-gray-200 mb-2">Dark Mode Ready</h3>
      <p class="text-gray-700 dark:text-gray-300 mb-4">This component includes full support for dark mode, with colors and shadows adjusting seamlessly for a comfortable viewing experience.</p>
      <button class="bg-red-600 hover:bg-red-700 text-white font-bold py-2 px-4 rounded-full shadow-md transition duration-300">Explore Options</button>
    </div>

        <!-- Card 4 -->
    <div class="bg-gradient-to-br from-gray-200 to-gray-400 dark:from-gray-700 dark:to-gray-900 p-6 rounded-lg shadow-xl transform transition duration-500 hover:scale-105">
      <div class="flex justify-center items-center mb-4">
        <img class="w-full h-48 rounded-md object-cover border-4 border-gray-300 dark:border-gray-600 shadow-lg" src="https://picsum.photos/seed/picsum/400/300" alt="Placeholder image">
      </div>
      <h3 class="text-xl font-bold text-gray-800 dark:text-gray-200 mb-2">Image Integration</h3>
      <p class="text-gray-700 dark:text-gray-300 mb-4">Images are integrated with subtle borders and shadows to enhance the skeuomorphic feel, blending them naturally into the design.</p>
      <button class="bg-purple-600 hover:bg-purple-700 text-white font-bold py-2 px-4 rounded-full shadow-md transition duration-300">View Gallery</button>
    </div>

     <!-- Card 5 -->
    <div class="bg-gradient-to-br from-gray-200 to-gray-400 dark:from-gray-700 dark:to-gray-900 p-6 rounded-lg shadow-xl transform transition duration-500 hover:scale-105">
      <div class="flex justify-center items-center mb-4">
        <img class="w-20 h-20 rounded-full border-4 border-gray-300 dark:border-gray-600 shadow-lg" src="https://randomuser.me/api/portraits/women/4.jpg" alt="Avatar">
      </div>
      <h3 class="text-xl font-bold text-gray-800 dark:text-gray-200 mb-2">Responsive Design</h3>
      <p class="text-gray-700 dark:text-gray-300 mb-4">The grid layout is fully responsive, adapting to different screen sizes while maintaining the skeuomorphic integrity of the design.</p>
      <button class="bg-teal-600 hover:bg-teal-700 text-white font-bold py-2 px-4 rounded-full shadow-md transition duration-300">Discover More</button>
    </div>

     <!-- Card 6 -->
    <div class="bg-gradient-to-br from-gray-200 to-gray-400 dark:from-gray-700 dark:to-gray-900 p-6 rounded-lg shadow-xl transform transition duration-500 hover:scale-105">
      <div class="flex justify-center items-center mb-4">
        <img class="w-full h-48 rounded-md object-cover border-4 border-gray-300 dark:border-gray-600 shadow-lg" src="https://picsum.photos/seed/another/400/300" alt="Placeholder image">
      </div>
      <h3 class="text-xl font-bold text-gray-800 dark:text-gray-200 mb-2">Customizable</h3>
      <p class="text-gray-700 dark:text-gray-300 mb-4">Built with Tailwind CSS, this component is easily customizable, allowing for adjustments to colors, spacing, and other design elements.</p>
      <button class="bg-orange-600 hover:bg-orange-700 text-white font-bold py-2 px-4 rounded-full shadow-md transition duration-300">Customize Now</button>
    </div>
  </div>
</div>

이미지 라이트박스 구성 요소

현실 세계를 모방하도록 설계된 스큐어모픽 이미지 라이트박스 구성 요소로, Tailwind CSS를 사용하여 반응형 효과와 어두운 테마를 지원합니다.

열다 미리 보기

                <div class="flex flex-col items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
    <div class="relative group w-full max-w-2xl bg-white dark:bg-gray-800 shadow-lg rounded-lg overflow-hidden">
        <img src="https://picsum.photos/600/400" alt="Lightbox Image" class="w-full h-auto rounded-lg transition ease-in-out duration-300 transform group-hover:scale-105" />
        <div class="absolute inset-0 bg-black opacity-0 group-hover:opacity-50 transition-opacity duration-300 rounded-lg"></div>
        <div class="absolute bottom-0 left-0 right-0 p-4 text-white">
            <h2 class="font-bold text-lg">Image Title</h2>
            <p class="text-sm">Image description goes here.</p>
        </div>
    </div>

    <div class="mt-4">
        <button class="p-2 px-4 bg-blue-600 text-white rounded hover:bg-blue-500 dark:bg-blue-700 dark:hover:bg-blue-600 shadow-lg">
            <span class="flex items-center">
                <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-6 h-6 rounded-full mr-2" />
                View User's Images
            </span>
        </button>
    </div>
</div>

1 ... 205 206 207 208 209 ... 242

카테고리

모든 구성 요소