모든 구성 요소

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

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>

OAuth 버튼 구성 요소

3D 디자인 스타일, 반응형 효과, 어두운 테마 지원 및 자리 표시자 이미지가 있는 OAuth 버튼을 특징으로 하는 웹 구성 요소입니다.

열다 미리 보기

                <div class="flex flex-col items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
  <h1 class="text-3xl font-bold text-gray-900 dark:text-white mb-6">Sign in with</h1>
  <div class="flex space-x-4">
    <a href="#" class="bg-blue-500 text-white font-semibold py-2 px-4 rounded-lg shadow-lg transform transition-all duration-300 hover:scale-105 hover:shadow-xl dark:bg-blue-700 dark:text-gray-200 flex items-center">
      <img src="https://picsum.photos/20/20" alt="Google Avatar" class="rounded-full mr-2">
      Google
    </a>
    <a href="#" class="bg-gray-800 text-white font-semibold py-2 px-4 rounded-lg shadow-lg transform transition-all duration-300 hover:scale-105 hover:shadow-xl dark:bg-gray-900 dark:text-gray-200 flex items-center">
      <img src="https://picsum.photos/20/20" alt="Facebook Avatar" class="rounded-full mr-2">
      Facebook
    </a>
    <a href="#" class="bg-red-600 text-white font-semibold py-2 px-4 rounded-lg shadow-lg transform transition-all duration-300 hover:scale-105 hover:shadow-xl dark:bg-red-700 dark:text-gray-200 flex items-center">
      <img src="https://picsum.photos/20/20" alt="Twitter Avatar" class="rounded-full mr-2">
      Twitter
    </a>
  </div>
</div>

Interactive Components 구성 요소

Neumorphism 스타일의 대화형 구성 요소는 반응형 효과와 어두운 테마 지원을 특징으로 합니다.

열다 미리 보기

                <div class="flex flex-col 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-neumorph p-6 w-80 text-center">
        <img src="https://picsum.photos/200/100" alt="Random Placeholder" class="w-full rounded-md mb-4">
        <div class="mb-2">
            <img src="https://randomuser.me/api/portraits/men/75.jpg" alt="User Avatar" class="w-16 h-16 rounded-full mx-auto shadow-md">
        </div>
        <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200">John Doe</h2>
        <p class="text-gray-600 dark:text-gray-400">Web Developer</p>
        <button class="mt-4 bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-gray-200 font-medium py-2 px-4 rounded-lg shadow-neumorph transform transition-all hover:scale-105 hover:shadow-lg">Follow</button>
    </div>
</div>

<style>
    .shadow-neumorph {
        box-shadow:  8px 8px 15px rgba(0, 0, 0, 0.1), 
                    -8px -8px 15px rgba(255, 255, 255, 0.7);
    }
</style>

360° 뷰어 구성 요소

Tailwind CSS로 제작된 미니멀한 360° 뷰어 구성 요소로, 반응형 효과와 어두운 테마 지원을 제공합니다.

열다 미리 보기

                <div class="flex flex-col items-center justify-center min-h-screen bg-white dark:bg-gray-800 transition-all duration-300">
    <div class="relative w-full max-w-lg h-72 overflow-hidden rounded-lg shadow-lg">
        <img src="https://picsum.photos/800/600?random=1" alt="360° View" class="object-cover w-full h-full transition-transform duration-500 hover:scale-105">
    </div>
    <div class="mt-4 text-center">
        <h2 class="text-2xl font-semibold text-gray-800 dark:text-white">360° Viewer Component</h2>
        <p class="mt-2 text-gray-600 dark:text-gray-400">Experience immersive views with our 360° viewer.</p>
    </div>
    <div class="mt-4 flex space-x-2">
        <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-12 h-12 rounded-full border-2 border-gray-200 dark:border-gray-700">
        <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar" class="w-12 h-12 rounded-full border-2 border-gray-200 dark:border-gray-700">
        <img src="https://randomuser.me/api/portraits/men/2.jpg" alt="User Avatar" class="w-12 h-12 rounded-full border-2 border-gray-200 dark:border-gray-700">
    </div>
</div>

360° 뷰어 구성 요소

다크 모드를 지원하는 Tailwind CSS를 사용하는 미니멀하고 반응이 빠른 360° 뷰어 구성 요소입니다.

열다 미리 보기

                <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden p-4">
    <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200 mb-4">360° Viewer</h2>
    <div class="flex justify-center mb-4">
        <img src="https://picsum.photos/700/400?random=1" alt="360° View" class="rounded-lg transition-transform duration-500 ease-in-out hover:scale-105">
    </div>
    <p class="text-gray-600 dark:text-gray-400 mb-2">Experience the object in 360° view. Hover to zoom in.</p>
    <a href="#" class="text-blue-500 dark:text-blue-400 hover:underline">Learn more about this view</a>
</div>

1 ... 233 234 235 236 237 ... 242

카테고리

모든 구성 요소