모든 구성 요소

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

Social Share Buttons 구성 요소

Glassmorphism 스타일과 생생한 색상의 반응형 소셜 공유 버튼은 블로그 및 콘텐츠 소비를 위해 설계되었습니다.

                <div class="flex flex-col items-center p-5 bg-white bg-opacity-30 rounded-lg shadow-lg backdrop-blur-lg dark:bg-gray-800 dark:bg-opacity-40">
    <h2 class="text-lg font-semibold text-gray-800 dark:text-white mb-4">Share this Post</h2>
    <div class="flex space-x-4">
        <a href="#" class="flex items-center justify-center p-3 bg-red-500 rounded-full shadow-lg transform hover:scale-105 transition-transform duration-200"
           aria-label="Share on Facebook">
            <img src="https://picsum.photos/30/30" class="h-8 w-8 rounded-full" alt="Facebook">
            <span class="text-white ml-2">Facebook</span>
        </a>
        <a href="#" class="flex items-center justify-center p-3 bg-blue-500 rounded-full shadow-lg transform hover:scale-105 transition-transform duration-200"
           aria-label="Share on Twitter">
            <img src="https://picsum.photos/30/30" class="h-8 w-8 rounded-full" alt="Twitter">
            <span class="text-white ml-2">Twitter</span>
        </a>
        <a href="#" class="flex items-center justify-center p-3 bg-purple-500 rounded-full shadow-lg transform hover:scale-105 transition-transform duration-200"
           aria-label="Share on LinkedIn">
            <img src="https://picsum.photos/30/30" class="h-8 w-8 rounded-full" alt="LinkedIn">
            <span class="text-white ml-2">LinkedIn</span>
        </a>
    </div>
</div>

미니멀리스트 블로그 레이아웃 구성 요소

Minimalist Blog Layout Component with Monochromatic Color Scheme은 콘텐츠 소비를 위한 반응형 및 어두운 테마 지원을 제공합니다.

열다 미리 보기

                <div class="container mx-auto px-4 py-8 dark:bg-gray-900 dark:text-gray-200">
  <header class="text-center mb-12">
    <h1 class="text-4xl font-bold text-gray-800 dark:text-white">Blog Title</h1>
    <p class="text-gray-600 dark:text-gray-400">A space for thoughts and stories</p>
  </header>

  <main class="grid grid-cols-1 md:grid-cols-3 gap-8">
    <div class="md:col-span-2">
      <article class="bg-white p-6 rounded-lg shadow-md mb-8 dark:bg-gray-800">
        <img src="https://picsum.photos/seed/article1/800/400" alt="Article Image" class="rounded-md mb-4">
        <h2 class="text-2xl font-semibold text-gray-800 mb-2 dark:text-white">First Article Title</h2>
        <p class="text-gray-700 leading-relaxed dark:text-gray-300">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
        <button class="mt-4 text-blue-500 hover:underline dark:text-blue-400">Read More</button>
      </article>

      <article class="bg-white p-6 rounded-lg shadow-md mb-8 dark:bg-gray-800">
        <img src="https://picsum.photos/seed/article2/800/400" alt="Article Image" class="rounded-md mb-4">
        <h2 class="text-2xl font-semibold text-gray-800 mb-2 dark:text-white">Second Article Title</h2>
        <p class="text-gray-700 leading-relaxed dark:text-gray-300">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        <button class="mt-4 text-blue-500 hover:underline dark:text-blue-400">Read More</button>
      </article>
    </div>

    <div>
      <section class="bg-white p-6 rounded-lg shadow-md mb-8 dark:bg-gray-800">
        <h3 class="text-xl font-semibold text-gray-800 mb-4 dark:text-white">Recent Posts</h3>
        <ul>
          <li class="mb-2"><a href="#" class="text-gray-700 hover:text-gray-900 dark:text-gray-300 dark:hover:text-gray-100">Recent Post 1</a></li>
          <li class="mb-2"><a href="#" class="text-gray-700 hover:text-gray-900 dark:text-gray-300 dark:hover:text-gray-100">Recent Post 2</a></li>
          <li class="mb-2"><a href="#" class="text-gray-700 hover:text-gray-900 dark:text-gray-300 dark:hover:text-gray-100">Recent Post 3</a></li>
        </ul>
      </section>

      <section class="bg-white p-6 rounded-lg shadow-md dark:bg-gray-800">
        <h3 class="text-xl font-semibold text-gray-800 mb-4 dark:text-white">About Me</h3>
        <div class="flex items-center mb-4">
          <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar" class="rounded-full w-12 h-12 mr-4">
          <p class="text-gray-700 dark:text-gray-300">A short bio about the author of this blog.</p>
        </div>
      </section>
    </div>
  </main>

  <footer class="text-center mt-12 text-gray-600 dark:text-gray-400">
    <p>&copy; 2023 Blog Title. All rights reserved.</p>
  </footer>
</div>

Buttons 구성 요소

파스텔 색조의 구성표가 있는 머티리얼 디자인 스타일로 디자인된 버튼 구성 요소로, 비즈니스/기업 웹사이트에 반응하며 어두운 테마를 지원합니다.

열다 미리 보기

                <div class="flex flex-col space-y-4 p-4 max-w-md mx-auto">
    <!-- Primary Button -->
    <button class="bg-blue-400 hover:bg-blue-500 text-white font-semibold py-2 px-4 rounded shadow-md transition-transform transform hover:scale-105 dark:bg-blue-600 dark:hover:bg-blue-700">
        Primary Button
    </button>
    
    <!-- Secondary Button -->
    <button class="bg-green-400 hover:bg-green-500 text-white font-semibold py-2 px-4 rounded shadow-md transition-transform transform hover:scale-105 dark:bg-green-600 dark:hover:bg-green-700">
        Secondary Button
    </button>
    
    <!-- Disabled Button -->
    <button class="bg-gray-300 text-gray-500 font-semibold py-2 px-4 rounded shadow-md cursor-not-allowed transition-opacity opacity-70 dark:bg-gray-700 dark:text-gray-400">
        Disabled Button
    </button>
    
    <!-- Outline Button -->
    <button class="border-2 border-blue-400 text-blue-400 font-semibold py-2 px-4 rounded hover:bg-blue-400 hover:text-white transition-colors dark:border-blue-600 dark:text-blue-600 dark:hover:bg-blue-600 dark:hover:text-white">
        Outline Button
    </button>
    
    <!-- Icon Button -->
    <button class="flex items-center bg-yellow-400 hover:bg-yellow-500 text-white font-semibold py-2 px-4 rounded shadow-md transition-transform transform hover:scale-105 dark:bg-yellow-600 dark:hover:bg-yellow-700">
        <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Icon" class="w-5 h-5 mr-2 rounded-full">
        Icon Button
    </button>
</div>

Two-Factor Authentication 구성 요소

소셜 미디어용으로 설계된 간단하고 반응이 빠른 이중 인증 구성 요소는 3D 디자인 스타일과 회색조 색 구성표와 인터페이스합니다.

열다 미리 보기

                <div class="flex items-center justify-center min-h-screen bg-gray-900 dark:bg-gray-800">
    <div class="bg-white dark:bg-gray-700 rounded-lg shadow-lg p-8 w-96">
        <h2 class="text-2xl font-bold text-gray-800 dark:text-gray-200 text-center mb-6">Two-Factor Authentication</h2>
        <div class="mb-4">
            <label class="block text-gray-700 dark:text-gray-300 mb-2" for="email">Email Address</label>
            <input type="email" id="email" class="w-full p-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring focus:ring-gray-400 dark:focus:ring-gray-600" placeholder="Enter your email" required />
        </div>
        <div class="mb-4">
            <label class="block text-gray-700 dark:text-gray-300 mb-2" for="code">Authentication Code</label>
            <input type="text" id="code" class="w-full p-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring focus:ring-gray-400 dark:focus:ring-gray-600" placeholder="Enter your code" required />
        </div>
        <div class="flex items-center justify-between mb-4">
            <div class="flex items-center">
                <img class="w-10 h-10 rounded-full border-2 border-gray-300 dark:border-gray-600" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" />
                <span class="ml-2 text-gray-800 dark:text-gray-200">User Name</span>
            </div>
        </div>
        <button class="w-full bg-gray-800 dark:bg-gray-100 text-white dark:text-gray-800 font-semibold py-2 rounded-md shadow-md focus:outline-none hover:bg-gray-700 dark:hover:bg-gray-600">Verify</button>
    </div>
</div>

Skeuomorphic Tooltip 컴포넌트

스큐어모피즘과 생생한 색상으로 디자인된 반응형 툴팁 구성 요소로, 블로그 및 콘텐츠 소비에 적합합니다. 여기에는 Tailwind CSS를 사용하는 어두운 테마 지원이 포함됩니다.

열다 미리 보기

                <div class="relative inline-block">
    <button class="bg-blue-500 text-white font-bold py-2 px-4 rounded shadow-lg hover:bg-blue-600 dark:bg-blue-700 dark:hover:bg-blue-800">
        Hover me
    </button>
    <div class="absolute left-1/2 transform -translate-x-1/2 mt-2 w-48 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-700 rounded-lg shadow-xl opacity-0 transition-opacity duration-300 tooltip">
        <div class="flex items-center p-2">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-2">
            <span class="text-sm font-semibold text-gray-800 dark:text-gray-300">John Doe</span>
        </div>
        <div class="p-2">
            <p class="text-xs text-gray-600 dark:text-gray-400">
                This is a tooltip message. It provides additional information about the button.
            </p>
        </div>
    </div>
</div>

<style>
    /* Tooltip visibility on hover */
    .relative:hover .tooltip {
        opacity: 1;
    }

    /* Skeuomorphic style - shadow and border */
    .tooltip {
        box-shadow: 4px 4px 6px rgba(0, 0, 0, 0.2);
        border-radius: 0.5rem;
    }
</style>

Authentication Components 구성 요소

소셜 미디어 인증을 위해 Brutalism으로 스타일링된 웹 구성 요소는 파스텔 색 구성표와 어두운 모드의 고대비와 인터페이스합니다.

열다 미리 보기

                <div class="min-h-screen bg-white dark:bg-gray-900 flex items-center justify-center p-4">
    <div class="max-w-md w-full bg-gray-100 dark:bg-gray-800 rounded-lg shadow-md p-8 space-y-8">
        <h2 class="text-3xl font-bold text-gray-800 dark:text-gray-100 text-center">Log In</h2>
        <form class="space-y-4">
            <div>
                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300">Email</label>
                <input type="email" name="email" required placeholder="[email protected]" class="mt-1 block w-full border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:ring focus:ring-blue-300 dark:focus:ring-blue-600 dark:focus:border-blue-600 p-2">
            </div>
            <div>
                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300">Password</label>
                <input type="password" name="password" required placeholder="••••••••" class="mt-1 block w-full border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:ring focus:ring-blue-300 dark:focus:ring-blue-600 dark:focus:border-blue-600 p-2">
            </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-blue-600 focus:ring-blue-500 border-gray-300 dark:border-gray-600 rounded">
                    <label for="remember-me" class="ml-2 block text-sm text-gray-800 dark:text-gray-100">Remember me</label>
                </div>
                <div class="text-sm">
                    <a href="#" class="font-medium text-blue-600 hover:text-blue-500 dark:text-blue-400 dark:hover:text-blue-300">Forgot your password?</a>
                </div>
            </div>
            <button type="submit" class="w-full py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:bg-blue-500 dark:hover:bg-blue-400 dark:focus:ring-blue-400">Log In</button>
        </form>
        <div class="text-center">
            <p class="text-sm text-gray-600 dark:text-gray-300">Don't have an account? <a href="#" class="font-medium text-blue-600 hover:text-blue-500 dark:text-blue-400 dark:hover:text-blue-300">Sign Up</a></p>
        </div>
        <div class="flex justify-between items-center">
            <div class="h-1 w-1 rounded-full bg-gray-300 dark:bg-gray-600"></div>
            <span class="text-gray-600 dark:text-gray-300">or</span>
            <div class="h-1 w-1 rounded-full bg-gray-300 dark:bg-gray-600"></div>
        </div>
        <div class="flex justify-center space-x-4">
            <a href="#" class="w-8 h-8 rounded-full bg-gray-200 dark:bg-gray-700 flex items-center justify-center shadow-md">
                <img src="https://picsum.photos/30/30?random=1" alt="Example Image" class="rounded-full" />
            </a>
            <a href="#" class="w-8 h-8 rounded-full bg-gray-200 dark:bg-gray-700 flex items-center justify-center shadow-md">
                <img src="https://picsum.photos/30/30?random=2" alt="Example Image" class="rounded-full" />
            </a>
            <a href="#" class="w-8 h-8 rounded-full bg-gray-200 dark:bg-gray-700 flex items-center justify-center shadow-md">
                <img src="https://picsum.photos/30/30?random=3" alt="Example Image" class="rounded-full" />
            </a>
        </div>
    </div>
</div>

Two-Factor Authentication 구성 요소

마이크로 인터랙션과 파스텔 색상 구성표로 설계된 Two-Factor Authentication Component로, 포트폴리오에서 작업이나 제품을 전시하는 데 적합합니다. 이 구성 요소에는 여러 대화형 요소와 어두운 테마를 지원하는 반응형 디자인이 포함되어 있습니다.

열다 미리 보기

                <div class="flex flex-col items-center justify-center min-h-screen bg-white dark:bg-gray-900">
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6 md:w-1/3 w-full transition-all ease-in-out duration-300">
        <h2 class="text-2xl font-semibold text-center text-pink-600 dark:text-pink-400 mb-4">Two-Factor Authentication</h2>
        <p class="text-center text-gray-600 dark:text-gray-300 mb-6">Please enter the verification code sent to your email.</p>
        <form>
            <div class="mb-4">
                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300" for="email">Email</label>
                <input type="email" id="email" class="mt-1 block w-full p-2 border border-gray-300 rounded-md focus:border-pink-500 focus:ring focus:ring-pink-200 dark:bg-gray-700 dark:border-gray-600 dark:text-white" placeholder="Enter your email" required />
            </div>
            <div class="mb-4">
                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300" for="code">Verification Code</label>
                <input type="text" id="code" class="mt-1 block w-full p-2 border border-gray-300 rounded-md focus:border-pink-500 focus:ring focus:ring-pink-200 dark:bg-gray-700 dark:border-gray-600 dark:text-white" placeholder="Enter verification code" required />
            </div>
            <button type="submit" class="w-full bg-pink-600 text-white font-semibold rounded-md py-2 hover:bg-pink-700 dark:bg-pink-500 dark:hover:bg-pink-400 transition-all ease-in-out duration-300">Verify</button>
        </form>
        <div class="mt-4 flex items-center justify-between">
            <a href="#" class="text-pink-600 dark:text-pink-400 hover:underline">Resend Code</a>
            <a href="#" class="text-pink-600 dark:text-pink-400 hover:underline">Need Help?</a>
        </div>
    </div>
    <div class="mt-6 flex justify-center space-x-4">
        <img src="https://picsum.photos/50" alt="User Avatar" class="rounded-full border border-gray-300 dark:border-gray-600">
        <img src="https://picsum.photos/50" alt="User Avatar" class="rounded-full border border-gray-300 dark:border-gray-600">
    </div>
</div>

컨테이너 구성 요소

다크 모드를 지원하는 Tailwind CSS를 사용하는 대시보드용 미니멀리스트 컨테이너 구성 요소입니다.

열다 미리 보기

                <div class="bg-gray-100 dark:bg-gray-800 p-6 rounded-lg shadow-md">
    <h2 class="text-xl font-semibold text-gray-800 dark:text-white mb-4">Dashboard</h2>
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        <div class="bg-white dark:bg-gray-700 p-4 rounded-lg shadow">
            <h3 class="text-lg font-medium text-gray-800 dark:text-white mb-2">Data Card 1</h3>
            <img src="https://picsum.photos/200/100" alt="Data visualization image" class="w-full h-auto rounded-lg mb-2">
            <p class="text-gray-600 dark:text-gray-300">Some description of the data card.</p>
        </div>
        <div class="bg-white dark:bg-gray-700 p-4 rounded-lg shadow">
            <h3 class="text-lg font-medium text-gray-800 dark:text-white mb-2">Data Card 2</h3>
            <img src="https://picsum.photos/200/100" alt="Data visualization image" class="w-full h-auto rounded-lg mb-2">
            <p class="text-gray-600 dark:text-gray-300">Some description of the data card.</p>
        </div>
        <div class="bg-white dark:bg-gray-700 p-4 rounded-lg shadow">
            <h3 class="text-lg font-medium text-gray-800 dark:text-white mb-2">Data Card 3</h3>
            <img src="https://picsum.photos/200/100" alt="Data visualization image" class="w-full h-auto rounded-lg mb-2">
            <p class="text-gray-600 dark:text-gray-300">Some description of the data card.</p>
        </div>
    </div>
    <div class="mt-6 flex items-center justify-between">
        <div class="flex items-center">
            <img src="https://randomuser.me/api/portraits/thumb/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-2">
            <span class="text-gray-800 dark:text-white font-medium">User Name</span>
        </div>
        <button class="bg-gray-800 dark:bg-gray-200 text-white dark:text-gray-800 font-semibold py-2 px-4 rounded hover:bg-gray-700 dark:hover:bg-gray-300">Action</button>
    </div>
</div>

Two-Factor Authentication 구성 요소

Tailwind CSS를 사용하여 보색, 복잡한 UI, 반응형 디자인 및 다크 모드 지원을 제공하는 소셜 미디어를 위한 스큐어모픽 2단계 인증 구성 요소입니다.

열다 미리 보기

                <div class="min-h-screen bg-gray-200 dark:bg-gray-900 flex flex-col justify-center sm:py-12">
  <div class="relative py-3 sm:max-w-xl sm:mx-auto">
    <div class="absolute inset-0 bg-gradient-to-r from-teal-400 to-blue-500 shadow-lg transform -skew-y-6 sm:skew-y-0 sm:rotate-6 sm:rounded-3xl"></div>
    <div class="relative px-4 py-10 bg-white dark:bg-gray-800 shadow-lg sm:rounded-3xl sm:p-20">
      <div class="max-w-md mx-auto">
        <div>
          <h1 class="text-2xl font-semibold text-gray-900 dark:text-white text-center">Two-Factor Authentication</h1>
        </div>
        <div class="divide-y divide-gray-200 dark:divide-gray-700">
          <div class="py-8 text-base leading-6 space-y-4 text-gray-700 dark:text-gray-300 sm:text-lg sm:leading-7">
            <p>Please enter the 6-digit code sent to your registered email or phone number.</p>
            <div class="relative">
              <input autocomplete="off" id="code" name="code" type="text" class="peer placeholder-transparent h-10 w-full border-b-2 border-gray-300 dark:border-gray-600 text-gray-900 dark:text-white focus:outline-none focus:borer-rose-600" placeholder="Enter code" />
              <label for="code" class="absolute left-0 -top-3.5 text-gray-600 dark:text-gray-400 text-sm peer-placeholder-shown:text-base peer-placeholder-shown:text-gray-400 peer-placeholder-shown:top-2 transition-all peer-focus:-top-3.5 peer-focus:text-gray-600 dark:peer-focus:text-gray-400 peer-focus:text-sm">Authentication Code</label>
            </div>
            <p class="text-sm text-gray-500 dark:text-gray-400">Haven't received the code? <a href="#" class="text-teal-500 dark:text-teal-400 hover:text-teal-600 dark:hover:text-teal-500">Resend Code</a></p>
          </div>
          <div class="pt-4 flex items-center space-x-4">
            <button class="bg-blue-500 dark:bg-blue-600 text-white rounded-md px-2 py-1 text-sm hover:bg-blue-600 dark:hover:bg-blue-700 focus:outline-none focus:ring focus:ring-blue-200 dark:focus:ring-blue-800">Verify Code</button>
            <button class="flex-1 text-center text-gray-600 dark:text-gray-400 text-sm hover:text-gray-800 dark:hover:text-gray-200">Cancel</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Tooltip 구성 요소

블로그 콘텐츠 소비를 위해 설계된 간단한 반응형 툴팁 구성 요소로, 회색조 색 구성표가 있는 3D 디자인과 Tailwind CSS를 사용한 다크 모드 지원이 특징입니다.

열다 미리 보기

                <div class="relative group">
    <!-- Tooltip Trigger -->
    <button class="bg-gray-800 text-white p-2 rounded">Hover me!</button>
    
    <!-- Tooltip -->
    <div class="absolute bottom-full left-1/2 transform -translate-x-1/2 mb-2 w-48 bg-white text-black text-sm rounded shadow-lg transition-opacity duration-300 opacity-0 group-hover:opacity-100 dark:bg-gray-700 dark:text-white">
        <div class="p-2">
            <p>This is a tooltip with 3D styling!</p>
        </div>
        <div class="absolute left-1/2 top-full transform -translate-x-1/2 w-0 h-0 border-x-8 border-x-transparent border-t-8 border-t-white dark:border-t-gray-700"></div>
    </div>
</div>

1 ... 111 112 113 114 115 ... 262

카테고리

모든 구성 요소