배지 | Code Components Hub

Badges 구성 요소

비즈니스/기업 웹사이트용으로 설계된 다재다능한 배지 구성 요소로, 다크 모드 UI에서 어스 톤을 활용하여 사용자 경험을 향상시킵니다. 이 구성 요소는 몇 가지 대화형 요소를 사용하여 응답성을 제공합니다.

                <div class="flex flex-wrap justify-center p-6 bg-gray-900 text-gray-300">
    <!-- Badge 1 -->
    <div class="bg-green-800 dark:bg-green-600 text-white rounded-full px-4 py-2 mx-2 mb-4 transition-transform transform hover:scale-105">
        <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="inline-block h-8 w-8 rounded-full mr-2">
        <span>Project Leader</span>
    </div>
    <!-- Badge 2 -->
    <div class="bg-brown-800 dark:bg-brown-600 text-white rounded-full px-4 py-2 mx-2 mb-4 transition-transform transform hover:scale-105">
        <img src="https://randomuser.me/api/portraits/women/2.jpg" alt="Avatar" class="inline-block h-8 w-8 rounded-full mr-2">
        <span>Senior Developer</span>
    </div>
    <!-- Badge 3 -->
    <div class="bg-yellow-800 dark:bg-yellow-600 text-white rounded-full px-4 py-2 mx-2 mb-4 transition-transform transform hover:scale-105">
        <img src="https://randomuser.me/api/portraits/men/3.jpg" alt="Avatar" class="inline-block h-8 w-8 rounded-full mr-2">
        <span>UI/UX Designer</span>
    </div>
    <!-- Badge 4 -->
    <div class="bg-gray-800 dark:bg-gray-600 text-white rounded-full px-4 py-2 mx-2 mb-4 transition-transform transform hover:scale-105">
        <img src="https://randomuser.me/api/portraits/women/4.jpg" alt="Avatar" class="inline-block h-8 w-8 rounded-full mr-2">
        <span>Content Strategist</span>
    </div>
</div>

Badges 구성 요소

스큐어모피즘 스타일, 트라이어딕 색 구성표 및 단순한 복잡성을 갖춘 반응형 Badges 구성 요소로, 어두운 테마를 지원하는 포트폴리오를 위해 설계되었습니다.

미리보기 열기

                <div class="p-4 bg-gradient-to-br from-gray-300 via-gray-400 to-gray-500 dark:from-gray-700 dark:via-gray-800 dark:to-gray-900 rounded-xl shadow-xl max-w-sm mx-auto">
  <div class="text-center">
    <img class="w-24 h-24 rounded-full mx-auto border-4 border-white shadow-lg" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar">
    <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200 mt-4">John Doe</h2>
    <p class="text-sm text-gray-600 dark:text-gray-400">Web Developer</p>
  </div>
  <div class="flex justify-center mt-6 space-x-3">
    <span class="inline-block bg-teal-500 text-white text-xs px-3 py-1 rounded-full shadow-md">HTML</span>
    <span class="inline-block bg-fuchsia-500 text-white text-xs px-3 py-1 rounded-full shadow-md">CSS</span>
    <span class="inline-block bg-amber-500 text-white text-xs px-3 py-1 rounded-full shadow-md">Tailwind CSS</span>
  </div>
  <div class="mt-6 text-center text-gray-700 dark:text-gray-300 text-sm">
    <p>Showcasing skills and expertise.</p>
  </div>
</div>

Badges 구성 요소

마이크로 인터랙션으로 설계된 반응형 Badges 구성 요소로, 보색 구성표와 어두운 테마 지원을 특징으로 합니다. 비즈니스 및 기업 웹 사이트에 이상적인 이 구성 요소에는 사용자 작업에 응답하는 매력적인 애니메이션이 포함되어 있습니다. 앞서 언급한 호버 효과와 같은 시각적 신호는 사용자 경험을 향상시킵니다.

미리보기 열기

                <div class="flex flex-wrap justify-center p-4 bg-white dark:bg-gray-800">
    <div class="m-2 p-4 bg-blue-500 text-white rounded-lg shadow-lg hover:bg-blue-600 transition duration-300 ease-in-out transform hover:scale-105">
        <div class="flex items-center">
            <img class="w-10 h-10 rounded-full mr-2" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar">
            <span class="font-semibold">Marketing Team</span>
        </div>
        <p class="text-sm mt-2">Achieved a 20% increase in engagement through targeted campaigns.</p>
    </div>
    <div class="m-2 p-4 bg-green-500 text-white rounded-lg shadow-lg hover:bg-green-600 transition duration-300 ease-in-out transform hover:scale-105">
        <div class="flex items-center">
            <img class="w-10 h-10 rounded-full mr-2" src="https://randomuser.me/api/portraits/women/2.jpg" alt="Avatar">
            <span class="font-semibold">Sales Team</span>
        </div>
        <p class="text-sm mt-2">Closed $500k in new contracts this quarter.</p>
    </div>
    <div class="m-2 p-4 bg-red-500 text-white rounded-lg shadow-lg hover:bg-red-600 transition duration-300 ease-in-out transform hover:scale-105">
        <div class="flex items-center">
            <img class="w-10 h-10 rounded-full mr-2" src="https://randomuser.me/api/portraits/men/3.jpg" alt="Avatar">
            <span class="font-semibold">Product Team</span>
        </div>
        <p class="text-sm mt-2">Launched a new product that increased market share by 15%.</p>
    </div>
    <div class="m-2 p-4 bg-purple-500 text-white rounded-lg shadow-lg hover:bg-purple-600 transition duration-300 ease-in-out transform hover:scale-105">
        <div class="flex items-center">
            <img class="w-10 h-10 rounded-full mr-2" src="https://randomuser.me/api/portraits/women/4.jpg" alt="Avatar">
            <span class="font-semibold">Development Team</span>
        </div>
        <p class="text-sm mt-2">Implemented new system improvements for better performance.</p>
    </div>
</div>

Badges 구성 요소

배지: 전자 상거래를 위한 반응형 어두운 테마를 지원하는 구성 요소입니다.

미리보기 열기

                <div class="flex justify-center items-center h-screen bg-gray-800 dark:bg-gray-900">
  <div class="flex flex-wrap gap-2 p-4 rounded-lg bg-gray-700 dark:bg-gray-800">
    <span class="px-3 py-1 text-sm font-semibold text-amber-100 bg-amber-600 rounded-full dark:bg-amber-700 dark:text-amber-200">New Arrival</span>
    <span class="px-3 py-1 text-sm font-semibold text-teal-100 bg-teal-600 rounded-full dark:bg-teal-700 dark:text-teal-200">Top Rated</span>
    <span class="px-3 py-1 text-sm font-semibold text-fuchsia-100 bg-fuchsia-600 rounded-full dark:bg-fuchsia-700 dark:text-fuchsia-200">Limited Stock</span>
    <span class="px-3 py-1 text-sm font-semibold text-orange-100 bg-orange-600 rounded-full dark:bg-orange-700 dark:text-orange-200">On Sale</span>
    <span class="px-3 py-1 text-sm font-semibold text-rose-100 bg-rose-600 rounded-full dark:bg-rose-700 dark:text-rose-200">Bestseller</span>
  </div>
</div>

스큐어모픽 배지

스큐어모픽 디자인, 보색 구성표 및 간단한 레이아웃이 있는 배지 세트로 블로그 또는 콘텐츠 사이트에 적합합니다. 다크 모드 지원으로 반응형.

미리보기 열기

                <div class="flex flex-wrap gap-2 p-4 bg-gray-100 dark:bg-gray-800">
  <span class="px-3 py-1 rounded-full text-sm font-semibold text-blue-800 bg-blue-200 border border-blue-400 shadow-lg dark:text-blue-200 dark:bg-blue-800 dark:border-blue-600">
    Skeuomorphism
  </span>
  <span class="px-3 py-1 rounded-full text-sm font-semibold text-green-800 bg-green-200 border border-green-400 shadow-lg dark:text-green-200 dark:bg-green-800 dark:border-green-600">
    Complementary
  </span>
  <span class="px-3 py-1 rounded-full text-sm font-semibold text-yellow-800 bg-yellow-200 border border-yellow-400 shadow-lg dark:text-yellow-200 dark:bg-yellow-800 dark:border-yellow-600">
    Simple
  </span>
  <span class="px-3 py-1 rounded-full text-sm font-semibold text-red-800 bg-red-200 border border-red-400 shadow-lg dark:text-red-200 dark:bg-red-800 dark:border-red-600">
    Blog
  </span>
</div>

Badges 구성 요소

유사한 색 구성표와 풍부한 인터페이스를 가진 블로그를 위한 Neumorphism 스타일 배지 구성 요소입니다.

미리보기 열기

                <div class="min-h-screen bg-gray-100 dark:bg-gray-800 flex items-center justify-center p-4">
    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
        <!-- Badge 1 -->
        <div class="bg-white dark:bg-gray-900 shadow-lg rounded-lg p-6 flex items-center space-x-4 transition-all duration-300 hover:shadow-2xl cursor-pointer">
            <img class="w-12 h-12 rounded-full shadow-inner" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar">
            <div class="flex flex-col">
                <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Tech Trends</h2>
                <p class="text-gray-600 dark:text-gray-400">Stay updated with the latest in technology.</p>
            </div>
        </div>
        
        <!-- Badge 2 -->
        <div class="bg-white dark:bg-gray-900 shadow-lg rounded-lg p-6 flex items-center space-x-4 transition-all duration-300 hover:shadow-2xl cursor-pointer">
            <img class="w-12 h-12 rounded-full shadow-inner" src="https://randomuser.me/api/portraits/women/1.jpg" alt="Avatar">
            <div class="flex flex-col">
                <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Health & Wellness</h2>
                <p class="text-gray-600 dark:text-gray-400">Tips for a healthier lifestyle.</p>
            </div>
        </div>
        
        <!-- Badge 3 -->
        <div class="bg-white dark:bg-gray-900 shadow-lg rounded-lg p-6 flex items-center space-x-4 transition-all duration-300 hover:shadow-2xl cursor-pointer">
            <img class="w-12 h-12 rounded-full shadow-inner" src="https://randomuser.me/api/portraits/men/2.jpg" alt="Avatar">
            <div class="flex flex-col">
                <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Travel Diaries</h2>
                <p class="text-gray-600 dark:text-gray-400">Explore the world through rich stories.</p>
            </div>
        </div>
        
        <!-- Badge 4 -->
        <div class="bg-white dark:bg-gray-900 shadow-lg rounded-lg p-6 flex items-center space-x-4 transition-all duration-300 hover:shadow-2xl cursor-pointer">
            <img class="w-12 h-12 rounded-full shadow-inner" src="https://randomuser.me/api/portraits/women/2.jpg" alt="Avatar">
            <div class="flex flex-col">
                <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Food & Recipes</h2>
                <p class="text-gray-600 dark:text-gray-400">Discover delicious recipes and cooking tips.</p>
            </div>
        </div>
    </div>
</div>

레트로배지

Retro/Vintage Badges 보색 구성표가 있는 비즈니스/기업 웹사이트를 위한 구성 요소. 심플한 레이아웃, 어두운 테마를 지원하는 반응형 디자인. 자바스크립트가 없습니다.

미리보기 열기

                <div class="flex flex-wrap gap-2 p-4 bg-gray-100 dark:bg-gray-900">
  <!-- Badge 1 -->
  <span class="px-3 py-1 text-sm font-semibold text-purple-800 bg-purple-200 rounded-full dark:text-purple-200 dark:bg-purple-800">
    Vintage Vibe
  </span>

  <!-- Badge 2 -->
  <span class="px-3 py-1 text-sm font-semibold text-yellow-800 bg-yellow-200 rounded-full dark:text-yellow-200 dark:bg-yellow-800">
    Retro Style
  </span>

  <!-- Badge 3 -->
  <span class="px-3 py-1 text-sm font-semibold text-green-800 bg-green-200 rounded-full dark:text-green-200 dark:bg-green-800">
    Classic Look
  </span>
</div>

Badges 구성 요소

블로그 콘텐츠 소비를 위해 설계된 뉴모픽 배지 컴포넌트로, 인터랙티브 요소와 다크 모드를 지원하는 반응형 디자인을 제공합니다.

미리보기 열기

                <div class="flex flex-col items-center justify-center p-4 bg-white dark:bg-gray-800 rounded-lg shadow-neumorphism">  
  <h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-4">Badges</h2>  
  <div class="grid grid-cols-3 gap-4">    
    <div class="flex items-center justify-center bg-gray-200 dark:bg-gray-700 rounded-full shadow-neumorphism w-24 h-24">      
      <img src="https://picsum.photos/100/100" alt="Badge 1" class="rounded-full">      
      <p class="text-center text-gray-800 dark:text-white mt-2">Badge 1</p>    
    </div>    
    <div class="flex items-center justify-center bg-gray-200 dark:bg-gray-700 rounded-full shadow-neumorphism w-24 h-24">      
      <img src="https://picsum.photos/100/101" alt="Badge 2" class="rounded-full">      
      <p class="text-center text-gray-800 dark:text-white mt-2">Badge 2</p>    
    </div>    
    <div class="flex items-center justify-center bg-gray-200 dark:bg-gray-700 rounded-full shadow-neumorphism w-24 h-24">      
      <img src="https://picsum.photos/100/102" alt="Badge 3" class="rounded-full">      
      <p class="text-center text-gray-800 dark:text-white mt-2">Badge 3</p>    
    </div>  
  </div>  
  <div class="grid grid-cols-1 gap-4 mt-8">    
    <div class="flex items-center justify-between p-4 bg-gray-200 dark:bg-gray-700 rounded-lg shadow-neumorphism">      
      <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="rounded-full w-12 h-12">      
      <div class="ml-4">        
        <h3 class="text-lg font-medium text-gray-800 dark:text-white">John Doe</h3>        
        <p class="text-sm text-gray-600 dark:text-gray-300">Contributor</p>      
      </div>      
      <button class="bg-blue-500 text-white rounded-md px-3 py-1 shadow-neumorphism hover:bg-blue-600 dark:bg-blue-700 dark:hover:bg-blue-600">Follow</button>    
    </div>    
    <div class="flex items-center justify-between p-4 bg-gray-200 dark:bg-gray-700 rounded-lg shadow-neumorphism">      
      <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="Avatar" class="rounded-full w-12 h-12">      
      <div class="ml-4">        
        <h3 class="text-lg font-medium text-gray-800 dark:text-white">Jane Smith</h3>        
        <p class="text-sm text-gray-600 dark:text-gray-300">Editor</p>      
      </div>      
      <button class="bg-blue-500 text-white rounded-md px-3 py-1 shadow-neumorphism hover:bg-blue-600 dark:bg-blue-700 dark:hover:bg-blue-600">Follow</button>    
    </div>  
  </div>  
</div>

Badges 구성 요소

어스 톤을 사용하는 3D 스타일로 디자인된 반응형 배지 구성 요소로, 대시보드에 적합한 대화형 요소를 제공합니다.

미리보기 열기

                <div class="flex flex-wrap gap-4 p-5">
    <!-- Badge 1 -->
    <div class="bg-gradient-to-br from-green-400 to-green-600 dark:from-green-600 dark:to-green-800 shadow-lg rounded-lg p-4 transform transition-transform duration-300 hover:scale-105">
        <img src="https://picsum.photos/100/80" alt="Badge Image 1" class="rounded-lg mb-2">
        <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Active Users</h2>
        <p class="text-gray-600 dark:text-gray-400">1500</p>
    </div>
    
    <!-- Badge 2 -->
    <div class="bg-gradient-to-br from-brown-400 to-brown-500 dark:from-brown-600 dark:to-brown-800 shadow-lg rounded-lg p-4 transform transition-transform duration-300 hover:scale-105">
        <img src="https://picsum.photos/100/80" alt="Badge Image 2" class="rounded-lg mb-2">
        <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200">New Signups</h2>
        <p class="text-gray-600 dark:text-gray-400">300</p>
    </div>
    
    <!-- Badge 3 -->
    <div class="bg-gradient-to-br from-yellow-400 to-yellow-600 dark:from-yellow-600 dark:to-yellow-800 shadow-lg rounded-lg p-4 transform transition-transform duration-300 hover:scale-105">
        <img src="https://picsum.photos/100/80" alt="Badge Image 3" class="rounded-lg mb-2">
        <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Total Revenue</h2>
        <p class="text-gray-600 dark:text-gray-400">$10,000</p>
    </div>
    
    <!-- Badge 4 -->
    <div class="bg-gradient-to-br from-gray-400 to-gray-500 dark:from-gray-600 dark:to-gray-800 shadow-lg rounded-lg p-4 transform transition-transform duration-300 hover:scale-105">
        <img src="https://picsum.photos/100/80" alt="Badge Image 4" class="rounded-lg mb-2">
        <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Feedback Received</h2>
        <p class="text-gray-600 dark:text-gray-400">250</p>
    </div>
</div>

Badges 구성 요소

배지 구성 요소 - 반응형 효과와 어두운 테마를 지원하는 미니멀리스트/플랫 디자인. Tailwind를 사용하는 JavaScript, 순수 HTML 및 CSS가 없습니다.

미리보기 열기

                <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200"> Badge </span>
<span class="inline-flex items-center px-3 py-0.5 rounded-full text-sm font-medium bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200"> Large Badge </span>
<span class="inline-flex items-center px-2.5 py-0.5 rounded-md text-sm font-medium bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200"> Rounded Badge </span>
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200">
  <svg class="-ml-0.5 mr-1.5 h-2 w-2 text-yellow-400" fill="currentColor" viewBox="0 0 8 8">
    <circle cx="4" cy="4" r="3" />
  </svg>
  Dot Badge
</span>
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-pink-100 text-pink-800 dark:bg-pink-900 dark:text-pink-200">
  <svg class="-ml-0.5 mr-1.5 h-2 w-2 text-pink-400" fill="currentColor" viewBox="0 0 8 8">
    <circle cx="4" cy="4" r="3" />
  </svg>
  Dot Badge with long text that should wrap or truncate
</span>

카테고리

배지