모든 구성 요소

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

레트로서치박스

80년대/90년대 미학, 반응형, 다크 모드를 지원하는 레트로/빈티지 검색 상자.

                <div class="max-w-md mx-auto">
  <div class="relative">
    <input type="text" class="w-full py-3 px-4 pr-10 text-sm text-gray-900 placeholder-gray-600 bg-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-600 focus:border-transparent border-2 border-gray-400 dark:bg-gray-700 dark:text-gray-100 dark:placeholder-gray-400 dark:border-gray-600 dark:focus:ring-purple-400" placeholder="Search...">
    <svg class="absolute right-3 top-3 w-5 h-5 text-gray-600 dark:text-gray-400" 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="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg>
  </div>
</div>

레트로 빈티지 메가 메뉴

80년대와 90년대의 미학에서 영감을 받은 레트로/빈티지 스타일로 디자인된 반응형 메가 메뉴 구성 요소로, 어두운 테마 지원과 자리 표시자 이미지를 특징으로 합니다.

열다 미리 보기

                <nav class="bg-gray-800 text-white p-4 dark:bg-gray-900">
  <div class="container mx-auto flex justify-between items-center">
    <div class="text-2xl font-bold">
      Retro Menu
    </div>
    <div class="hidden md:flex space-x-4">
      <a href="#" class="hover:text-gray-400 transition duration-200">Home</a>
      <a href="#" class="hover:text-gray-400 transition duration-200">About</a>
      <a href="#" class="hover:text-gray-400 transition duration-200">Services</a>
      <a href="#" class="hover:text-gray-400 transition duration-200">Contact</a>
      <div class="relative group">
        <button class="hover:text-gray-400 transition duration-200">
          More
        </button>
        <div class="absolute left-0 hidden bg-gray-800 text-white group-hover:block transition duration-200 rounded shadow-lg">
          <div class="p-4">
            <h3 class="text-lg font-semibold">Categories</h3>
            <div class="flex flex-col mt-2 space-y-2">
              <a href="#" class="flex items-center space-x-2 hover:bg-gray-700 p-2 rounded transition duration-200">
                <img src="https://picsum.photos/40/40?random=1" alt="Category 1" class="rounded-full">
                <span>Category 1</span>
              </a>
              <a href="#" class="flex items-center space-x-2 hover:bg-gray-700 p-2 rounded transition duration-200">
                <img src="https://picsum.photos/40/40?random=2" alt="Category 2" class="rounded-full">
                <span>Category 2</span>
              </a>
              <a href="#" class="flex items-center space-x-2 hover:bg-gray-700 p-2 rounded transition duration-200">
                <img src="https://picsum.photos/40/40?random=3" alt="Category 3" class="rounded-full">
                <span>Category 3</span>
              </a>
              <a href="#" class="flex items-center space-x-2 hover:bg-gray-700 p-2 rounded transition duration-200">
                <img src="https://picsum.photos/40/40?random=4" alt="Category 4" class="rounded-full">
                <span>Category 4</span>
              </a>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="md:hidden">
      <button class="hover:text-gray-400 transition duration-200">
        Menu
      </button>
    </div>
  </div>
</nav>

<div class="bg-gray-100 dark:bg-gray-800">
  <div class="container mx-auto p-6">
    <h2 class="text-xl font-semibold mb-4 text-gray-800 dark:text-white">Featured Items</h2>
    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
      <div class="border border-gray-300 dark:border-gray-600 rounded-lg overflow-hidden">
        <img src="https://picsum.photos/400/300?random=5" alt="Featured Item 1" class="w-full">
        <div class="p-4">
          <h3 class="text-lg font-bold text-gray-900 dark:text-white">Featured Item 1</h3>
          <p class="text-gray-600 dark:text-gray-300">Description of the item goes here.</p>
        </div>
      </div>
      <div class="border border-gray-300 dark:border-gray-600 rounded-lg overflow-hidden">
        <img src="https://picsum.photos/400/300?random=6" alt="Featured Item 2" class="w-full">
        <div class="p-4">
          <h3 class="text-lg font-bold text-gray-900 dark:text-white">Featured Item 2</h3>
          <p class="text-gray-600 dark:text-gray-300">Description of the item goes here.</p>
        </div>
      </div>
      <div class="border border-gray-300 dark:border-gray-600 rounded-lg overflow-hidden">
        <img src="https://picsum.photos/400/300?random=7" alt="Featured Item 3" class="w-full">
        <div class="p-4">
          <h3 class="text-lg font-bold text-gray-900 dark:text-white">Featured Item 3</h3>
          <p class="text-gray-600 dark:text-gray-300">Description of the item goes here.</p>
        </div>
      </div>
    </div>
  </div>
</div>

<style>
  /* Dark mode styles */
  @media (prefers-color-scheme: dark) {
    body {
      background-color: #1a202c;
      color: white;
    }
  }
</style>

Success Messages 구성 요소

Tailwind CSS를 사용하여 스큐어모픽 스타일로 설계된 반응형 성공 메시지 구성 요소로, 어두운 테마 지원을 제공합니다.

열다 미리 보기

                <div class="max-w-md mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6 mt-10">
    <div class="flex items-center mb-4">
        <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar" class="w-12 h-12 rounded-full shadow-lg">
        <div class="ml-4">
            <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Success!</h3>
            <p class="text-gray-600 dark:text-gray-400">Your action was successful. The data has been saved.</p>
        </div>
    </div>
    <img src="https://picsum.photos/200/100?random=1" alt="Success Image" class="rounded-lg shadow-lg w-full">
    <div class="mt-4">
        <a href="#" class="inline-block bg-blue-500 text-white rounded-lg py-2 px-4 shadow hover:bg-blue-600 transition duration-200">View Details</a>
    </div>
</div>

<!-- Dark Mode Styles -->
<style>
    @media (prefers-color-scheme: dark) {
        body {
            background-color: #1a202c;
        }
    }
</style>

반응형 디자인과 어두운 테마를 지원하는 Skeuomorphism 스타일의 Notifications Component. 이 구성 요소는 미묘한 그림자와 반짝임 효과를 포함하여 알림에 대해 사실적이고 엠보싱된 모양을 특징으로 합니다. 완벽하게 반응하며 다크 모드에 대한 고유한 스타일을 포함하여 모든 조명 조건에서 가독성과 미적 매력을 보장합니다. 아바타에 자리 표시자 이미지를 사용합니다.

열다 미리 보기

                <div class="p-4 max-w-sm mx-auto bg-white rounded-xl shadow-md space-y-4 dark:bg-gray-800">
  <h2 class="text-xl font-bold text-gray-900 dark:text-white">Notifications</h2>

  <!-- Notification 1 -->
  <div class="flex items-center space-x-4 p-4 bg-gradient-to-br from-gray-100 to-gray-200 rounded-lg shadow-inner dark:from-gray-700 dark:to-gray-900">
    <img class="w-12 h-12 rounded-full ring-2 ring-gray-300 dark:ring-gray-600" src="https://randomuser.me/api/portraits/thumb/women/68.jpg" alt="Avatar">
    <div class="flex-1">
      <p class="text-sm font-medium text-gray-900 dark:text-gray-200">New message from <span class="font-semibold">Alice</span></p>
      <p class="text-sm text-gray-500 dark:text-gray-400">Hey, are you free to chat?</p>
    </div>
  </div>

  <!-- Notification 2 -->
  <div class="flex items-center space-x-4 p-4 bg-gradient-to-br from-gray-100 to-gray-200 rounded-lg shadow-inner dark:from-gray-700 dark:to-gray-900">
    <img class="w-12 h-12 rounded-full ring-2 ring-gray-300 dark:ring-gray-600" src="https://randomuser.me/api/portraits/thumb/men/75.jpg" alt="Avatar">
    <div class="flex-1">
      <p class="text-sm font-medium text-gray-900 dark:text-gray-200">You have a new follower: <span class="font-semibold">Bob</span></p>
      <p class="text-sm text-gray-500 dark:text-gray-400">Started following you 5m ago.</p>
    </div>
  </div>

  <!-- Notification 3 -->
  <div class="flex items-center space-x-4 p-4 bg-gradient-to-br from-gray-100 to-gray-200 rounded-lg shadow-inner dark:from-gray-700 dark:to-gray-900">
    <img class="w-12 h-12 rounded-full ring-2 ring-gray-300 dark:ring-gray-600" src="https://picsum.photos/id/237/80/80" alt="Event Image">
    <div class="flex-1">
      <p class="text-sm font-medium text-gray-900 dark:text-gray-200">Event Reminder: <span class="font-semibold">Team Meeting</span></p>
      <p class="text-sm text-gray-500 dark:text-gray-400">Tomorrow at 10:00 AM.</p>
    </div>
  </div>

</div>

브루탈리스트 오디오 플레이어

반응형 디자인, 다크 모드 지원 및 JavaScript가 없는 브루탈리스트 오디오 플레이어 구성 요소입니다.

열다 미리 보기

                <div class="min-h-screen bg-stone-100 dark:bg-black p-8 flex items-center justify-center">
  <div class="w-full max-w-md bg-white dark:bg-stone-900 shadow-[8px_8px_0_0_#000] dark:shadow-[8px_8px_0_0_#fff] border-[4px] border-black dark:border-white overflow-hidden">
    <div class="p-6">
      <h3 class="text-2xl font-bold text-black dark:text-white mb-4 border-b-4 border-black dark:border-white pb-2">Now Playing</h3>
      <div class="flex items-center mb-6">
        <img class="w-16 h-16 object-cover border-4 border-black dark:border-white mr-4" src="https://picsum.photos/100/100" alt="Album Art">
        <div>
          <p class="text-xl font-semibold text-black dark:text-white">Track Title</p>
          <p class="text-black dark:text-white">Artist Name</p>
        </div>
      </div>
      <div class="mb-6">
        <div class="h-4 bg-gray-300 dark:bg-stone-700 border-2 border-black dark:border-white"></div>
      </div>
      <div class="flex justify-between text-black dark:text-white mb-6">
        <span>0:00</span>
        <span>3:45</span>
      </div>
      <div class="flex justify-center space-x-6">
        <button class="p-3 border-4 border-black dark:border-white text-black dark:text-white shadow-[4px_4px_0_0_#000] dark:shadow-[4px_4px_0_0_#fff] font-bold">Prev</button>
        <button class="p-3 border-4 border-black dark:border-white text-black dark:text-white shadow-[4px_4px_0_0_#000] dark:shadow-[4px_4px_0_0_#fff] font-bold">Play</button>
        <button class="p-3 border-4 border-black dark:border-white text-black dark:text-white shadow-[4px_4px_0_0_#000] dark:shadow-[4px_4px_0_0_#fff] font-bold">Next</button>
      </div>
    </div>
  </div>
</div>

CAPTCHA 구성 요소

반응형 CAPTCHA 구성 요소에는 마이크로 인터랙션, 어두운 테마 지원 및 임의의 자리 표시자 이미지가 있습니다.

열다 미리 보기

                <div class="flex items-center justify-center h-screen bg-gray-100 dark:bg-gray-900">
  <div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-lg">
    <h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-4">CAPTCHA Challenge</h2>
    <p class="text-gray-600 dark:text-gray-300 mb-4">Please verify you are not a robot.</p>
    <div class="flex items-center justify-center space-x-4 mb-4">
      <img src="https://picsum.photos/150" alt="CAPTCHA image" class="rounded">
      <button class="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50 transition duration-200 ease-in-out">
        Reload
      </button>
    </div>
    <input type="text" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent dark:bg-gray-700 dark:border-gray-600 dark:text-white" placeholder="Enter the characters...">
    <button class="mt-4 w-full px-4 py-2 bg-green-500 text-white rounded hover:bg-green-600 focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-opacity-50 transition duration-200 ease-in-out">
      Submit
    </button>
  </div>
</div>

Neumorphic Cards 컴포넌트

어두운 테마를 지원하는 Neumorphism 스타일로 디자인된 반응형 카드 구성 요소로, 미묘한 그림자와 유연한 레이아웃을 특징으로 합니다.

열다 미리 보기

                <div class="flex flex-wrap justify-center gap-4 p-6 bg-gray-100 dark:bg-gray-800">
    <div class="bg-white dark:bg-gray-700 rounded-xl shadow-lg p-4 w-60 transition-transform transform hover:scale-105">
        <img class="rounded-t-xl h-36 w-full object-cover" src="https://picsum.photos/200/100" alt="Card Image">
        <div class="p-4">
            <h2 class="text-lg font-bold text-gray-800 dark:text-white">Card Title</h2>
            <p class="text-gray-600 dark:text-gray-300 mt-2">This is a short description of the card content.</p>
        </div>
        <div class="flex items-center mt-4">
            <img class="w-10 h-10 rounded-full border-2 border-white dark:border-gray-800" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar">
            <div class="ml-2">
                <h3 class="text-md text-gray-800 dark:text-white">User Name</h3>
                <p class="text-sm text-gray-600 dark:text-gray-300">User Role</p>
            </div>
        </div>
    </div>
    <div class="bg-white dark:bg-gray-700 rounded-xl shadow-lg p-4 w-60 transition-transform transform hover:scale-105">
        <img class="rounded-t-xl h-36 w-full object-cover" src="https://picsum.photos/201/100" alt="Card Image">
        <div class="p-4">
            <h2 class="text-lg font-bold text-gray-800 dark:text-white">Another Card Title</h2>
            <p class="text-gray-600 dark:text-gray-300 mt-2">More details about the content of this card.</p>
        </div>
        <div class="flex items-center mt-4">
            <img class="w-10 h-10 rounded-full border-2 border-white dark:border-gray-800" src="https://randomuser.me/api/portraits/women/1.jpg" alt="Avatar">
            <div class="ml-2">
                <h3 class="text-md text-gray-800 dark:text-white">Another User</h3>
                <p class="text-sm text-gray-600 dark:text-gray-300">User Role</p>
            </div>
        </div>
    </div>
    <div class="bg-white dark:bg-gray-700 rounded-xl shadow-lg p-4 w-60 transition-transform transform hover:scale-105">
        <img class="rounded-t-xl h-36 w-full object-cover" src="https://picsum.photos/202/100" alt="Card Image">
        <div class="p-4">
            <h2 class="text-lg font-bold text-gray-800 dark:text-white">Third Card Title</h2>
            <p class="text-gray-600 dark:text-gray-300 mt-2">Description of the card content goes here.</p>
        </div>
        <div class="flex items-center mt-4">
            <img class="w-10 h-10 rounded-full border-2 border-white dark:border-gray-800" src="https://randomuser.me/api/portraits/men/2.jpg" alt="Avatar">
            <div class="ml-2">
                <h3 class="text-md text-gray-800 dark:text-white">User Three</h3>
                <p class="text-sm text-gray-600 dark:text-gray-300">User Role</p>
            </div>
        </div>
    </div>
</div>

Like/Reaction Buttons 컴포넌트

스큐어모픽 스타일로 디자인된 좋아요 및 반응 버튼을 특징으로 하는 웹 구성 요소로, Tailwind CSS를 사용하여 반응형 효과와 어두운 테마를 지원합니다.

열다 미리 보기

                <div class="flex flex-col items-center justify-center p-4 bg-white dark:bg-gray-800 rounded-lg shadow-lg max-w-xs mx-auto">
    <div class="flex items-center justify-between w-full">
        <img src="https://picsum.photos/50/50?random=1" alt="Avatar" class="rounded-full border-2 border-gray-300 dark:border-gray-600">
        <div class="flex space-x-2">
            <button class="flex items-center bg-gradient-to-br from-blue-400 to-blue-600 text-white py-2 px-4 rounded-lg shadow-md transform hover:scale-105 hover:shadow-xl transition-all duration-300">
                <span>👍</span> Like
            </button>
            <button class="flex items-center bg-gradient-to-br from-yellow-400 to-yellow-600 text-white py-2 px-4 rounded-lg shadow-md transform hover:scale-105 hover:shadow-xl transition-all duration-300">
                <span>❤️</span> Love
            </button>
            <button class="flex items-center bg-gradient-to-br from-red-400 to-red-600 text-white py-2 px-4 rounded-lg shadow-md transform hover:scale-105 hover:shadow-xl transition-all duration-300">
                <span>😂</span> Haha
            </button>
            <button class="flex items-center bg-gradient-to-br from-green-400 to-green-600 text-white py-2 px-4 rounded-lg shadow-md transform hover:scale-105 hover:shadow-xl transition-all duration-300">
                <span>😮</span> Wow
            </button>
        </div>
    </div>
    <div class="mt-4 text-center text-gray-700 dark:text-gray-300">
        <p class="text-sm">Tap your reaction!</p>
    </div>
</div>

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

반응형 및 어두운 테마를 지원하는 Glassmorphism 그리드 레이아웃 구성 요소

열다 미리 보기

                <div class="min-h-screen bg-gray-100 dark:bg-gray-900 py-12 px-4 sm:px-6 lg:px-8">
    <div class="max-w-7xl mx-auto">
        <h2 class="text-3xl font-extrabold text-gray-900 dark:text-white mb-8 text-center">Glassmorphism Grid Layout</h2>

        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8">
            <!-- Card 1 -->
            <div class="bg-white dark:bg-gray-800 bg-opacity-30 dark:bg-opacity-30 backdrop-filter backdrop-blur-lg rounded-xl shadow-2xl overflow-hidden">
                <img class="w-full h-48 object-cover" src="https://picsum.photos/seed/picsum1/400/300" alt="Placeholder Image">
                <div class="p-6">
                    <h3 class="text-xl font-semibold text-gray-900 dark:text-white mb-2">Card Title 1</h3>
                    <p class="text-gray-700 dark:text-gray-300 text-base">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                </div>
            </div>

            <!-- Card 2 -->
            <div class="bg-white dark:bg-gray-800 bg-opacity-30 dark:bg-opacity-30 backdrop-filter backdrop-blur-lg rounded-xl shadow-2xl overflow-hidden">
                 <img class="w-full h-48 object-cover" src="https://picsum.photos/seed/picsum2/400/300" alt="Placeholder Image">
                <div class="p-6">
                    <h3 class="text-xl font-semibold text-gray-900 dark:text-white mb-2">Card Title 2</h3>
                    <p class="text-gray-700 dark:text-gray-300 text-base">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
                </div>
            </div>

            <!-- Card 3 -->
            <div class="bg-white dark:bg-gray-800 bg-opacity-30 dark:bg-opacity-30 backdrop-filter backdrop-blur-lg rounded-xl shadow-2xl overflow-hidden">
                 <img class="w-full h-48 object-cover" src="https://picsum.photos/seed/picsum3/400/300" alt="Placeholder Image">
                <div class="p-6">
                    <h3 class="text-xl font-semibold text-gray-900 dark:text-white mb-2">Card Title 3</h3>
                    <p class="text-gray-700 dark:text-gray-300 text-base">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
                </div>
            </div>

             <!-- Card 4 -->
            <div class="bg-white dark:bg-gray-800 bg-opacity-30 dark:bg-opacity-30 backdrop-filter backdrop-blur-lg rounded-xl shadow-2xl overflow-hidden">
                 <img class="w-full h-48 object-cover" src="https://picsum.photos/seed/picsum4/400/300" alt="Placeholder Image">
                <div class="p-6">
                    <h3 class="text-xl font-semibold text-gray-900 dark:text-white mb-2">Card Title 4</h3>
                    <p class="text-gray-700 dark:text-gray-300 text-base">Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                </div>
            </div>

            <!-- Card 5 -->
            <div class="bg-white dark:bg-gray-800 bg-opacity-30 dark:bg-opacity-30 backdrop-filter backdrop-blur-lg rounded-xl shadow-2xl overflow-hidden">
                 <img class="w-full h-48 object-cover" src="https://picsum.photos/seed/picsum5/400/300" alt="Placeholder Image">
                <div class="p-6">
                    <h3 class="text-xl font-semibold text-gray-900 dark:text-white mb-2">Card Title 5</h3>
                    <p class="text-gray-700 dark:text-gray-300 text-base">Sed ut perspiciatis unde omnis iste natus error sit voluptatem doloremque laudantium.</p>
                </div>
            </div>

            <!-- Card 6 -->
            <div class="bg-white dark:bg-gray-800 bg-opacity-30 dark:bg-opacity-30 backdrop-filter backdrop-blur-lg rounded-xl shadow-2xl overflow-hidden">
                 <img class="w-full h-48 object-cover" src="https://picsum.photos/seed/picsum6/400/300" alt="Placeholder Image">
                <div class="p-6">
                    <h3 class="text-xl font-semibold text-gray-900 dark:text-white mb-2">Card Title 6</h3>
                    <p class="text-gray-700 dark:text-gray-300 text-base">Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit.</p>
                </div>
            </div>
        </div>
    </div>
</div>

3D 바닥글 페이드 인

3D 디자인 요소와 다크 모드를 지원하는 반응형 바닥글

열다 미리 보기

                <footer class="bg-gray-100 dark:bg-gray-900 text-gray-800 dark:text-gray-200 py-10">
  <div class="container mx-auto px-4">
    <div class="flex flex-wrap justify-between items-center">
      <div class="w-full md:w-1/3 mb-6 md:mb-0">
        <h3 class="text-xl font-bold mb-3">3D Footer</h3>
        <p class="text-sm">Explore the depths of our amazing footer. Designed with a touch of 3D for an immersive experience.</p>
      </div>
      <div class="w-full md:w-1/3 mb-6 md:mb-0">
        <h4 class="text-lg font-semibold mb-3">Quick Links</h4>
        <ul class="space-y-2">
          <li><a href="#" class="hover:text-gray-600 dark:hover:text-gray-400 transition duration-300 ease-in-out">Home</a></li>
          <li><a href="#" class="hover:text-gray-600 dark:hover:text-gray-400 transition duration-300 ease-in-out">Services</a></li>
          <li><a href="#" class="hover:text-gray-600 dark:hover:text-gray-400 transition duration-300 ease-in-out">About Us</a></li>
          <li><a href="#" class="hover:text-gray-600 dark:hover:text-gray-400 transition duration-300 ease-in-out">Contact</a></li>
        </ul>
      </div>
      <div class="w-full md:w-1/3">
        <h4 class="text-lg font-semibold mb-3">Contact Us</h4>
        <p class="text-sm">Email: [email protected]</p>
        <p class="text-sm">Phone: +1 234 567 890</p>
        <div class="flex mt-4 space-x-4">
          <a href="#" class="text-gray-800 dark:text-gray-200 hover:text-gray-600 dark:hover:text-gray-400 transition duration-300 ease-in-out">
            <i class="fab fa-facebook-f"></i>
          </a>
          <a href="#" class="text-gray-800 dark:text-gray-200 hover:text-gray-600 dark:hover:text-gray-400 transition duration-300 ease-in-out">
            <i class="fab fa-twitter"></i>
          </a>
          <a href="#" class="text-gray-800 dark:text-gray-200 hover:text-gray-600 dark:hover:text-gray-400 transition duration-300 ease-in-out">
            <i class="fab fa-instagram"></i>
          </a>
        </div>
      </div>
    </div>
    <div class="mt-8 text-center text-sm">
      <p>&copy; 2023 3D Footer. All rights reserved.</p>
    </div>
  </div>
</footer>

1 ... 203 204 205 206 207 ... 242

카테고리

모든 구성 요소

레트로서치박스

레트로 빈티지 메가 메뉴

Success Messages 구성 요소

Notifications 구성 요소

브루탈리스트 오디오 플레이어

CAPTCHA 구성 요소

Neumorphic Cards 컴포넌트

Like/Reaction Buttons 컴포넌트

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

3D 바닥글 페이드 인