모든 구성 요소

로그인/가입 구성 요소

미니멀하고 평평한 디자인의 로그인/가입 구성 요소로, 반응형 효과와 어두운 테마를 지원하며 Tailwind CSS를 사용합니다.

                <div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-8 max-w-sm w-full">
        <h2 class="text-2xl font-semibold text-center text-gray-800 dark:text-gray-200 mb-6">Welcome</h2>
        <form>
            <div class="mb-4">
                <label class="block text-gray-700 dark:text-gray-300 mb-2" for="username">Username</label>
                <input type="text" id="username" class="border border-gray-300 dark:border-gray-700 rounded-lg w-full py-2 px-3 bg-gray-50 dark:bg-gray-700 focus:outline-none focus:ring focus:ring-blue-500" placeholder="Enter your username" required>
            </div>
            <div class="mb-4">
                <label class="block text-gray-700 dark:text-gray-300 mb-2" for="password">Password</label>
                <input type="password" id="password" class="border border-gray-300 dark:border-gray-700 rounded-lg w-full py-2 px-3 bg-gray-50 dark:bg-gray-700 focus:outline-none focus:ring focus:ring-blue-500" placeholder="Enter your password" required>
            </div>
            <div class="mb-6">
                <button type="submit" class="w-full bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 rounded-lg">Login</button>
            </div>
            <div class="text-center mb-4">
                <span class="text-gray-600 dark:text-gray-400">Or</span>
            </div>
            <div class="mb-6">
                <button type="button" class="w-full bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-gray-200 font-bold py-2 rounded-lg">Signup</button>
            </div>
            <div class="text-center">
                <img class="rounded-full w-16 h-16 mx-auto" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar">
            </div>
            <p class="text-center text-gray-500 dark:text-gray-400 mt-4">Need help? <a href="#" class="text-blue-500 hover:underline">Contact us</a></p>
        </form>
    </div>
</div>
<style>
@media (prefers-color-scheme: dark) {
    input:focus {
        background-color: #4A5568;
    }
    button {
        transition: background-color 0.3s;
    }
}
</style>

로더 구성 요소

머티리얼 디자인 스타일로 디자인된 로더 구성 요소로, Tailwind CSS를 사용하여 반응형 효과와 어두운 테마를 지원합니다.

미리보기 열기

                <div class="flex flex-col items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
    <div class="loader-container grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
        <div class="loader bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md hover:shadow-lg transition duration-300 ease-in-out">
            <div class="animate-bounce w-20 h-20 bg-blue-500 rounded-full mx-auto mb-4"></div>
            <p class="text-center text-gray-700 dark:text-gray-300">Loading...</p>
        </div>
        <div class="loader bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md hover:shadow-lg transition duration-300 ease-in-out">
            <div class="animate-bounce w-20 h-20 bg-green-500 rounded-full mx-auto mb-4"></div>
            <p class="text-center text-gray-700 dark:text-gray-300">Loading...</p>
        </div>
        <div class="loader bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md hover:shadow-lg transition duration-300 ease-in-out">
            <div class="animate-bounce w-20 h-20 bg-red-500 rounded-full mx-auto mb-4"></div>
            <p class="text-center text-gray-700 dark:text-gray-300">Loading...</p>
        </div>
        <div class="loader bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md hover:shadow-lg transition duration-300 ease-in-out">
            <div class="animate-bounce w-20 h-20 bg-yellow-500 rounded-full mx-auto mb-4"></div>
            <p class="text-center text-gray-700 dark:text-gray-300">Loading...</p>
        </div>
        <div class="loader bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md hover:shadow-lg transition duration-300 ease-in-out">
            <div class="animate-bounce w-20 h-20 bg-purple-500 rounded-full mx-auto mb-4"></div>
            <p class="text-center text-gray-700 dark:text-gray-300">Loading...</p>
        </div>
        <div class="loader bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md hover:shadow-lg transition duration-300 ease-in-out">
            <div class="animate-bounce w-20 h-20 bg-pink-500 rounded-full mx-auto mb-4"></div>
            <p class="text-center text-gray-700 dark:text-gray-300">Loading...</p>
        </div>
    </div>
</div>

기능적 구성 요소

스큐어모픽 디자인, 반응형 효과 및 Tailwind CSS를 사용하는 어두운 테마를 지원하는 기능 구성 요소입니다.

미리보기 열기

                <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-4 max-w-lg mx-auto">
    <div class="flex items-center mb-4">
        <img src="https://picsum.photos/50" alt="Avatar" class="rounded-full w-12 h-12 border-4 border-white dark:border-gray-900 shadow-md">
        <h2 class="ml-4 text-xl font-semibold text-gray-800 dark:text-gray-200">User Name</h2>
    </div>
    <div class="bg-gray-100 dark:bg-gray-700 rounded-lg p-4 shadow-inner">
        <h3 class="text-lg font-medium text-gray-800 dark:text-gray-200">About</h3>
        <p class="text-gray-600 dark:text-gray-400">
            A brief description of the user or content, styled in a way that mimics a card.
        </p>
    </div>
    <div class="mt-4">
        <h3 class="text-lg font-medium text-gray-800 dark:text-gray-200">Photos</h3>
        <div class="grid grid-cols-2 gap-2 mt-2">
            <img src="https://picsum.photos/200?random=1" alt="Random" class="rounded-lg shadow-md transform transition-transform duration-300 hover:scale-105">
            <img src="https://picsum.photos/200?random=2" alt="Random" class="rounded-lg shadow-md transform transition-transform duration-300 hover:scale-105">
            <img src="https://picsum.photos/200?random=3" alt="Random" class="rounded-lg shadow-md transform transition-transform duration-300 hover:scale-105">
            <img src="https://picsum.photos/200?random=4" alt="Random" class="rounded-lg shadow-md transform transition-transform duration-300 hover:scale-105">
        </div>
    </div>
</div>

로더 구성 요소

3D로 디자인된 로더 컴포넌트는 Tailwind CSS를 사용하여 깊이와 몰입도, 반응형 효과, 어두운 테마 지원이 있는 로딩 애니메이션을 보여줍니다.

미리보기 열기

                <div class="flex flex-col items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
    <h2 class="text-2xl font-bold text-gray-800 dark:text-gray-200 mb-6">Loading...</h2>
    <div class="flex space-x-4">
        <div class="w-16 h-16 bg-gradient-to-r from-blue-500 to-purple-500 rounded-full animate-ping shadow-lg transform transition-transform duration-500 hover:scale-110"></div>
        <div class="w-16 h-16 bg-gradient-to-r from-green-500 to-teal-500 rounded-full animate-ping shadow-lg transform transition-transform duration-500 hover:scale-110"></div>
        <div class="w-16 h-16 bg-gradient-to-r from-red-500 to-orange-500 rounded-full animate-ping shadow-lg transform transition-transform duration-500 hover:scale-110"></div>
    </div>
    <div class="mt-8 flex flex-col items-center">
        <img src="https://picsum.photos/100/100?random=1" alt="Loading Image" class="rounded-full border-4 border-white dark:border-gray-800 shadow-lg">
        <p class="mt-2 text-sm text-gray-600 dark:text-gray-400">Loading user profile...</p>
    </div>
</div>

Sticky Navigation 구성 요소

Tailwind CSS를 사용하여 머티리얼 디자인 원칙에 따라 스타일링된 반응형 고정 탐색 구성 요소로, 어두운 테마를 특징으로 하며 임의의 자리 표시자 이미지와 아바타를 포함합니다.

미리보기 열기

                <nav class="bg-white dark:bg-gray-800 shadow-lg fixed w-full z-10">
    <div class="max-w-7xl mx-auto p-4 flex justify-between items-center">
        <div class="flex items-center space-x-4">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="rounded-full w-10 h-10">
            <h1 class="text-xl font-bold text-gray-800 dark:text-white">My Website</h1>
        </div>
        <div>
            <ul class="flex space-x-4">
                <li><a href="#" class="text-gray-600 dark:text-gray-300 hover:text-blue-500 dark:hover:text-blue-400 transition">Home</a></li>
                <li><a href="#" class="text-gray-600 dark:text-gray-300 hover:text-blue-500 dark:hover:text-blue-400 transition">About</a></li>
                <li><a href="#" class="text-gray-600 dark:text-gray-300 hover:text-blue-500 dark:hover:text-blue-400 transition">Services</a></li>
                <li><a href="#" class="text-gray-600 dark:text-gray-300 hover:text-blue-500 dark:hover:text-blue-400 transition">Contact</a></li>
            </ul>
        </div>
    </div>
</nav>

<div class="pt-16">
    <header class="bg-gray-100 dark:bg-gray-900 h-screen flex items-center justify-center">
        <h2 class="text-3xl font-bold text-gray-800 dark:text-white">Welcome to My Website</h2>
    </header>
    <section class="p-8">
        <h3 class="text-2xl font-bold text-gray-800 dark:text-white mb-4">Gallery</h3>
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
            <img src="https://picsum.photos/200/300?random=1" alt="Random Image" class="rounded shadow-lg">
            <img src="https://picsum.photos/200/300?random=2" alt="Random Image" class="rounded shadow-lg">
            <img src="https://picsum.photos/200/300?random=3" alt="Random Image" class="rounded shadow-lg">
            <img src="https://picsum.photos/200/300?random=4" alt="Random Image" class="rounded shadow-lg">
        </div>
    </section>
</div>

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

Like/Reaction Buttons 컴포넌트

Glassmorphism 디자인 스타일의 Like/Reaction Buttons 컴포넌트로, Tailwind CSS를 사용하여 젖빛 유리 효과, 반응형 디자인, 어두운 테마 지원을 특징으로 합니다.

미리보기 열기

                <div class="flex flex-col items-center justify-center h-screen bg-gray-100 dark:bg-gray-900">
    <div class="bg-white bg-opacity-30 dark:bg-gray-800 bg-clip-padding backdrop-filter backdrop-blur-md border border-gray-300 dark:border-gray-700 rounded-lg p-6 shadow-lg transition duration-300 ease-in-out hover:shadow-xl">
        <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-4">React to this post!</h2>
        <div class="flex space-x-4">
            <button class="flex flex-col items-center bg-transparent border-2 border-transparent rounded-lg p-2 hover:border-blue-500 transition duration-300">
                <img src="https://picsum.photos/30/30?random=1" alt="Like" class="rounded-full mb-1">
                <span class="text-sm text-gray-800 dark:text-gray-200">Like</span>
            </button>
            <button class="flex flex-col items-center bg-transparent border-2 border-transparent rounded-lg p-2 hover:border-green-500 transition duration-300">
                <img src="https://picsum.photos/30/30?random=2" alt="Love" class="rounded-full mb-1">
                <span class="text-sm text-gray-800 dark:text-gray-200">Love</span>
            </button>
            <button class="flex flex-col items-center bg-transparent border-2 border-transparent rounded-lg p-2 hover:border-yellow-500 transition duration-300">
                <img src="https://picsum.photos/30/30?random=3" alt="Haha" class="rounded-full mb-1">
                <span class="text-sm text-gray-800 dark:text-gray-200">Haha</span>
            </button>
            <button class="flex flex-col items-center bg-transparent border-2 border-transparent rounded-lg p-2 hover:border-red-500 transition duration-300">
                <img src="https://picsum.photos/30/30?random=4" alt="Wow" class="rounded-full mb-1">
                <span class="text-sm text-gray-800 dark:text-gray-200">Wow</span>
            </button>
            <button class="flex flex-col items-center bg-transparent border-2 border-transparent rounded-lg p-2 hover:border-purple-500 transition duration-300">
                <img src="https://picsum.photos/30/30?random=5" alt="Sad" class="rounded-full mb-1">
                <span class="text-sm text-gray-800 dark:text-gray-200">Sad</span>
            </button>
            <button class="flex flex-col items-center bg-transparent border-2 border-transparent rounded-lg p-2 hover:border-gray-500 transition duration-300">
                <img src="https://picsum.photos/30/30?random=6" alt="Angry" class="rounded-full mb-1">
                <span class="text-sm text-gray-800 dark:text-gray-200">Angry</span>
            </button>
        </div>
    </div>
</div>

Interactive Components 구성 요소

3D 인터랙티브 컴포넌트로, 깊이 효과, 반응형 디자인, 어두운 테마 지원 기능이 있는 카드를 선보입니다.

미리보기 열기

                <div class="flex flex-wrap justify-center gap-4 p-6 bg-gray-100 dark:bg-gray-900 transition-all duration-300">
    <div class="rounded-lg shadow-lg transform transition-transform duration-300 hover:scale-105 dark:bg-gray-800 bg-white p-4">
        <img src="https://picsum.photos/200/300" alt="Placeholder Image" class="rounded-md mb-4">
        <h2 class="text-lg font-semibold text-gray-900 dark:text-gray-100">Card Title 1</h2>
        <p class="text-gray-600 dark:text-gray-300">This is a brief description of the first card. It's an engaging component.</p>
    </div>
    <div class="rounded-lg shadow-lg transform transition-transform duration-300 hover:scale-105 dark:bg-gray-800 bg-white p-4">
        <img src="https://picsum.photos/200/300?random=1" alt="Placeholder Image" class="rounded-md mb-4">
        <h2 class="text-lg font-semibold text-gray-900 dark:text-gray-100">Card Title 2</h2>
        <p class="text-gray-600 dark:text-gray-300">This is a brief description of the second card. Enjoy the depth effect!</p>
    </div>
    <div class="rounded-lg shadow-lg transform transition-transform duration-300 hover:scale-105 dark:bg-gray-800 bg-white p-4">
        <img src="https://picsum.photos/200/300?random=2" alt="Placeholder Image" class="rounded-md mb-4">
        <h2 class="text-lg font-semibold text-gray-900 dark:text-gray-100">Card Title 3</h2>
        <p class="text-gray-600 dark:text-gray-300">This is a brief description of the third card. The 3D design enhances engagement.</p>
    </div>
</div>

Two-Factor Authentication 구성 요소

Tailwind CSS를 사용하여 브루탈리즘 디자인 스타일의 2단계 인증 구성 요소로, 반응형 효과와 어두운 테마 지원이 특징입니다.

미리보기 열기

                <div class="flex flex-col items-center justify-center min-h-screen p-4 bg-gray-100 dark:bg-gray-800">
    <div class="max-w-sm p-6 bg-white dark:bg-gray-900 border border-gray-300 dark:border-gray-700 shadow-md rounded-lg flex flex-col">
        <h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-4 text-center">Two-Factor Authentication</h2>
        <p class="text-gray-600 dark:text-gray-400 text-center mb-6">
            Please enter the authentication code sent to your email.
        </p>
        <div class="flex flex-col mb-4">
            <label class="text-gray-600 dark:text-gray-400 text-sm mb-2" for="auth-code">Authentication Code</label>
            <input type="text" id="auth-code" class="p-2 border border-gray-300 dark:border-gray-700 rounded focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400 transition duration-200" placeholder="Enter your code">
        </div>
        <button class="w-full p-2 bg-blue-600 text-white font-bold rounded hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-400 transition duration-200">Verify</button>
        <div class="mt-4 text-center">
            <img src="https://picsum.photos/50?random=1" alt="Placeholder" class="rounded-full mb-2">
            <span class="text-gray-600 dark:text-gray-400 text-sm">John Doe</span>
        </div>
    </div>
</div>

비디오 플레이어 구성 요소

Tailwind CSS로 스타일링된 반응형 동영상 플레이어 구성 요소는 마이크로 인터랙션 및 어두운 테마 지원에 중점을 둡니다.

미리보기 열기

                <div class="bg-white dark:bg-gray-800 rounded-lg overflow-hidden shadow-lg transition-transform hover:scale-105 duration-200" role="video" aria-label="Video Player">
    <div class="relative">
        <img src="https://picsum.photos/800/450?random=1" alt="Video thumbnail" class="w-full h-48 object-cover">
        <button class="absolute inset-0 flex items-center justify-center bg-black bg-opacity-50 text-white text-3xl rounded-full opacity-0 transition-opacity duration-200 hover:opacity-100">
            ▶
        </button>
    </div>
    <div class="p-4">
        <div class="flex items-center mb-2">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-2">
            <h2 class="text-lg font-semibold dark:text-white">Video Title</h2>
        </div>
        <p class="text-sm text-gray-700 dark:text-gray-300">Description of the video goes here. It should be engaging and concise.</p>
    </div>
</div>

로그인/가입 구성 요소

Tailwind CSS를 사용하여 스큐어모픽 스타일로 설계된 반응형 로그인/가입 구성 요소이며 어두운 테마를 지원합니다.

미리보기 열기

                <div class="min-h-screen flex items-center justify-center bg-gray-100 dark:bg-gray-900 p-4">
  <div class="bg-white dark:bg-gray-800 shadow-md rounded-lg p-8 max-w-sm w-full">
    <h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-6">Login / Signup</h2>
    <form>
      <div class="mb-4">
        <label class="block text-gray-700 dark:text-gray-300 text-sm font-bold mb-2" for="username">Username</label>
        <input class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 dark:text-white dark:bg-gray-700 focus:outline-none focus:shadow-outline"
          id="username" type="text" placeholder="Enter your username" required>
      </div>
      <div class="mb-4">
        <label class="block text-gray-700 dark:text-gray-300 text-sm font-bold mb-2" for="email">Email</label>
        <input class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 dark:text-white dark:bg-gray-700 focus:outline-none focus:shadow-outline"
          id="email" type="email" placeholder="Enter your email" required>
      </div>
      <div class="mb-4">
        <label class="block text-gray-700 dark:text-gray-300 text-sm font-bold mb-2" for="password">Password</label>
        <input class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 dark:text-white dark:bg-gray-700 focus:outline-none focus:shadow-outline"
          id="password" type="password" placeholder="Enter your password" required>
      </div>
      <div class="flex items-center justify-between mb-4">
        <label class="flex items-center">
          <input type="checkbox" class="form-checkbox h-5 w-5 text-gray-600 dark:text-gray-400">
          <span class="ml-2 text-gray-700 dark:text-gray-300">Remember Me</span>
        </label>
        <a class="inline-block align-baseline font-bold text-sm text-blue-500 hover:text-blue-800 dark:text-blue-300" href="#">
          Forgot Password?
        </a>
      </div>
      <div class="flex items-center justify-center">
        <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline" type="submit">
          Login / Signup
        </button>
      </div>
    </form>
    <div class="mt-4 text-center">
      <p class="text-gray-600 dark:text-gray-400">or</p>
      <button class="flex items-center justify-center mt-2 border border-gray-300 dark:border-gray-600 rounded-lg py-2 px-4 w-full text-gray-600 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 transition ease-in-out duration-150">
        <img src="https://randomuser.me/api/portraits/men/10.jpg" alt="User Avatar" class="w-6 h-6 rounded-full mr-2">
        Sign in with Google
      </button>
    </div>
  </div>
</div>

카테고리