검색 구성 요소

모든 구성 요소

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

데이터 시각화 구성 요소

레트로/빈티지 스타일의 데이터 시각화 구성 요소로, 어두운 테마를 지원하고 Tailwind CSS를 사용하여 반응형 효과를 제공합니다.

                <div class="bg-gray-200 dark:bg-gray-800 p-6 rounded-lg shadow-lg">
    <h2 class="text-2xl font-bold text-gray-800 dark:text-gray-200 mb-4">Data Visualization</h2>
    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
        <div class="bg-white dark:bg-gray-700 rounded-lg p-4 shadow">
            <img src="https://picsum.photos/400/200?random=1" alt="Data Chart 1" class="rounded-lg mb-2"> 
            <h3 class="text-xl font-semibold text-gray-700 dark:text-gray-300">Chart Title 1</h3>
            <p class="text-gray-600 dark:text-gray-400">Description of chart 1 showing insightful data.</p>
        </div>
        <div class="bg-white dark:bg-gray-700 rounded-lg p-4 shadow">
            <img src="https://picsum.photos/400/200?random=2" alt="Data Chart 2" class="rounded-lg mb-2">
            <h3 class="text-xl font-semibold text-gray-700 dark:text-gray-300">Chart Title 2</h3>
            <p class="text-gray-600 dark:text-gray-400">Description of chart 2 providing valuable insights.</p>
        </div>
    </div>

    <div class="bg-white dark:bg-gray-700 rounded-lg p-4 shadow mt-6">
        <h3 class="text-xl font-semibold text-gray-700 dark:text-gray-300">User Profiles</h3>
        <div class="flex mt-4">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar 1" class="w-16 h-16 rounded-full mr-4">
            <div>
                <p class="text-gray-700 dark:text-gray-300 font-bold">John Doe</p>
                <p class="text-gray-600 dark:text-gray-400">Data Scientist</p>
            </div>
        </div>
        <div class="flex mt-4">
            <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="Avatar 2" class="w-16 h-16 rounded-full mr-4">
            <div>
                <p class="text-gray-700 dark:text-gray-300 font-bold">Jane Smith</p>
                <p class="text-gray-600 dark:text-gray-400">Data Analyst</p>
            </div>
        </div>
    </div>
</div>

사이트 맵 구성 요소

미니멀리스트/플랫 디자인, 반응형 효과 및 어두운 테마를 지원하는 사이트 맵 구성 요소.

열다 미리 보기

                <footer class='bg-white dark:bg-gray-900'>
    <div class='mx-auto max-w-screen-xl px-4 py-8 sm:px-6 lg:px-8'>
        <div class='grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-4'>
            <div>
                <h2 class='text-lg font-bold text-gray-900 dark:text-white'>Company</h2>
                <nav class='mt-4 flex flex-col space-y-2 text-sm text-gray-600 dark:text-gray-300'>
                    <a href='#' class='hover:opacity-75'>About Us</a>
                    <a href='#' class='hover:opacity-75'>Careers</a>
                    <a href='#' class='hover:opacity-75'>Contact Us</a>
                </nav>
            </div>
            <div>
                <h2 class='text-lg font-bold text-gray-900 dark:text-white'>Services</h2>
                <nav class='mt-4 flex flex-col space-y-2 text-sm text-gray-600 dark:text-gray-300'>
                    <a href='#' class='hover:opacity-75'>Web Development</a>
                    <a href='#' class='hover:opacity-75'>Mobile Development</a>
                    <a href='#' class='hover:opacity-75'>SEO Optimization</a>
                </nav>
            </div>
            <div>
                <h2 class='text-lg font-bold text-gray-900 dark:text-white'>Legal</h2>
                <nav class='mt-4 flex flex-col space-y-2 text-sm text-gray-600 dark:text-gray-300'>
                    <a href='#' class='hover:opacity-75'>Privacy Policy</a>
                    <a href='#' class='hover:opacity-75'>Terms of Service</a>
                    <a href='#' class='hover:opacity-75'>Cookie Policy</a>
                </nav>
            </div>
            <div>
                <h2 class='text-lg font-bold text-gray-900 dark:text-white'>Follow Us</h2>
                <nav class='mt-4 flex flex-col space-y-2 text-sm text-gray-600 dark:text-gray-300'>
                    <a href='#' class='hover:opacity-75'>Facebook</a>
                    <a href='#' class='hover:opacity-75'>Twitter</a>
                    <a href='#' class='hover:opacity-75'>Instagram</a>
                </nav>
            </div>
        </div>
        <div class='mt-8 border-t border-gray-100 dark:border-gray-800 pt-8 sm:flex sm:items-center sm:justify-between'>
            <p class='text-xs/relaxed text-gray-500 dark:text-gray-400'>
                © 2024 Your Company. All rights reserved.
            </p>
        </div>
    </div>
</footer>

레트로/빈티지 타임라인 컴포넌트

레트로/빈티지 디자인과 다크 모드를 지원하는 반응형 타임라인 구성 요소입니다.

열다 미리 보기

                <div class="container mx-auto px-4 py-8">
  <div class="flex flex-col md:flex-row">
    <div class="mr-10 w-full md:w-1/2">
      <div class="mb-8 flex items-center justify-between">
        <div class="flex items-center">
          <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="mr-4 h-12 w-12 rounded-full border-4 border-purple-500 object-cover">
          <div class="text-lg font-bold text-gray-800 dark:text-white">Event 1</div>
        </div>
        <div class="text-sm text-gray-600 dark:text-gray-300">1985</div>
      </div>
      <div class="mb-8 rounded-lg bg-white p-6 shadow-lg dark:bg-gray-700">
        <p class="text-gray-700 dark:text-gray-300">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
      </div>
    </div>
    <div class="w-full md:w-1/2">
      <div class="mb-8 flex items-center justify-between">
        <div class="flex items-center">
          <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="Avatar" class="mr-4 h-12 w-12 rounded-full border-4 border-pink-500 object-cover">
          <div class="text-lg font-bold text-gray-800 dark:text-white">Event 2</div>
        </div>
        <div class="text-sm text-gray-600 dark:text-gray-300">1990</div>
      </div>
      <div class="mb-8 rounded-lg bg-white p-6 shadow-lg dark:bg-gray-700">
        <p class="text-gray-700 dark:text-gray-300">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
      </div>
    </div>
  </div>
  <div class="flex flex-col md:flex-row">
    <div class="mr-10 w-full md:w-1/2">
      <div class="mb-8 flex items-center justify-between">
        <div class="flex items-center">
          <img src="https://randomuser.me/api/portraits/men/2.jpg" alt="Avatar" class="mr-4 h-12 w-12 rounded-full border-4 border-green-500 object-cover">
          <div class="text-lg font-bold text-gray-800 dark:text-white">Event 3</div>
        </div>
        <div class="text-sm text-gray-600 dark:text-gray-300">1995</div>
      </div>
      <div class="mb-8 rounded-lg bg-white p-6 shadow-lg dark:bg-gray-700">
        <p class="text-gray-700 dark:text-gray-300">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
      </div>
    </div>
    <div class="w-full md:w-1/2">
      <div class="mb-8 flex items-center justify-between">
        <div class="flex items-center">
          <img src="https://randomuser.me/api/portraits/women/2.jpg" alt="Avatar" class="mr-4 h-12 w-12 rounded-full border-4 border-yellow-500 object-cover">
          <div class="text-lg font-bold text-gray-800 dark:text-white">Event 4</div>
        </div>
        <div class="text-sm text-gray-600 dark:text-gray-300">2000</div>
      </div>
      <div class="mb-8 rounded-lg bg-white p-6 shadow-lg dark:bg-gray-700">
        <p class="text-gray-700 dark:text-gray-300">Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      </div>
    </div>
  </div>
</div>

제품 리뷰 구성 요소

Tailwind CSS를 사용하여 3D 디자인 요소, 반응형 효과 및 어두운 테마를 지원하는 제품 리뷰 구성 요소입니다.

열다 미리 보기

                <div class="antialiased w-full">
  <div class="container px-4 mx-auto">
    <div class="flex flex-wrap items-center -mx-4">
      <div class="w-full lg:w-2/3 mx-auto">
        <div class="max-w-2xl mx-auto">
          <div class="mb-6 md:mb-8">
            <span class="text-lg text-blue-500 font-bold">Reviews</span>
            <h2 class="text-3xl md:text-4xl mt-2 font-bold font-heading">Customer Reviews</h2>
          </div>
          <div class="mb-6">
            <div class="flex items-center justify-between mb-4">
              <div class="flex items-center">
                <img class="h-12 w-12 rounded-full object-cover" src="https://randomuser.me/api/portraits/women/33.jpg" alt="user avatar">
                <div class="ml-4">
                  <p class="text-lg font-semibold">Alice Williams</p>
                  <p class="text-sm text-gray-500">January 20, 2024</p>
                </div>
              </div>
              <div class="flex items-center">
                <span class="text-yellow-500 text-xl mr-1">&#9733;</span>
                <span class="text-yellow-500 text-xl mr-1">&#9733;</span>
                <span class="text-yellow-500 text-xl mr-1">&#9733;</span>
                <span class="text-yellow-500 text-xl mr-1">&#9733;</span>
                <span class="text-gray-300 text-xl">&#9733;</span>
              </div>
            </div>
            <div class="p-6 bg-gray-100 rounded-lg shadow-md dark:bg-gray-700">
              <p class="leading-loose text-gray-500 dark:text-gray-300">"Absolutely love this product! The quality is top-notch, and it exceeded my expectations. Highly recommend it to everyone."</p>
            </div>
          </div>
          <div class="mb-6">
            <div class="flex items-center justify-between mb-4">
              <div class="flex items-center">
                <img class="h-12 w-12 rounded-full object-cover" src="https://randomuser.me/api/portraits/men/76.jpg" alt="user avatar">
                <div class="ml-4">
                  <p class="text-lg font-semibold">Robert Johnson</p>
                  <p class="text-sm text-gray-500">January 18, 2024</p>
                </div>
              </div>
              <div class="flex items-center">
                <span class="text-yellow-500 text-xl mr-1">&#9733;</span>
                <span class="text-yellow-500 text-xl mr-1">&#9733;</span>
                <span class="text-yellow-500 text-xl mr-1">&#9733;</span>
                <span class="text-yellow-500 text-xl mr-1">&#9733;</span>
                <span class="text-yellow-500 text-xl">&#9733;</span>
              </div>
            </div>
            <div class="p-6 bg-gray-100 rounded-lg shadow-md dark:bg-gray-700">
              <p class="leading-loose text-gray-500 dark:text-gray-300">"This is by far the best purchase I

Follow Button 구성 요소

Tailwind CSS를 사용하여 다크 모드를 지원하는 머티리얼 디자인 스타일로 설계된 반응형 Follow Button 컴포넌트입니다.

열다 미리 보기

                <div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-800">
    <div class="flex flex-col items-center p-6 bg-white dark:bg-gray-900 rounded-lg shadow-lg space-y-4">
        <img src="https://picsum.photos/100" alt="User Avatar" class="w-24 h-24 rounded-full border-2 border-indigo-500 shadow-md">
        <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200">John Doe</h2>
        <p class="text-gray-600 dark:text-gray-400">Software Developer</p>
        <button class="flex items-center justify-center w-full px-4 py-2 font-semibold text-white bg-blue-600 rounded-lg shadow-md hover:bg-blue-700 focus:outline-none focus:ring focus:ring-blue-300 dark:bg-blue-500 dark:hover:bg-blue-600">
            <span>Follow</span>
        </button>
    </div>
</div>

User Mentions 구성 요소

Glassmorphism 디자인, 응답성 및 어두운 테마를 지원하는 Tailwind CSS를 사용하는 User Mentions 구성 요소.

열다 미리 보기

                <div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900 p-4">
  <div class="w-full max-w-sm bg-white bg-opacity-30 dark:bg-gray-700 dark:bg-opacity-30 rounded-lg shadow-lg backdrop-filter backdrop-blur-lg p-6">
    <h3 class="text-xl font-semibold mb-4 text-gray-800 dark:text-white">Mentions</h2>
    <div class="space-y-4">
      <div class="flex items-center space-x-4">
        <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar">
        <div class="flex-1">
          <p class="text-sm font-medium text-gray-900 dark:text-white">John Doe</p>
          <p class="text-sm text-gray-700 dark:text-gray-300">Mentioned you in a comment.</p>
        </div>
      </div>
      <div class="flex items-center space-x-4">
        <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/women/2.jpg" alt="User Avatar">
        <div class="flex-1">
          <p class="text-sm font-medium text-gray-900 dark:text-white">Jane Smith</p>
          <p class="text-sm text-gray-700 dark:text-gray-300">Mentioned you in a post.</p>
        </div>
      </div>
      <div class="flex items-center space-x-4">
        <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/3.jpg" alt="User Avatar">
        <div class="flex-1">
          <p class="text-sm font-medium text-gray-900 dark:text-white">Peter Jones</p>
          <p class="text-sm text-gray-700 dark:text-gray-300">Mentioned you in a message.</p>
        </div>
      </div>
    </div>
  </div>
</div>

브루탈리즘 끈적끈적한 내비게이션

Tailwind CSS를 사용하여 반응형 동작과 다크 모드를 지원하는 브루탈리스트 스타일의 고정 탐색 구성 요소입니다. 높은 대비, 대담한 타이포그래피, 그리고 뚜렷하고 생생한 미학이 특징입니다.

열다 미리 보기

                <header class="bg-yellow-400 text-black sticky top-0 z-50 border-b-4 border-black dark:bg-purple-800 dark:text-white dark:border-white">
  <nav class="container mx-auto px-6 py-4 flex justify-between items-center">
    <div class="text-2xl font-bold uppercase tracking-tighter">Brutal Nav</div>
    <div class="hidden md:flex space-x-6">
      <a href="#" class="text-black hover:underline dark:text-white">Home</a>
      <a href="#" class="text-black hover:underline dark:text-white">About</a>
      <a href="#" class="text-black hover:underline dark:text-white">Services</a>
      <a href="#" class="text-black hover:underline dark:text-white">Contact</a>
    </div>
    <button class="md:hidden text-black dark:text-white 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-4 6h4"></path></svg>
    </button>
  </nav>
</header>

소셜 로그인 구성 요소

다크 모드 UI 및 반응형 효과가 있는 소셜 로그인 구성 요소

열다 미리 보기

                <div class="flex items-center justify-center min-h-screen bg-gray-900">
 <div class="w-full max-w-md p-8 space-y-6 bg-gray-800 rounded-xl shadow-lg">
 <h2 class="text-2xl font-bold text-center text-white">Sign in to your account</h2>
 <form class="space-y-4">
 <div>
 <label for="email" class="block text-sm font-medium text-gray-300">Email address</label>
 <input id="email" name="email" type="email" autocomplete="email" required class="w-full px-3 py-2 mt-1 border border-gray-700 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 bg-gray-900 text-white">
 </div>
 <div>
 <label for="password" class="block text-sm font-medium text-gray-300">Password</label>
 <input id="password" name="password" type="password" autocomplete="current-password" required class="w-full px-3 py-2 mt-1 border border-gray-700 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 bg-gray-900 text-white">
 </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-blue-600 border-gray-700 rounded focus:ring-blue-500 bg-gray-900">
 <label for="remember-me" class="block ml-2 text-sm text-gray-300">Remember me</label>
 </div>
 <div class="text-sm">
 <a href="#" class="font-medium text-blue-500 hover:text-blue-400">Forgot your password?</a>
 </div>
 </div>
 <div>
 <button type="submit" class="w-full px-4 py-2 font-bold text-white bg-blue-600 rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">Sign in</button>
 </div>
 </form>
 <div class="relative">
 <div class="absolute inset-0 flex items-center">
 <div class="w-full border-t border-gray-700"></div>
 </div>
 <div class="relative flex justify-center text-sm">
 <span class="px-2 text-gray-400 bg-gray-800">Or continue with</span>
 </div>
 </div>
 <div class="flex mt-6 space-x-4">
 <button type="button" class="w-full px-4 py-2 flex items-center justify-center text-sm font-medium text-white bg-blue-600 rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
 <svg class="w-4 h-4 mr-2" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true">
 <path d="M6.29 0H3.45L0 3.53V8.5H2.5V20H6V8.5H9.5V3.53H6.29V0Z" fill="currentColor"></path>
 </svg>
 Facebook
 </button>
 <button type="button" class="w-full px-4 py-2 flex items-center justify-center text-sm font-medium text-gray-700 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-700 dark:text-gray-100 dark:hover:bg-gray-600">
 <svg viewBox="0 0 24 24" class="w-4 h-4 mr-2" fill="currentColor" aria-hidden="true">
 <path d="M12.0003 4.75C9.3703 4.75 7.17031 6.87031 7.17031 9.5C7.17031 11.1203 8.0003 12.5303 9.19031 13.4703L8.29031 14.3703C1.54031 9.5 -3.62969 18.5403 5.16031 22.2203C13.6303 25.9303 21.8303 15.3603 19.0403 9.59031C18.9203 9.33031 18.7803 9.07031 18.6403 8.82031C17.7303 7.25031 16.1703 6.01031 14.3503 5.38031L15.9703 6.73031C15.8103 6.85031 15.6603 6.98031 15.5103 7.11031C13.9903 8.45031 13.0003 9.86031 13.0003 11.5C13.0003 12.1003 13.1003 12.6703 13.2803 13.2103C13.8903 15.0203 15.4003 16.3103 17.1203 16.4103C17.4403 16.4303 17.7603 16.4403 18.0903 16.4403C18.4803 16.4403 18.8603 16.4303 19.2403 16.4C20.2303 16.3503 21.0503 15.5703 21.1103 14.5903C21.1103 14.3303 21.1103 14.0803 21.0903 13.8303C21.0903 13.7203 21.0803 13.5903 21.0803 13.4603C21.0703 13.0903 21.0503 12.7103 21.0303 12.3403L23.4403 11.3L22.7603 9.68031C21.9703 9.96031 21.1103 10.2303 20.2203 10.4303C19.8103 9.04031 18.7103 7.99031 17.3603 7.63031L16.1103 8.90031C16.1003 8.96031 16.1003 9.02031 16.0903 9.08031C15.2303 8.51031 13.9203 8.16031 12.4903 8.16031C10.0803 8.16031 8.17031 9.87031 7.56031 12.1103L6.45031 11.5803C6.24031 10.2603 6.47031 8.86031 7.14031 7.67031C8.06031 6.02031 9.89031 4.92031 11.8303 4.77031L12.0003 4.75ZM12.0003 6.75031C10.2303 6.75031 8.75031 8.23031 8.75031 10.0003C8.75031 10.8403 9.09031 11.6003 9.62031 12.1203L10.1503 11.5803L11.2903 12.7303L12.4403 13.8803C12.4403 13.8803 12.4403 13.8803 12.4303 13.8903C12.3403 13.9803 12.1903 14.1303 12.0003 14.1303C11.4503 14.1303 11.0003 13.6803 11.0003 13.1303C11.0003 12.7703 11.1403 12.4403 11.4003 12.2003C10.9703 10.5703 9.57031 9.37031 7.91031 9.13031L6.61031 8.90031C7.09031 6.69031 9.30031 5.00031 11.8303 5.00031C13.4703 5.00031 14.9803 5.87031 15.8503 7.17031L15.8703 7.19031L14.6903 8.35031L14.6903 8.35031C14.2003 7.67031 13.2103 6.75031 12.0003 6.75031V6.75031Z" fill="currentColor"></path>
 </svg>
 Google
 </button>
 </div>
 <p class="mt-8 text-sm text-center text-gray-400">
 Don't have an account?
 <a href="#" class="font-medium text-blue-500 hover:text-blue-400">Sign up</a>
 </p>
 </div>
</div>

Community Forum 구성 요소

Tailwind CSS를 사용하여 다크 모드로 스타일링된 반응형 커뮤니티 포럼 컴포넌트입니다. 이 구성 요소는 눈의 피로를 줄이기 위해 어두운 배경을 특징으로 하며 아바타 및 포럼 게시물에 대한 자리 표시자 이미지를 포함합니다.

열다 미리 보기

                <div class="bg-gray-900 text-white p-6 rounded-lg shadow-lg max-w-3xl mx-auto">
    <h2 class="text-2xl font-bold mb-4">Community Forum</h2>
    <div class="mb-4">
        <h3 class="text-xl font-semibold">Latest Discussions</h3>
        <div class="mt-4">
            <div class="bg-gray-800 p-4 rounded-lg mb-4">
                <div class="flex items-center mb-2">
                    <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3">
                    <div>
                        <h4 class="font-semibold">John Doe</h4>
                        <span class="text-gray-400 text-sm">2 hours ago</span>
                    </div>
                </div>
                <p class="text-gray-300">What are the best practices for learning JavaScript?</p>
                <div class="flex justify-between mt-2">
                    <span class="text-gray-400">5 replies</span>
                    <span class="text-gray-400">10 likes</span>
                </div>
            </div>
            <div class="bg-gray-800 p-4 rounded-lg mb-4">
                <div class="flex items-center mb-2">
                    <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3">
                    <div>
                        <h4 class="font-semibold">Jane Smith</h4>
                        <span class="text-gray-400 text-sm">3 hours ago</span>
                    </div>
                </div>
                <p class="text-gray-300">Any recommendations for a good code editor?</p>
                <div class="flex justify-between mt-2">
                    <span class="text-gray-400">2 replies</span>
                    <span class="text-gray-400">5 likes</span>
                </div>
            </div>
        </div>
    </div>
    <div class="mb-4">
        <h3 class="text-xl font-semibold">Join the Conversation</h3>
        <form class="mt-4 space-y-4">
            <textarea class="w-full p-2 rounded-lg bg-gray-800 text-white placeholder-gray-400 resize-none" rows="4" placeholder="Share your thoughts..."></textarea>
            <button class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">Post</button>
        </form>
    </div>
    <div class="bg-gray-800 p-4 rounded-lg mt-4">
        <h3 class="text-xl font-semibold mb-2">Popular Topics</h3>
        <ul class="space-y-2">
            <li class="bg-gray-700 p-2 rounded">#JavaScript</li>
            <li class="bg-gray-700 p-2 rounded">#React</li>
            <li class="bg-gray-700 p-2 rounded">#TailwindCSS</li>
            <li class="bg-gray-700 p-2 rounded">#NodeJS</li>
            <li class="bg-gray-700 p-2 rounded">#WebDevelopment</li>
        </ul>
    </div>
</div>

참가 신청서

Tailwind CSS를 사용하는 세련된 다크 모드 등록 양식 구성 요소로, 사용자 정보 및 반응형 디자인을 위한 필드를 제공합니다.

열다 미리 보기

                <div class="min-h-screen flex items-center justify-center bg-gray-900">
    <div class="bg-gray-800 rounded-lg shadow-lg p-8 max-w-md w-full">
        <h2 class="text-2xl font-bold text-white text-center mb-6">Create Account</h2>
        <form>
            <div class="mb-4">
                <label class="block text-gray-400 mb-2" for="username">Username</label>
                <input type="text" id="username" class="bg-gray-700 text-white border border-gray-600 rounded-lg w-full py-2 px-4" placeholder="Enter your username" required />
            </div>
            <div class="mb-4">
                <label class="block text-gray-400 mb-2" for="email">Email</label>
                <input type="email" id="email" class="bg-gray-700 text-white border border-gray-600 rounded-lg w-full py-2 px-4" placeholder="[email protected]" required />
            </div>
            <div class="mb-4">
                <label class="block text-gray-400 mb-2" for="password">Password</label>
                <input type="password" id="password" class="bg-gray-700 text-white border border-gray-600 rounded-lg w-full py-2 px-4" placeholder="Enter your password" required />
            </div>
            <div class="mb-6">
                <label class="block text-gray-400 mb-2" for="confirm-password">Confirm Password</label>
                <input type="password" id="confirm-password" class="bg-gray-700 text-white border border-gray-600 rounded-lg w-full py-2 px-4" placeholder="Confirm your password" required />
            </div>
            <div class="flex items-center justify-between mb-4">
                <input type="checkbox" id="terms" class="text-gray-400 border-gray-600" required />
                <label for="terms" class="text-gray-400"> I agree to the terms and conditions</label>
            </div>
            <button type="submit" class="w-full bg-blue-600 hover:bg-blue-500 text-white py-2 rounded-lg font-semibold">Register</button>
        </form>
        <p class="text-gray-400 text-center mt-4">Already have an account? <a href="#" class="text-blue-500 hover:underline">Login</a></p>
    </div>
    <footer class="absolute bottom-0 left-0 w-full text-center bg-gray-800 py-2 text-gray-400">© 2023 Company Name</footer>
</div>

1 ... 275 276 277 278 279 ... 315

검색 구성 요소

카테고리

모든 구성 요소