검색 구성 요소

모든 구성 요소

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

가격 표시 구성 요소

포트폴리오를 위한 레트로 빈티지 스타일의 복합 가격 표시 구성 요소로, Tailwind CSS를 사용하여 트라이어딕 색 구성표, 응답성 및 다크 모드 지원을 특징으로 합니다. JavaScript는 포함되어 있지 않습니다.

열다 미리 보기

                <div class="bg-gray-200 dark:bg-gray-800 min-h-screen flex items-center justify-center p-8">
  <div class="bg-white dark:bg-gray-900 text-gray-800 dark:text-gray-200 rounded-lg shadow-lg p-8 max-w-sm w-full transform transition-all duration-500 hover:scale-105">
    <div class="text-center mb-8">
      <h2 class="text-3xl font-bold font-mono mb-2 text-teal-600 dark:text-teal-400">Pro Plan</h2>
      <p class="text-gray-600 dark:text-gray-400">Level up your portfolio</p>
    </div>
    <div class="text-center mb-8">
      <p class="text-5xl font-extrabold mb-2 text-purple-600 dark:text-purple-400">$29<span class="text-xl font-medium text-gray-500 dark:text-gray-300">/month</span></p>
      <p class="text-sm text-gray-500 dark:text-gray-300">Billed Annually</p>
    </div>
    <ul class="mb-8 space-y-4">
      <li class="flex items-center">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-orange-600 dark:text-orange-400 mr-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
        </svg>
        Unlimited Projects
      </li>
      <li class="flex items-center">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-orange-600 dark:text-orange-400 mr-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
        </svg>
        10GB Storage
      </li>
      <li class="flex items-center">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-orange-600 dark:text-orange-400 mr-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
        </svg>
        Custom Domain
      </li>
      <li class="flex items-center">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-orange-600 dark:text-orange-400 mr-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
        </svg>
        24/7 Support
      </li>
    </ul>
    <button class="w-full bg-orange-600 hover:bg-orange-700 text-white font-bold py-3 px-6 rounded-lg transition-colors duration-300 transform hover:scale-105">
      Get Started
    </button>
  </div>
</div>

Brutalism 로그인/가입 구성 요소

브루탈리즘 스타일의 로그인/가입 구성 요소로, 트라이어딕 색 구성표, 중간 정도의 복잡성, 반응형 디자인, 다크 모드를 지원합니다. 이미지에는 picsum.photos를 사용하고 아바타에는 randomuser.me 를 사용합니다.

열다 미리 보기

                <div class="min-h-screen flex items-center justify-center bg-yellow-400 dark:bg-purple-800 p-4">
  <div class="bg-white dark:bg-black text-black dark:text-white border-4 border-black dark:border-white p-8 rounded-none shadow-xl w-full max-w-md">
    <h2 class="text-2xl font-bold mb-6 text-center uppercase">Join Us</h2>
    
    <div class="mb-4">
      <label for="email" class="block text-sm font-bold mb-2">Email</label>
      <input type="email" id="email" class="w-full p-3 border-4 border-black dark:border-white bg-yellow-200 dark:bg-purple-900 focus:outline-none focus:ring-0 focus:border-red-600 dark:focus:border-red-400" placeholder="[email protected]">
    </div>
    
    <div class="mb-6">
      <label for="password" class="block text-sm font-bold mb-2">Password</label>
      <input type="password" id="password" class="w-full p-3 border-4 border-black dark:border-white bg-yellow-200 dark:bg-purple-900 focus:outline-none focus:ring-0 focus:border-red-600 dark:focus:border-red-400" placeholder="********">
    </div>
    
    <button class="w-full bg-red-600 dark:bg-red-400 text-white font-bold py-3 px-4 border-4 border-black dark:border-white uppercase">Login</button>
    
    <p class="text-center text-sm mt-4">Don't have an account? <a href="#" class="text-red-600 dark:text-red-400 font-bold">Sign up here</a>.</p>
    
    <div class="mt-8 text-center">
      <p class="text-lg font-bold mb-4">Or login with:</p>
      <div class="flex justify-center space-x-4">
        <button class="bg-blue-600 dark:bg-blue-400 text-white font-bold py-2 px-4 border-4 border-black dark:border-white">Facebook</button>
        <button class="bg-red-500 dark:bg-red-700 text-white font-bold py-2 px-4 border-4 border-black dark:border-white">Google</button>
      </div>
    </div>

  </div>
</div>

Brutalism Navigation 구성 요소

브루탈리즘 스타일로 디자인된 반응형 탐색 구성 요소로, 단색 색 구성표를 보여 주며 포트폴리오 웹 사이트에 이상적입니다. 기능에는 고대비의 대담한 레이아웃, Tailwind CSS를 사용한 다크 모드 지원, 드롭다운 또는 버튼 링크와 같은 대화형 요소가 포함됩니다.

열다 미리 보기

                <nav class="bg-gray-900 dark:bg-gray-800 p-5 flex justify-between items-center">
    <div class="text-white font-bold text-2xl">
        Portfolio
    </div>
    <ul class="flex space-x-6">
        <li>
            <a href="#" class="text-gray-300 hover:text-white transition duration-200">Home</a>
        </li>
        <li>
            <a href="#" class="text-gray-300 hover:text-white transition duration-200">About</a>
        </li>
        <li>
            <a href="#" class="text-gray-300 hover:text-white transition duration-200">Projects</a>
        </li>
        <li>
            <a href="#" class="text-gray-300 hover:text-white transition duration-200">Contact</a>
        </li>
    </ul>
    <div class="relative group">
        <button class="text-gray-300 hover:text-white transition duration-200 focus:outline-none">
            Menu
        </button>
        <div class="absolute left-0 mt-2 w-48 bg-gray-700 dark:bg-gray-600 rounded-md shadow-xl opacity-0 group-hover:opacity-100 transition duration-200 ease-in-out">
            <a href="#" class="block px-4 py-2 text-gray-200 hover:bg-gray-800 dark:hover:bg-gray-700">Action 1</a>
            <a href="#" class="block px-4 py-2 text-gray-200 hover:bg-gray-800 dark:hover:bg-gray-700">Action 2</a>
        </div>
    </div>
</nav>

<section class="bg-gray-800 dark:bg-gray-900 p-10">
    <h2 class="text-white text-3xl font-bold mb-4">Featured Projects</h2>
    <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6">
        <div class="bg-gray-700 dark:bg-gray-600 rounded-lg shadow-lg overflow-hidden">
            <img src="https://picsum.photos/400/300?random=1" alt="Project 1" class="w-full">
            <div class="p-4">
                <h3 class="text-xl text-white font-semibold">Project Title 1</h3>
                <p class="text-gray-300">Short description of project 1.</p>
            </div>
        </div>
        <div class="bg-gray-700 dark:bg-gray-600 rounded-lg shadow-lg overflow-hidden">
            <img src="https://picsum.photos/400/300?random=2" alt="Project 2" class="w-full">
            <div class="p-4">
                <h3 class="text-xl text-white font-semibold">Project Title 2</h3>
                <p class="text-gray-300">Short description of project 2.</p>
            </div>
        </div>
        <div class="bg-gray-700 dark:bg-gray-600 rounded-lg shadow-lg overflow-hidden">
            <img src="https://picsum.photos/400/300?random=3" alt="Project 3" class="w-full">
            <div class="p-4">
                <h3 class="text-xl text-white font-semibold">Project Title 3</h3>
                <p class="text-gray-300">Short description of project 3.</p>
            </div>
        </div>
    </div>
</section>

Progress Indicators 구성 요소

브루탈리즘 스타일의 진행 지표 구성 요소로, 고대비를 가지고 있으며, 포트폴리오에서 작업이나 제품을 보여줍니다. Tailwind CSS를 사용하여 어두운 테마 지원으로 반응하도록 설계된 여러 대화형 요소가 있는 풍부한 인터페이스를 제공합니다.

열다 미리 보기

                <div class="min-h-screen bg-gray-900 text-white flex flex-col items-center justify-center p-8 space-y-8">
  <h1 class="text-4xl font-bold mb-4 text-gray-100">Portfolio Progress Indicators</h1>
  <div class="bg-gray-800 rounded-lg w-full max-w-xl p-6 shadow-lg space-y-6">
    <h2 class="text-2xl font-bold text-gray-200">Current Projects</h2>
    <div class="space-y-4">
      <div class="flex justify-between items-center bg-gray-700 p-4 rounded-lg">
        <div class="flex items-center space-x-4">
          <img src="https://picsum.photos/50/50" alt="Project 1" class="rounded-full">
          <span class="text-lg font-semibold">Project Alpha</span>
        </div>
        <div class="relative w-full h-4 bg-gray-600 rounded-full overflow-hidden">
          <div class="absolute top-0 left-0 h-4 bg-green-500" style="width: 60%;"></div>
        </div>
      </div>
      <div class="flex justify-between items-center bg-gray-700 p-4 rounded-lg">
        <div class="flex items-center space-x-4">
          <img src="https://picsum.photos/50/50" alt="Project 2" class="rounded-full">
          <span class="text-lg font-semibold">Project Beta</span>
        </div>
        <div class="relative w-full h-4 bg-gray-600 rounded-full overflow-hidden">
          <div class="absolute top-0 left-0 h-4 bg-yellow-500" style="width: 40%;"></div>
        </div>
      </div>
      <div class="flex justify-between items-center bg-gray-700 p-4 rounded-lg">
        <div class="flex items-center space-x-4">
          <img src="https://picsum.photos/50/50" alt="Project 3" class="rounded-full">
          <span class="text-lg font-semibold">Project Gamma</span>
        </div>
        <div class="relative w-full h-4 bg-gray-600 rounded-full overflow-hidden">
          <div class="absolute top-0 left-0 h-4 bg-red-500" style="width: 80%;"></div>
        </div>
      </div>
    </div>
  </div>
  <div class="bg-gray-800 rounded-lg w-full max-w-xl p-6 shadow-lg">
    <h2 class="text-2xl font-bold text-gray-200">Completed Projects</h2>
    <div class="space-y-4">
      <div class="flex justify-between items-center bg-gray-700 p-4 rounded-lg">
        <div class="flex items-center space-x-4">
          <img src="https://picsum.photos/50/50" alt="Project 4" class="rounded-full">
          <span class="text-lg font-semibold">Project Delta</span>
        </div>
        <div class="relative w-full h-4 bg-gray-600 rounded-full overflow-hidden">
          <div class="absolute top-0 left-0 h-4 bg-blue-500" style="width: 100%;"></div>
        </div>
      </div>
      <div class="flex justify-between items-center bg-gray-700 p-4 rounded-lg">
        <div class="flex items-center space-x-4">
          <img src="https://picsum.photos/50/50" alt="Project 5" class="rounded-full">
          <span class="text-lg font-semibold">Project Epsilon</span>
        </div>
        <div class="relative w-full h-4 bg-gray-600 rounded-full overflow-hidden">
          <div class="absolute top-0 left-0 h-4 bg-purple-500" style="width: 90%;"></div>
        </div>
      </div>
    </div>
  </div>
</div>

Progress Indicators 구성 요소

유리 형태 효과로 설계된 간단한 진행률 표시기로, 다크 모드를 지원하고 단색 색 구성표가 있는 전자 상거래 웹 사이트에 적합합니다.

열다 미리 보기

                <div class="flex flex-col items-center justify-center p-5 bg-white bg-opacity-30 backdrop-blur-sm dark:bg-gray-800 dark:bg-opacity-30 rounded-lg">
    <h1 class="text-xl font-bold text-gray-800 dark:text-white mb-4">Order Progress</h1>
    <div class="w-full mx-auto">
        <!-- Progress Bar -->
        <div class="relative pt-1">
            <div class="flex mb-2 items-center justify-between">
                <div class="text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-gray-800 dark:text-white bg-blue-200 dark:bg-blue-600">
                    1. Add to Cart
                </div>
                <div class="text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-gray-800 dark:text-white bg-blue-200 dark:bg-blue-600">
                    2. Checkout
                </div>
                <div class="text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-gray-800 dark:text-white bg-blue-200 dark:bg-blue-600">
                    3. Payment
                </div>
            </div>
            <div class="flex h-2 mb-4 rounded bg-gray-300 dark:bg-gray-600">
                <div class="w-1/3 h-full bg-blue-600 dark:bg-blue-300"></div>
            </div>
        </div>
    </div>
    <div class="mt-4">
        <img src="https://picsum.photos/40/40" alt="Avatar" class="rounded-full">
    </div>
    <p class="mt-2 text-sm text-gray-600 dark:text-gray-400">Estimated delivery: 3-5 business days</p>
</div>

Neumorphic Tooltip 컴포넌트

비즈니스 웹 사이트에 적합한 정교한 Neumorphism 스타일의 툴팁 구성 요소로, 생생한 색상을 사용하고 다크 모드를 지원하도록 설계되었습니다.

열다 미리 보기

                <div class="relative group flex items-center">
    <!-- Tooltip Trigger -->
    <button class="bg-purple-600 text-white rounded-full p-2 shadow-lg focus:outline-none">
        Hover me
    </button>

    <!-- Tooltip -->
    <div class="absolute bottom-full left-1/2 transform -translate-x-1/2 mb-2 w-48 bg-white dark:bg-gray-800 text-gray-800 dark:text-gray-200 text-sm rounded-lg shadow-lg opacity-0 group-hover:opacity-100 transition-opacity duration-300 ease-in-out z-10">
        <div class="p-3">
            <div class="flex items-center space-x-3">
                <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-8 h-8 rounded-full">
                <span class="font-semibold">John Doe</span>
            </div>
            <p class="mt-2">This is a tooltip description to provide additional information.</p>
        </div>
        <div class="rounded-lg bg-purple-600 p-2 text-white text-center font-bold transition-transform transform hover:scale-105">Learn More</div>
    </div>
</div>

미니멀리스트 파스텔 툴팁

비즈니스 및 기업 웹 사이트용으로 설계된 미니멀하고 평평한 툴팁 구성 요소로, 파스텔 색상, 반응형 디자인 및 Tailwind CSS를 사용하는 다크 모드를 지원합니다.

열다 미리 보기

                <div class="relative inline-block">
  <button class="text-gray-700 dark:text-gray-300 bg-blue-200 dark:bg-blue-700 hover:bg-blue-300 dark:hover:bg-blue-800 px-4 py-2 rounded">Hover me</button>
  <div class="invisible absolute z-10 w-32 top-full left-1/2 transform -translate-x-1/2 mt-2 px-2 py-1 text-sm text-gray-700 dark:text-gray-300 bg-gray-100 dark:bg-gray-800 rounded shadow-lg opacity-0 transition-all duration-300 group-hover:visible group-hover:opacity-100">
    Tooltip text
  </div>
</div>

제품 카드 구성 요소

어스 톤의 마이크로 인터랙션이 있는 반응형 제품 카드 구성 요소로, 포트폴리오 전시를 위한 어두운 테마 지원을 제공합니다.

열다 미리 보기

                <div class="flex flex-wrap justify-center p-4">  
    <!-- Product Card -->  
    <div class="max-w-xs rounded-lg overflow-hidden shadow-lg bg-white dark:bg-gray-800 transition-transform transform hover:scale-105 mx-4 mb-6">  
        <img class="w-full h-48 object-cover" src="https://picsum.photos/300/200" alt="Product Image">  
        <div class="p-4">  
            <h2 class="text-xl font-bold text-gray-800 dark:text-white">Product Name</h2>  
            <p class="text-gray-600 dark:text-gray-300 mt-2">Brief description of the product that highlights its features and benefits.</p>  
            <div class="flex items-center mt-4">  
                <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">  
                <div class="ml-2">  
                    <p class="text-gray-800 dark:text-white font-semibold">John Doe</p>  
                    <p class="text-gray-600 dark:text-gray-400 text-sm">Designer</p>  
                </div>  
            </div>  
        </div>  
    </div>  

    <!-- Repeat for more products -->  
    <div class="max-w-xs rounded-lg overflow-hidden shadow-lg bg-white dark:bg-gray-800 transition-transform transform hover:scale-105 mx-4 mb-6">  
        <img class="w-full h-48 object-cover" src="https://picsum.photos/300/201" alt="Product Image">  
        <div class="p-4">  
            <h2 class="text-xl font-bold text-gray-800 dark:text-white">Product Name 2</h2>  
            <p class="text-gray-600 dark:text-gray-300 mt-2">Another product description highlighting its unique aspects.</p>  
            <div class="flex items-center mt-4">  
                <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/women/32.jpg" alt="User Avatar">  
                <div class="ml-2">  
                    <p class="text-gray-800 dark:text-white font-semibold">Jane Smith</p>  
                    <p class="text-gray-600 dark:text-gray-400 text-sm">Developer</p>  
                </div>  
            </div>  
        </div>  
    </div>  
</div>

Progress Indicators 구성 요소

미니멀한 진행률 표시기 구성 요소는 어두운 테마를 지원하는 생생한 색상과 반응형 디자인을 사용하여 포트폴리오 진행 상황을 보여주도록 설계되었습니다.

열다 미리 보기

                <div class="max-w-4xl mx-auto p-8">
  <h2 class="text-2xl font-bold text-center mb-6">Portfolio Progress Indicators</h2>
  <div class="space-y-8">
    <div class="bg-gray-200 dark:bg-gray-800 rounded-lg p-5 shadow-lg">
      <div class="flex items-center justify-between mb-2">
        <span class="text-lg font-semibold text-blue-600 dark:text-blue-400">Project 1</span>
        <span class="text-sm font-medium text-gray-600 dark:text-gray-400">70%</span>
      </div>
      <div class="relative w-full h-4 bg-gray-300 dark:bg-gray-700 rounded-full">
        <div class="absolute h-4 bg-blue-600 dark:bg-blue-400 rounded-full" style="width: 70%;"></div>
      </div>
    </div>
    <div class="bg-gray-200 dark:bg-gray-800 rounded-lg p-5 shadow-lg">
      <div class="flex items-center justify-between mb-2">
        <span class="text-lg font-semibold text-red-600 dark:text-red-400">Project 2</span>
        <span class="text-sm font-medium text-gray-600 dark:text-gray-400">45%</span>
      </div>
      <div class="relative w-full h-4 bg-gray-300 dark:bg-gray-700 rounded-full">
        <div class="absolute h-4 bg-red-600 dark:bg-red-400 rounded-full" style="width: 45%;"></div>
      </div>
    </div>
    <div class="bg-gray-200 dark:bg-gray-800 rounded-lg p-5 shadow-lg">
      <div class="flex items-center justify-between mb-2">
        <span class="text-lg font-semibold text-green-600 dark:text-green-400">Project 3</span>
        <span class="text-sm font-medium text-gray-600 dark:text-gray-400">90%</span>
      </div>
      <div class="relative w-full h-4 bg-gray-300 dark:bg-gray-700 rounded-full">
        <div class="absolute h-4 bg-green-600 dark:bg-green-400 rounded-full" style="width: 90%;"></div>
      </div>
    </div>
    <div class="bg-gray-200 dark:bg-gray-800 rounded-lg p-5 shadow-lg">
      <div class="flex items-center justify-between mb-2">
        <span class="text-lg font-semibold text-yellow-600 dark:text-yellow-400">Project 4</span>
        <span class="text-sm font-medium text-gray-600 dark:text-gray-400">60%</span>
      </div>
      <div class="relative w-full h-4 bg-gray-300 dark:bg-gray-700 rounded-full">
        <div class="absolute h-4 bg-yellow-600 dark:bg-yellow-400 rounded-full" style="width: 60%;"></div>
      </div>
    </div>
  </div>
</div>

Buttons 구성 요소

열다 미리 보기

                <div class="flex flex-wrap gap-4 p-4 bg-gray-100 dark:bg-gray-900">

  <!-- Primary Button -->
  <button class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-6 rounded-lg shadow-md transition duration-300 ease-in-out dark:bg-blue-700 dark:hover:bg-blue-800 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50">
    Primary Button
  </button>

  <!-- Secondary Button -->
  <button class="bg-gray-300 hover:bg-gray-400 text-gray-800 font-bold py-3 px-6 rounded-lg shadow-md transition duration-300 ease-in-out dark:bg-gray-600 dark:hover:bg-gray-500 dark:text-white focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-opacity-50">
    Secondary Button
  </button>

  <!-- Success Button -->
  <button class="bg-green-600 hover:bg-green-700 text-white font-bold py-3 px-6 rounded-lg shadow-md transition duration-300 ease-in-out dark:bg-green-700 dark:hover:bg-green-800 focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-opacity-50">
    Success Button
  </button>

  <!-- Danger Button -->
  <button class="bg-red-600 hover:bg-red-700 text-white font-bold py-3 px-6 rounded-lg shadow-md transition duration-300 ease-in-out dark:bg-red-700 dark:hover:bg-red-800 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-opacity-50">
    Danger Button
  </button>

  <!-- Outline Button -->
  <button class="bg-transparent hover:bg-blue-200 text-blue-700 font-semibold py-3 px-6 border border-blue-600 rounded-lg shadow-md transition duration-300 ease-in-out dark:border-blue-400 dark:text-blue-400 dark:hover:bg-blue-900 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50">
    Outline Button
  </button>

  <!-- Disabled Button -->
  <button class="bg-gray-300 text-gray-600 font-bold py-3 px-6 rounded-lg cursor-not-allowed shadow-md dark:bg-gray-700 dark:text-gray-500" disabled>
    Disabled Button
  </button>

</div>

1 ... 173 174 175 176 177 ... 335

검색 구성 요소

카테고리

모든 구성 요소