모든 구성 요소

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

탐색 구성 요소

마이크로 인터랙션 및 어두운 테마를 지원하는 반응형 탐색 구성 요소로, Tailwind CSS를 사용하여 설계되었습니다.

                <nav class="bg-white dark:bg-gray-800 shadow-lg">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="flex justify-between items-center h-16">
            <div class="flex-shrink-0">
                <img class="h-8 w-8 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" />
            </div>
            <div class="hidden md:block">
                <div class="flex space-x-4">
                    <a href="#" class="text-gray-900 dark:text-white px-3 py-2 rounded-md text-sm font-medium hover:bg-gray-200 dark:hover:bg-gray-700 transition duration-200 ease-in-out">
                        Home
                    </a>
                    <a href="#" class="text-gray-900 dark:text-white px-3 py-2 rounded-md text-sm font-medium hover:bg-gray-200 dark:hover:bg-gray-700 transition duration-200 ease-in-out">
                        About
                    </a>
                    <a href="#" class="text-gray-900 dark:text-white px-3 py-2 rounded-md text-sm font-medium hover:bg-gray-200 dark:hover:bg-gray-700 transition duration-200 ease-in-out">
                        Services
                    </a>
                    <a href="#" class="text-gray-900 dark:text-white px-3 py-2 rounded-md text-sm font-medium hover:bg-gray-200 dark:hover:bg-gray-700 transition duration-200 ease-in-out">
                        Contact
                    </a>
                </div>
            </div>
            <div class="-mr-2 flex md:hidden">
                <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">
                    <span class="sr-only">Open main menu</span>
                    <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-7 6h7" />
                    </svg>
                </button>
            </div>
        </div>
    </div>
    <div class="md:hidden">
        <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3">
            <a href="#" class="text-gray-900 dark:text-white block px-3 py-2 rounded-md text-base font-medium hover:bg-gray-200 dark:hover:bg-gray-700 transition duration-200 ease-in-out">
                Home
            </a>
            <a href="#" class="text-gray-900 dark:text-white block px-3 py-2 rounded-md text-base font-medium hover:bg-gray-200 dark:hover:bg-gray-700 transition duration-200 ease-in-out">
                About
            </a>
            <a href="#" class="text-gray-900 dark:text-white block px-3 py-2 rounded-md text-base font-medium hover:bg-gray-200 dark:hover:bg-gray-700 transition duration-200 ease-in-out">
                Services
            </a>
            <a href="#" class="text-gray-900 dark:text-white block px-3 py-2 rounded-md text-base font-medium hover:bg-gray-200 dark:hover:bg-gray-700 transition duration-200 ease-in-out">
                Contact
            </a>
        </div>
    </div>
</nav>

Interactive Components 구성 요소

반응형 효과와 어두운 테마를 지원하는 Material Design Interactive Components 구성 요소.

열다 미리 보기

                <script src="https://cdn.tailwindcss.com"></script>

<style>
  /* Add Material Design inspired button styles */
  .material-button {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 0.625rem 1rem;
      font-size: 0.875rem;
      font-weight: 500;
      border-radius: 0.25rem;
      transition: background-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
      box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
  }

  .material-button:hover {
      box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.2);
  }

  /* Add Material Design card styles */
  .material-card {
      border-radius: 0.5rem;
      box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
      transition: box-shadow 0.15s ease-in-out;
  }

   .material-card:hover {
      box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.2);
  }

  /* Respond to dark mode */
  @media (prefers-color-scheme: dark) {
    .dark\:bg-gray-800 {
        --tw-bg-opacity: 1;
        background-color: rgba(31, 41, 55, var(--tw-bg-opacity));
    }
    .dark\:text-white {
        --tw-text-opacity: 1;
        color: rgba(255, 255, 255, var(--tw-text-opacity));
    }
     .dark\:bg-blue-700 {
        --tw-bg-opacity: 1;
        background-color: rgba(29, 78, 216, var(--tw-bg-opacity));
    }
     .dark\:hover\:bg-blue-800:hover {
        --tw-bg-opacity: 1;
        background-color: rgba(30, 64, 175, var(--tw-bg-opacity));
     }
      .dark\:bg-gray-700 {
          --tw-bg-opacity: 1;
          background-color: rgba(55, 65, 81, var(--tw-bg-opacity));
      }
       .dark\:border-gray-600 {
          --tw-border-opacity: 1;
          border-color: rgba(75, 85, 99, var(--tw-border-opacity));
       }
  }
</style>

<div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-800 p-4">
  <div class="material-card w-full max-w-sm bg-white dark:bg-gray-700 rounded-lg shadow-lg p-6">
    <div class="flex justify-center mb-6">
      <img class="w-24 h-24 rounded-full border-4 border-blue-500 dark:border-blue-700" src="https://randomuser.me/api/portraits/men/75.jpg" alt="Avatar">
    </div>
    <div class="text-center mb-6">
      <h2 class="text-2xl font-semibold text-gray-800 dark:text-white">John Doe</h2>
      <p class="text-gray-600 dark:text-gray-300">Software Engineer</p>
    </div>
    <div class="flex justify-around">
      <button class="material-button bg-blue-500 text-white hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50 dark:bg-blue-700 dark:hover:bg-blue-800">
        Follow
      </button>
      <button class="material-button bg-white text-gray-800 border border-gray-300 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 focus:ring-opacity-50 dark:bg-gray-700 dark:text-white dark:border-gray-600 dark:hover:bg-gray-600">
        Message
      </button>
    </div>
  </div>
</div>

Success Messages 구성 요소

Tailwind CSS를 활용하여 3D 디자인 요소와 어두운 테마 지원을 특징으로 하는 반응형 성공 메시지 구성 요소입니다.

열다 미리 보기

                <div class="max-w-md mx-auto p-6 bg-white rounded-lg shadow-lg transform transition-all duration-300 hover:scale-105 dark:bg-gray-800 dark:shadow-2xl">
    <div class="flex items-center mb-4">
        <img src="https://picsum.photos/50/50" alt="Avatar" class="w-12 h-12 rounded-full mr-3 shadow-md" />
        <h2 class="font-bold text-lg text-gray-800 dark:text-gray-200">Success Message Title</h2>
    </div>
    <p class="text-gray-600 dark:text-gray-400">
        Your operation was successful! This message confirms that your changes were saved properly.
    </p>
    <div class="mt-4">
        <img src="https://picsum.photos/300/200" alt="Success Illustration" class="w-full h-auto rounded-lg shadow-md" />
    </div>
</div>
<style>
    @media (prefers-color-scheme: dark) {
        .dark\:bg-gray-800 {
            background-color: #1F2937;
        }
        .dark\:text-gray-200 {
            color: #E5E7EB;
        }
        .dark\:text-gray-400 {
            color: #9CA3AF;
        }
        .dark\:shadow-2xl {
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
        }
    }
</style>

Password Reset 구성 요소

Skeuomorphism 디자인, 반응형 효과 및 어두운 테마 지원이 있는 암호 재설정 구성 요소.

열다 미리 보기

                <div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
  <div class="p-8 bg-white dark:bg-gray-800 rounded-xl shadow-neumorphic dark:shadow-neumorphic-dark w-full max-w-md">
    <h2 class="text-2xl font-bold text-center text-gray-800 dark:text-white mb-6">Reset Password</h2>
    <form>
      <div class="mb-4">
        <label for="email" class="block text-gray-700 dark:text-gray-300 text-sm font-bold mb-2">Email Address</label>
        <input type="email" id="email" class="shadow-inner-neumorphic dark:shadow-inner-neumorphic-dark appearance-none border rounded w-full py-2 px-3 text-gray-700 dark:text-gray-300 leading-tight focus:outline-none focus:shadow-outline bg-gray-200 dark:bg-gray-700" placeholder="Enter your email">
      </div>
      <div class="mb-6">
        <label for="password" class="block text-gray-700 dark:text-gray-300 text-sm font-bold mb-2">New Password</label>
        <input type="password" id="password" class="shadow-inner-neumorphic dark:shadow-inner-neumorphic-dark appearance-none border rounded w-full py-2 px-3 text-gray-700 dark:text-gray-300 leading-tight focus:outline-none focus:shadow-outline bg-gray-200 dark:bg-gray-700" placeholder="Enter your new password">
      </div>
      <div class="mb-6">
        <label for="confirm-password" class="block text-gray-700 dark:text-gray-300 text-sm font-bold mb-2">Confirm New Password</label>
        <input type="password" id="confirm-password" class="shadow-inner-neumorphic dark:shadow-inner-neumorphic-dark appearance-none border rounded w-full py-2 px-3 text-gray-700 dark:text-gray-300 leading-tight focus:outline-none focus:shadow-outline bg-gray-200 dark:bg-gray-700" placeholder="Confirm your new password">
      </div>
      <div class="flex items-center justify-between">
        <button type="button" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline shadow-neumorphic-pressed dark:shadow-neumorphic-pressed-dark">
          Reset Password
        </button>
      </div>
    </form>
  </div>
</div>

<style>
  .shadow-neumorphic {
    box-shadow: 5px 5px 10px #cbced1, -5px -5px 10px #ffffff;
  }

  .dark .shadow-neumorphic-dark {
    box-shadow: 5px 5px 10px #1a202c, -5px -5px 10px #2d3748;
  }

  .shadow-inner-neumorphic {
    box-shadow: inset 5px 5px 10px #cbced1, inset -5px -5px 10px #ffffff;
  }

  .dark .shadow-inner-neumorphic-dark {
    box-shadow: inset 5px 5px 10px #1a202c, inset -5px -5px 10px #2d3748;
  }

    .shadow-neumorphic-pressed {
    box-shadow: inset 5px 5px 10px #a3b1c6, inset -5px -5px 10px #ffffff;
  }

  .dark .shadow-neumorphic-pressed-dark {
    box-shadow: inset 5px 5px 10px #1a202c, inset -5px -5px 10px #2d3748;
  }
</style>

비디오 플레이어

Tailwind CSS를 사용하여 머티리얼 디자인 스타일, 반응형 효과 및 어두운 테마를 지원하는 비디오 플레이어 구성 요소입니다.

열다 미리 보기

                <div class="max-w-sm mx-auto rounded-md overflow-hidden shadow-lg bg-white dark:bg-gray-800">
  <div class="relative">
    <img class="w-full" src="https://picsum.photos/600/400" alt="Video thumbnail">
    <div class="absolute inset-0 flex items-center justify-center">
      <button class="text-white text-6xl">
        ▶
      </button>
    </div>
  </div>
  <div class="px-6 py-4">
    <div class="font-bold text-xl mb-2 text-gray-800 dark:text-white">Video Title</div>
    <p class="text-gray-700 dark:text-gray-300 text-base">
      Video description goes here.
    </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-300 mr-2 mb-2">#tag1</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-300 mr-2 mb-2">#tag2</span>
  </div>
</div>

로그인/가입 구성 요소

Tailwind CSS로 설계된 미니멀한 로그인/가입 구성 요소로, 반응형 효과와 어두운 테마 지원을 특징으로 합니다. 이 구성 요소는 깨끗하고 단순한 미학을 제공하는 동시에 다양한 장치에서 사용성을 보장합니다.

열다 미리 보기

                <div class="min-h-screen flex items-center justify-center bg-white dark:bg-gray-900">
  <div class="bg-gray-100 dark:bg-gray-800 rounded-lg shadow-lg p-8 max-w-sm w-full">
    <h2 class="text-2xl font-semibold text-gray-800 dark:text-white text-center">Welcome Back</h2>
    <p class="text-gray-600 dark:text-gray-400 text-center mb-6">Login to your account</p>
    <form>
      <div class="mb-4">
        <label class="block text-gray-700 dark:text-gray-300" for="email">Email</label>
        <input class="block w-full px-4 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-400 dark:bg-gray-700 dark:border-gray-600 dark:text-white" type="email" id="email" placeholder="[email protected]" required />
      </div>
      <div class="mb-6">
        <label class="block text-gray-700 dark:text-gray-300" for="password">Password</label>
        <input class="block w-full px-4 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-400 dark:bg-gray-700 dark:border-gray-600 dark:text-white" type="password" id="password" placeholder="********" required />
      </div>
      <button type="submit" class="w-full bg-blue-500 hover:bg-blue-600 text-white font-semibold py-2 rounded-md transition duration-200">Login</button>
    </form>
    <div class="mt-4 text-center">
      <p class="text-gray-600 dark:text-gray-400">Don't have an account? <a href="#" class="text-blue-500 hover:underline">Sign up</a></p>
    </div>
  </div>
</div>

<div class="min-h-screen flex items-center justify-center bg-white dark:bg-gray-900">
  <div class="bg-gray-100 dark:bg-gray-800 rounded-lg shadow-lg p-8 max-w-sm w-full mt-8">
    <h2 class="text-2xl font-semibold text-gray-800 dark:text-white text-center">Create Account</h2>
    <p class="text-gray-600 dark:text-gray-400 text-center mb-6">Join us today!</p>
    <form>
      <div class="mb-4">
        <label class="block text-gray-700 dark:text-gray-300" for="name">Name</label>
        <input class="block w-full px-4 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-400 dark:bg-gray-700 dark:border-gray-600 dark:text-white" type="text" id="name" placeholder="John Doe" required />
      </div>
      <div class="mb-4">
        <label class="block text-gray-700 dark:text-gray-300" for="email-signup">Email</label>
        <input class="block w-full px-4 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-400 dark:bg-gray-700 dark:border-gray-600 dark:text-white" type="email" id="email-signup" placeholder="[email protected]" required />
      </div>
      <div class="mb-6">
        <label class="block text-gray-700 dark:text-gray-300" for="password-signup">Password</label>
        <input class="block w-full px-4 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-400 dark:bg-gray-700 dark:border-gray-600 dark:text-white" type="password" id="password-signup" placeholder="********" required />
      </div>
      <button type="submit" class="w-full bg-blue-500 hover:bg-blue-600 text-white font-semibold py-2 rounded-md transition duration-200">Sign Up</button>
    </form>
    <div class="mt-4 text-center">
      <p class="text-gray-600 dark:text-gray-400">Already have an account? <a href="#" class="text-blue-500 hover:underline">Login</a></p>
    </div>
  </div>
</div>

Toast Notifications 구성 요소

Glassmorphism 스타일로 디자인된 Toast Notifications 구성 요소로, 반응형 효과와 어두운 테마 지원을 특징으로 합니다. 스타일링에는 Tailwind CSS를 사용하고, 비주얼에는 picsum.photos의 플레이스홀더 이미지를, 아바타에는 randomuser.me 사용합니다.

열다 미리 보기

                <div class="fixed bottom-5 right-5 space-y-3">
    <div class="bg-white bg-opacity-20 backdrop-blur-lg rounded-lg border border-white border-opacity-30 shadow-lg p-4 w-80 transition transform duration-300 scale-100 hover:scale-105">
        <div class="flex items-center">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3">
            <div class="flex-grow">
                <p class="text-white font-semibold">Notification Title</p>
                <p class="text-white text-sm">This is a toast notification message to inform you about something important.</p>
            </div>
        </div>
        <div class="flex justify-end mt-2">
            <button class="bg-blue-600 text-white px-4 py-1 rounded-full hover:bg-blue-700 focus:outline-none">Action</button>
        </div>
    </div>

    <div class="bg-white bg-opacity-20 backdrop-blur-lg rounded-lg border border-white border-opacity-30 shadow-lg p-4 w-80 transition transform duration-300 scale-100 hover:scale-105">
        <div class="flex items-center">
            <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3">
            <div class="flex-grow">
                <p class="text-white font-semibold">Another Notification</p>
                <p class="text-white text-sm">This is another toast notification message for your consideration.</p>
            </div>
        </div>
        <div class="flex justify-end mt-2">
            <button class="bg-blue-600 text-white px-4 py-1 rounded-full hover:bg-blue-700 focus:outline-none">Dismiss</button>
        </div>
    </div>
</div>

<style>
@media (prefers-color-scheme: dark) {
    .bg-white {
        background-color: rgba(255, 255, 255, 0.1);
    }
    .text-white {
        color: white;
    }
    .border-white {
        border-color: rgba(255, 255, 255, 0.3);
    }
}
</style>

사용자 프로필 구성 요소

사용자 프로필 구성 요소에는 Neumorphism 디자인, 반응형 효과 및 어두운 테마가 지원됩니다.

열다 미리 보기

                <div class="flex flex-wrap items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900 p-10">

  <!-- User Profile Card -->
  <div class="w-full max-w-sm mx-auto bg-white dark:bg-gray-800 rounded-2xl shadow-xl p-6 m-4 neumorphism-light dark:neumorphism-dark">
    <div class="flex justify-center">
      <img class="w-32 h-32 rounded-full shadow-md border-4 border-gray-200 dark:border-gray-700" src="https://randomuser.me/api/portraits/women/79.jpg" alt="Profile Picture">
    </div>
    <div class="mt-5 text-center">
      <h2 class="text-xl font-semibold text-gray-800 dark:text-white">Jane Doe</h2>
      <p class="text-gray-600 dark:text-gray-400 mt-1">Software Engineer</p>
      <p class="text-gray-500 dark:text-gray-500 text-sm mt-2">Passionate about creating beautiful and functional web applications.</p>
    </div>
    <div class="flex justify-center mt-5">
      <a href="#" class="text-blue-500 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-600 mx-3">
        <i class="fab fa-twitter"></i>
      </a>
      <a href="#" class="text-blue-700 hover:text-blue-900 dark:text-blue-600 dark:hover:text-blue-800 mx-3">
        <i class="fab fa-linkedin-in"></i>
      </a>
      <a href="#" class="text-gray-700 hover:text-gray-900 dark:text-gray-300 dark:hover:text-gray-100 mx-3">
        <i class="fab fa-github"></i>
      </a>
    </div>
  </div>

  <!-- Another User Profile Card -->
  <div class="w-full max-w-sm mx-auto bg-white dark:bg-gray-800 rounded-2xl shadow-xl p-6 m-4 neumorphism-light dark:neumorphism-dark">
    <div class="flex justify-center">
      <img class="w-32 h-32 rounded-full shadow-md border-4 border-gray-200 dark:border-gray-700" src="https://randomuser.me/api/portraits/men/80.jpg" alt="Profile Picture">
    </div>
    <div class="mt-5 text-center">
      <h2 class="text-xl font-semibold text-gray-800 dark:text-white">John Smith</h2>
      <p class="text-gray-600 dark:text-gray-400 mt-1">UX Designer</p>
      <p class="text-gray-500 dark:text-gray-500 text-sm mt-2">Focused on creating intuitive and enjoyable user experiences.</p>
    </div>
    <div class="flex justify-center mt-5">
      <a href="#" class="text-blue-500 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-600 mx-3">
        <i class="fab fa-twitter"></i>
      </a>
      <a href="#" class="text-blue-700 hover:text-blue-900 dark:text-blue-600 dark:hover:text-blue-800 mx-3">
        <i class="fab fa-linkedin-in"></i>
      </a>
      <a href="#" class="text-gray-700 hover:text-gray-900 dark:text-gray-300 dark:hover:text-gray-100 mx-3">
        <i class="fab fa-github"></i>
      </a>
    </div>
  </div>

  <!-- Add more profile cards as needed -->

</div>

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

.dark .neumorphism-dark {
  box-shadow: 7px 7px 15px #1c1c1c, -7px -7px 15px #2e2e2e;
}
</style>

오디오 플레이어 구성 요소

Glassmorphism 스타일로 설계된 반응형 오디오 플레이어 구성 요소로, 젖빛 유리와 같은 모양과 다크 모드를 지원합니다.

열다 미리 보기

                <div class="flex justify-center items-center min-h-screen bg-gray-200 dark:bg-gray-800">
    <div class="bg-white dark:bg-gray-900 rounded-lg shadow-lg p-6 backdrop-blur-lg bg-opacity-30 border border-gray-300 dark:border-gray-600">
        <img src="https://picsum.photos/200/100" alt="Album Art" class="rounded-lg mb-4">
        <div class="flex flex-col items-center">
            <h2 class="text-lg font-semibold text-gray-800 dark:text-white">Song Title</h2>
            <p class="text-sm text-gray-600 dark:text-gray-400">Artist Name</p>
        </div>
        <div class="w-full my-4">
            <input type="range" class="w-full h-1 bg-gray-300 rounded-lg appearance-none cursor-pointer dark:bg-gray-600" min="0" max="100" value="50">
        </div>
        <div class="flex justify-between">
            <button class="bg-blue-500 text-white font-semibold py-2 px-4 rounded-lg focus:outline-none">Play</button>
            <button class="bg-red-500 text-white font-semibold py-2 px-4 rounded-lg focus:outline-none">Stop</button>
        </div>
    </div>
</div>

Maps 컴포넌트

Tailwind CSS를 사용하여 3D 디자인 요소와 어두운 테마를 지원하는 반응형 지도 구성 요소입니다.

열다 미리 보기

                <div class="relative flex items-top justify-center min-h-screen bg-gray-100 dark:bg-gray-900 sm:items-center sm:pt-0">
    <div class="max-w-6xl w-full mx-auto sm:px-6 lg:px-8">
        <div class="mt-8 overflow-hidden">
            <div class="grid grid-cols-1 md:grid-cols-2 items-center bg-white dark:bg-gray-800 overflow-hidden shadow transform transition-all duration-300 perspective-1000">
                <div class="p-6">
                    <div class="flex items-center">
                        <svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" class="w-8 h-8 text-gray-500 dark:text-gray-400"><path d="M12 12l-2 10l-4 -14l9 -4 4 10L20 12 12 12z"></path></svg>
                        <div class="ml-4 text-lg leading-7 font-semibold"><a href="#" class="underline text-gray-900 dark:text-white">Interactive Map</a></div>
                    </div>

                    <div class="ml-12">
                        <div class="mt-2 text-gray-600 dark:text-gray-400 text-sm">
                            Explore locations with our interactive 3D map. Discover new places and get directions easily.
                        </div>
                    </div>
                </div>

                <div class="relative w-full h-64 md:h-auto" style="transform: translateZ(20px);">
                     <img src="https://picsum.photos/seed/map-placeholder/600/400" alt="Map Placeholder" class="absolute inset-0 w-full h-full object-cover">
                </div>
            </div>
        </div>
    </div>
</div>

1 ... 212 213 214 215 216 ... 242

카테고리

모든 구성 요소