모든 구성 요소

Navigation Components 컴포넌트

다크 모드를 지원하는 반응형 탐색 모음입니다.

                <nav class="bg-gray-800">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <div class="flex items-center justify-between h-16">
      <div class="flex items-center">
        <div class="flex-shrink-0">
          <img class="h-8 w-8" src="https://www.picsum.photos/id/237/200/300" alt="Workflow">
        </div>
        <div class="hidden md:block">
          <div class="ml-10 flex items-baseline space-x-4">
            <a href="#" class="bg-gray-900 text-white px-3 py-2 rounded-md text-sm font-medium">Dashboard</a>

            <a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Team</a>

            <a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Projects</a>

            <a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Calendar</a>

            <a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Reports</a>
          </div>
        </div>
      </div>
      <div class="-mr-2 flex md:hidden">
        <button type="button" class="bg-gray-800 inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-white hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-800 focus:ring-white" aria-controls="mobile-menu" aria-expanded="false">
          <span class="sr-only">Open main menu</span>
          
          <svg class="block 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="M4 6h16M4 12h16M4 18h16" />
          </svg>
          
          <svg class="hidden 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="M6 18L18 6M6 6l12 12" />
          </svg>
        </button>
      </div>
    </div>
  </div>

  
  <div class="md:hidden" id="mobile-menu">
    <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3">
      <a href="#" class="bg-gray-900 text-white block px-3 py-2 rounded-md text-base font-medium">Dashboard</a>

      <a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium">Team</a>

      <a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium">Projects</a>

      <a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium">Calendar</a>

      <a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium">Reports</a>
    </div>
  </div>
</nav>

Table of Contents 구성 요소

Tailwind CSS를 사용하여 Neumorphism으로 스타일링된 반응형 목차 구성 요소로, 어두운 테마를 지원하고 자리 표시자 이미지와 아바타를 표시합니다.

미리보기 열기

                <div class="bg-gray-200 dark:bg-gray-800 p-6 rounded-xl shadow-md space-y-4">
    <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Table of Contents</h2>
    <ul class="space-y-2">
        <li class="bg-white dark:bg-gray-700 p-4 rounded-lg shadow-lg transition-transform transform hover:scale-105">
            <div class="flex items-center space-x-3">
                <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-12 h-12 rounded-full border-2 border-white shadow-md">
                <a href="#section1" class="text-lg text-gray-800 dark:text-gray-200">Section 1</a>
            </div>
        </li>
        <li class="bg-white dark:bg-gray-700 p-4 rounded-lg shadow-lg transition-transform transform hover:scale-105">
            <div class="flex items-center space-x-3">
                <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="Avatar" class="w-12 h-12 rounded-full border-2 border-white shadow-md">
                <a href="#section2" class="text-lg text-gray-800 dark:text-gray-200">Section 2</a>
            </div>
        </li>
        <li class="bg-white dark:bg-gray-700 p-4 rounded-lg shadow-lg transition-transform transform hover:scale-105">
            <div class="flex items-center space-x-3">
                <img src="https://randomuser.me/api/portraits/men/2.jpg" alt="Avatar" class="w-12 h-12 rounded-full border-2 border-white shadow-md">
                <a href="#section3" class="text-lg text-gray-800 dark:text-gray-200">Section 3</a>
            </div>
        </li>
        <li class="bg-white dark:bg-gray-700 p-4 rounded-lg shadow-lg transition-transform transform hover:scale-105">
            <div class="flex items-center space-x-3">
                <img src="https://randomuser.me/api/portraits/women/2.jpg" alt="Avatar" class="w-12 h-12 rounded-full border-2 border-white shadow-md">
                <a href="#section4" class="text-lg text-gray-800 dark:text-gray-200">Section 4</a>
            </div>
        </li>
        <li class="bg-white dark:bg-gray-700 p-4 rounded-lg shadow-lg transition-transform transform hover:scale-105">
            <div class="flex items-center space-x-3">
                <img src="https://randomuser.me/api/portraits/men/3.jpg" alt="Avatar" class="w-12 h-12 rounded-full border-2 border-white shadow-md">
                <a href="#section5" class="text-lg text-gray-800 dark:text-gray-200">Section 5</a>
            </div>
        </li>
    </ul>
</div>

Authentication Components 구성 요소

어두운 테마를 지원하는 반응형 인증 구성 요소로, Skeuomorphism 스타일로 수행됩니다.

미리보기 열기

                <div class="min-h-screen bg-gradient-to-br from-gray-200 to-gray-400 dark:from-gray-800 dark:to-gray-900 py-12 px-4 sm:px-6 lg:px-8 flex flex-col justify-center">
  <div class="sm:mx-auto sm:w-full sm:max-w-md">
    <div class="bg-white dark:bg-gray-700 py-8 px-4 shadow-xl rounded-3xl sm:rounded-br-none sm:rounded-tl-none sm:px-10 border-t-4 border-b-4 border-gray-300 dark:border-gray-600">
      <div class="sm:mx-auto sm:w-full sm:max-w-md text-center">
        <svg class="mx-auto h-12 w-12 text-gray-600 dark:text-gray-300" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <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>
        <h2 class="mt-6 text-center text-3xl font-extrabold text-gray-900 dark:text-white">
          Sign in to your account
        </h2>
      </div>

      <form class="mt-8 space-y-6" action="#" method="POST">
        <input type="hidden" name="remember" value="true">
        <div class="rounded-md shadow-sm -space-y-px">
          <div>
            <label for="email-address" class="sr-only">Email address</label>
            <input id="email-address" name="email" type="email" autocomplete="email" required class="appearance-none rounded-none relative block w-full px-3 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 rounded-t-md focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 focus:z-10 sm:text-sm dark:bg-gray-600 dark:border-gray-500 dark:placeholder-gray-400 dark:text-white" placeholder="Email address">
          </div>
          <div>
            <label for="password" class="sr-only">Password</label>
            <input id="password" name="password" type="password" autocomplete="current-password" required class="appearance-none rounded-none relative block w-full px-3 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 rounded-b-md focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 focus:z-10 sm:text-sm dark:bg-gray-600 dark:border-gray-500 dark:placeholder-gray-400 dark:text-white" placeholder="Password">
          </div>
        </div>

        <div class="flex items-center justify-between">
          <div class="flex items-center">
            <input id="remember-me" name="remember-me" type="checkbox" class="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded dark:bg-gray-500 dark:border-gray-400">
            <label for="remember-me" class="ml-2 block text-sm text-gray-900 dark:text-gray-200">
              Remember me
            </label>
          </div>

          <div class="text-sm">
            <a href="#" class="font-medium text-indigo-600 hover:text-indigo-500 dark:text-indigo-400 dark:hover:text-indigo-300">
              Forgot your password?
            </a>
          </div>
        </div>

        <div>
          <button type="submit" class="group relative w-full flex justify-center py-2 px-4 border border-transparent text-sm font-medium rounded-md text-white bg-gradient-to-r from-indigo-600 to-indigo-700 hover:from-indigo-700 hover:to-indigo-800 focus:outline-none focus:ring-2 focus:ring- offsetting-2 focus:ring-indigo-500 shadow-lg transform transition duration-300 ease-in-out hover:scale-105">
            <span class="absolute left-0 inset-y-0 flex items-center pl-3">
              <svg class="h-5 w-5 text-indigo-500 group-hover:text-indigo-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                <path fill-rule="evenodd" d="M5 9V7a5 5 0 0110 0v2h1a2 2 0 012 2v5a2 2 0 01-2 2H4a2 2 0 01-2-2v-5a2 2 0 012-2h1zm5-3a1 1 0 011 1v3a1 1 0 11-2 0V7a1 1 0 011-1z" clip-rule="evenodd" />
              </svg>
            </span>
            Sign in
          </button>
        </div>
      </form>
    </div>
  </div>
</div>

제품 비교 구성 요소

3D와 유사한 디자인 요소, 어두운 테마 지원, picsum.photos 및 randomuser.me 를 사용하여 제품 시각화 및 사용자 아바타를 위한 자리 표시자 이미지 통합을 갖춘 반응형 제품 비교 구성 요소입니다.

미리보기 열기

                <div class="container mx-auto px-4 py-8">
  <div class="dark:bg-gray-800 bg-white rounded-lg shadow-lg overflow-hidden">
    <div class="flex flex-col md:flex-row">
      <!-- Product 1 -->
      <div class="flex-1 p-6 dark:border-gray-700 border-b md:border-b-0 md:border-r relative">
        <div class="absolute inset-0 bg-gradient-to-br from-blue-500 to-purple-600 opacity-20"></div>
        <div class="relative z-10">
          <h3 class="text-xl font-semibold mb-4 dark:text-white text-gray-800">Product A</h3>
          <img src="https://picsum.photos/seed/producta/400/300" alt="Product A" class="mx-auto mb-6 rounded-md shadow-md">
          <ul class="text-sm dark:text-gray-300 text-gray-700 space-y-2">
            <li>Feature 1</li>
            <li>Feature 2</li>
            <li>Feature 3</li>
          </ul>
          <div class="mt-6 text-center">
            <button class="bg-blue-600 text-white px-6 py-2 rounded-full hover:bg-blue-700 transition duration-300">Learn More</button>
          </div>
        </div>
      </div>

      <!-- Product 2 -->
      <div class="flex-1 p-6 relative">
         <div class="absolute inset-0 bg-gradient-to-br from-green-500 to-teal-600 opacity-20"></div>
        <div class="relative z-10">
          <h3 class="text-xl font-semibold mb-4 dark:text-white text-gray-800">Product B</h3>
          <img src="https://picsum.photos/seed/productb/400/300" alt="Product B" class="mx-auto mb-6 rounded-md shadow-md">
          <ul class="text-sm dark:text-gray-300 text-gray-700 space-y-2">
            <li>Feature A</li>
            <li>Feature B</li>
            <li>Feature C</li>
          </ul>
           <div class="mt-6 text-center">
            <button class="bg-green-600 text-white px-6 py-2 rounded-full hover:bg-green-700 transition duration-300">Learn More</button>
          </div>
        </div>
      </div>
    </div>

    <!-- Comparison Table (Optional addition for more detail) -->
     <div class="p-6 dark:bg-gray-700 bg-gray-100">
      <h4 class="text-lg font-semibold mb-4 dark:text-white text-gray-800">Detailed Comparison</h4>
      <table class="min-w-full divide-y divide-gray-200 dark:divide-gray-600">
        <thead>
          <tr>
            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Feature</th>
            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Product A</th>
            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Product B</th>
          </tr>
        </thead>
        <tbody class="dark:bg-gray-800 bg-white divide-y divide-gray-200 dark:divide-gray-600">
          <tr>
            <td class="px-6 py-4 whitespace-nowrap text-sm font-medium dark:text-white text-gray-900">Feature 1/A</td>
            <td class="px-6 py-4 whitespace-nowrap text-sm dark:text-gray-300 text-gray-700">Yes</td>
            <td class="px-6 py-4 whitespace-nowrap text-sm dark:text-gray-300 text-gray-700">Maybe</td>
          </tr>
          <tr>
            <td class="px-6 py-4 whitespace-nowrap text-sm font-medium dark:text-white text-gray-900">Feature 2/B</td>
            <td class="px-6 py-4 whitespace-nowrap text-sm dark:text-gray-300 text-gray-700">Some</td>
            <td class="px-6 py-4 whitespace-nowrap text-sm dark:text-gray-300 text-gray-700">Yes</td>
          </tr>
           <tr>
            <td class="px-6 py-4 whitespace-nowrap text-sm font-medium dark:text-white text-gray-900">Feature 3/C</td>
            <td class="px-6 py-4 whitespace-nowrap text-sm dark:text-gray-300 text-gray-700">No</td>
            <td class="px-6 py-4 whitespace-nowrap text-sm dark:text-gray-300 text-gray-700">Yes</td>
          </tr>
        </tbody>
      </table>
    </div>

     <!-- Avatars section -->
    <div class="p-6 flex justify-around items-center dark:bg-gray-700 bg-gray-100">
        <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar 1" class="w-12 h-12 rounded-full shadow-md">
        <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar 2" class="w-12 h-12 rounded-full shadow-md">
         <img src="https://randomuser.me/api/portraits/women/21.jpg" alt="User Avatar 3" class="w-12 h-12 rounded-full shadow-md">
    </div>

  </div>
</div>

레트로 전자 상거래 제품 카드

반응형 디자인과 다크 모드를 지원하는 레트로/빈티지 전자 상거래 제품 카드입니다.

미리보기 열기

                <div class="max-w-sm rounded overflow-hidden shadow-lg m-4 bg-white dark:bg-gray-800">
  <img class="w-full" src="https://picsum.photos/seed/retro1/400/300" alt="Retro product image">
  <div class="px-6 py-4">
    <div class="font-bold text-xl mb-2 text-gray-900 dark:text-white">Retro Collectible</div>
    <p class="text-gray-700 dark:text-gray-300 text-base">
      A truly unique retro item that brings back memories of a bygone era. Perfect for collectors and enthusiasts.
    </p>
  </div>
  <div class="px-6 pt-4 pb-2">
    <span class="inline-block bg-gray-200 dark:bg-gray-700 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 dark:text-gray-200 mr-2 mb-2">#retro</span>
    <span class="inline-block bg-gray-200 dark:bg-gray-700 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 dark:text-gray-200 mr-2 mb-2">#vintage</span>
    <span class="inline-block bg-gray-200 dark:bg-gray-700 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 dark:text-gray-200 mb-2">#collectible</span>
  </div>
  <div class="px-6 py-4 flex items-center justify-between">
    <span class="font-bold text-xl text-gray-900 dark:text-white">$19.99</span>
    <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded dark:bg-blue-700 dark:hover:bg-blue-600">
      Add to Cart
    </button>
  </div>
</div>

뉴모피즘 프로그레스 바

Tailwind CSS를 사용하여 Neumorphism 디자인, 반응형 효과 및 어두운 테마를 지원하는 프로그레스 바 구성 요소

미리보기 열기

                <!-- Light Mode -->
<div class="flex items-center justify-center min-h-screen bg-gray-200 dark:bg-gray-800">
  <div class="w-64 h-4 bg-gray-300 rounded-full shadow-inner dark:bg-gray-700 dark:shadow-inner-dark">
    <div class="w-3/4 h-full text-center text-xs text-white bg-blue-500 rounded-full dark:bg-blue-600" style="width: 75%;">
    </div>
  </div>
</div>

<!-- Dark Mode (example - activate dark mode in your Tailwind config) -->
<div class="flex items-center justifies-center min-h-screen bg-gray-800">
  <div class="w-64 h-4 bg-gray-700 rounded-full shadow-inner-dark">
    <div class="w-3/4 h-full text-center text-xs text-white bg-blue-600 rounded-full" style="width: 75%;">
    </div>
  </div>
</div>

Navigation 구성 요소

다크 모드 UI용으로 설계된 반응형 탐색 구성 요소로, 링크, 드롭다운 및 로고가 특징이며, 모두 Tailwind CSS로 스타일이 지정되었습니다.

미리보기 열기

                <nav class="bg-gray-800 p-4 fixed w-full">
    <div class="flex justify-between items-center">
        <div class="text-white text-lg font-bold">
            <a href="#" class="flex items-center">
                <img src="https://picsum.photos/40" alt="Logo" class="mr-2 rounded-full">
                MyApp
            </a>
        </div>
        <div class="hidden md:flex space-x-4">
            <a href="#" class="text-gray-300 hover:bg-gray-700 px-3 py-2 rounded">Home</a>
            <a href="#" class="text-gray-300 hover:bg-gray-700 px-3 py-2 rounded">About</a>
            <div class="relative">
                <button class="text-gray-300 hover:bg-gray-700 px-3 py-2 rounded flex items-center">Services
                    <svg class="w-4 h-4 ml-1" 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="M5 15l7-7 7 7"/>
                    </svg>
                </button>
                <div class="absolute left-0 hidden bg-gray-800 text-white mt-1 rounded shadow-md w-40">
                    <a href="#" class="block px-4 py-2 hover:bg-gray-700">Web Design</a>
                    <a href="#" class="block px-4 py-2 hover:bg-gray-700">SEO</a>
                    <a href="#" class="block px-4 py-2 hover:bg-gray-700">Marketing</a>
                </div>
            </div>
            <a href="#" class="text-gray-300 hover:bg-gray-700 px-3 py-2 rounded">Contact</a>
        </div>
        <div class="md:hidden">
            <button class="text-gray-300 hover:bg-gray-700 px-3 py-2 rounded 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="mt-16 p-4">
    <h1 class="text-3xl text-white">Welcome to MyApp</h1>
    <p class="text-gray-300">This is an example of a dark mode navigation component using Tailwind CSS.</p>
</div>

<style>
    .dropdown:hover .dropdown-content {
        display: block;
    }
</style>

소셜 로그인 구성 요소

Tailwind CSS를 사용하여 마이크로 인터랙션 디자인, 반응형 효과 및 어두운 테마를 지원하는 소셜 로그인 구성 요소.

미리보기 열기

                <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-8 space-y-6 bg-white rounded-lg shadow-md dark:bg-gray-800">
    <h2 class="text-2xl font-bold text-center text-gray-900 dark:text-white">Sign in to your account</h2>
    <div class="grid grid-cols-1 gap-4 md:grid-cols-2">
      <button class="flex items-center justify-center px-4 py-2 space-x-2 transition duration-200 ease-in-out bg-white border border-gray-300 rounded-md shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white dark:hover:bg-gray-600">
        <img src="https://www.svgrepo.com/show/512319/github-142.svg" alt="GitHub" class="w-5 h-5">
        <span>GitHub</span>
      </button>
      <button class="flex items-center justify-center px-4 py-2 space-x-2 transition duration-200 ease-in-out bg-white border border-gray-300 rounded-md shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white dark:hover:bg-gray-600">
        <img src="https://www.svgrepo.com/show/512100/google-177.svg" alt="Google" class="w-5 h-5">
        <span>Google</span>
      </button>
      <button class="flex items-center justify-center px-4 py-2 space-x-2 transition duration-200 ease-in-out bg-white border border-gray-300 rounded-md shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white dark:hover:bg-gray-600">
        <img src="https://www.svgrepo.com/show/512099/facebook-176.svg" alt="Facebook" class="w-5 h-5">
        <span>Facebook</span>
      </button>
      <button class="flex items-center justify-center px-4 py-2 space-x-2 transition duration-200 ease-in-out bg-white border border-gray-300 rounded-md shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white dark:hover:bg-gray-600">
        <img src="https://www.svgrepo.com/show/512107/twitter-153.svg" alt="Twitter" class="w-5 h-5">
        <span>Twitter</span>
      </button>
    </div>
    <div class="relative">
      <div class="absolute inset-0 flex items-center">
        <div class="w-full border-t border-gray-300 dark:border-gray-600"></div>
      </div>
      <div class="relative flex justify-center text-sm">
        <span class="bg-white px-2 text-gray-500 dark:bg-gray-800 dark:text-gray-400">Or continue with</span>
      </div>
    </div>
    <form class="space-y-4">
      <div>
        <label for="email" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Email address</label>
        <div class="mt-1">
          <input id="email" name="email" type="email" autocomplete="email" required class="block w-full px-3 py-2 placeholder-gray-400 border border-gray-300 rounded-md shadow-sm appearance-none focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm dark:bg-gray-700 dark:border-gray-600 dark:text-white dark:placeholder-gray-500">
        </div>
      </div>
      <div>
        <label for="password" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Password</label>
        <div class="mt-1">
          <input id="password" name="password" type="password" autocomplete="current-password" required class="block w-full px-3 py-2 placeholder-gray-400 border border-gray-300 rounded-md shadow-sm appearance-none focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm dark:bg-gray-700 dark:border-gray-600 dark:text-white dark:placeholder-gray-500">
        </div>
      </div>
      <div class="flex items-center justify-between">
        <div class="flex items-center">
          <input id="remember-me" name="remember-me" type="checkbox" class="w-4 h-4 text-indigo-600 border-gray-300 rounded focus:ring-indigo-500 dark:border-gray-600 dark:bg-gray-700 dark:checked:bg-indigo-600">
          <label for="remember-me" class="block ml-2 text-sm text-gray-900 dark:text-gray-300">Remember me</label>
        </div>
        <div class="text-sm">
          <a href="#" class="font-medium text-indigo-600 hover:text-indigo-500 dark:text-indigo-400 dark:hover:text-indigo-300">Forgot your password?</a>
        </div>
      </div>
      <div>
        <button type="submit" class="flex justify-center w-full px-4 py-2 text-sm font-medium text-white bg-indigo-600 border border-transparent rounded-md shadow-sm hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:bg-indigo-500 dark:hover:bg-indigo-600">
          Sign in
        </button>
      </div>
    </form>
  </div>
</div>

Content Link Component(콘텐츠 링크 구성 요소)로 건너뛰기

Tailwind CSS를 사용하여 반응형 효과 및 어두운 테마 지원과 함께 3D 스타일의 '콘텐츠로 건너뛰기' 링크를 제공하는 웹 구성 요소입니다.

미리보기 열기

                <div class="relative group">
    <a href="#main-content" class="inline-block px-4 py-2 text-white bg-blue-500 rounded-full shadow-lg transform transition-transform duration-300 ease-in-out hover:scale-105 hover:shadow-2xl dark:bg-blue-700 dark:shadow-lg dark:hover:scale-110">
        Skip to Content
    </a>
    <div class="absolute left-0 translate-y-full opacity-0 group-hover:opacity-100 transition-opacity duration-300 ease-in-out">
        <div class="bg-gray-800 dark:bg-gray-900 text-white text-xs rounded-lg p-2 shadow-lg">
            Skip past navigation and other elements to main content.
        </div>
    </div>
</div>

<div id="main-content" class="mt-10 bg-gray-100 dark:bg-gray-800 p-6 rounded-lg shadow-md">
    <h1 class="text-2xl font-bold text-gray-900 dark:text-white">Main Content Area</h1>
    <p class="mt-4 text-gray-700 dark:text-gray-300">This is where the main content goes. You can add your text and images here.</p>
    <img src="https://picsum.photos/600/400" alt="Random placeholder" class="mt-4 rounded-lg shadow-md">
    <p class="mt-4 text-gray-700 dark:text-gray-300">You can use this space to illustrate the content being referred to by the 'Skip to Content' link.</p>
</div>

Maps 컴포넌트

뉴모피즘으로 스타일이 지정된 반응형 맵 구성 요소로, 어두운 테마를 지원하고 자리 표시자 이미지를 제공합니다.

미리보기 열기

                <div class="bg-gray-200 dark:bg-gray-800 p-6 rounded-lg shadow-lg flex flex-col items-center">
    <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-4">Maps Component</h2>
    <div class="bg-white dark:bg-gray-700 rounded-lg p-4 shadow-xl w-full md:w-96">
        <img src="https://picsum.photos/400/300" alt="Placeholder Map" class="rounded-lg w-full h-auto" />
    </div>
    <div class="flex mt-4">
        <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="rounded-full w-10 h-10 border-2 border-white dark:border-gray-800 shadow-md" />
        <div class="ml-3">
            <p class="text-sm text-gray-700 dark:text-gray-300">User Name</p>
            <p class="text-xs text-gray-500 dark:text-gray-400">Location</p>
        </div>
    </div>
</div>

카테고리