카테고리

배지

일반적으로 개수 또는 상태를 표시하는 데 사용되는 작은 표시기

Badges 구성 요소

Tailwind CSS를 사용하여 설계된 매력적인 마이크로 상호 작용이 있는 반응형 Badges 구성 요소입니다. 다크 모드를 지원하며 이미지 자리 표시자를 포함합니다.

                <div class="flex flex-wrap gap-4 p-6 bg-white dark:bg-gray-800">
    <div class="relative inline-block">
        <img src="https://picsum.photos/200" alt="Badge Image" class="h-24 w-24 rounded-full shadow-lg transform transition-all duration-300 hover:scale-105">
        <span class="absolute top-0 right-0 inline-flex items-center justify-center w-6 h-6 p-2 bg-blue-600 rounded-full text-white shadow-lg transform transition-all duration-300 hover:scale-110">1</span>
    </div>
    <div class="relative inline-block">
        <img src="https://picsum.photos/201" alt="Badge Image" class="h-24 w-24 rounded-full shadow-lg transform transition-all duration-300 hover:scale-105">
        <span class="absolute top-0 right-0 inline-flex items-center justify-center w-6 h-6 p-2 bg-green-600 rounded-full text-white shadow-lg transform transition-all duration-300 hover:scale-110">2</span>
    </div>
    <div class="relative inline-block">
        <img src="https://picsum.photos/202" alt="Badge Image" class="h-24 w-24 rounded-full shadow-lg transform transition-all duration-300 hover:scale-105">
        <span class="absolute top-0 right-0 inline-flex items-center justify-center w-6 h-6 p-2 bg-yellow-600 rounded-full text-white shadow-lg transform transition-all duration-300 hover:scale-110">3</span>
    </div>
    <div class="relative inline-block">
        <img src="https://picsum.photos/203" alt="Badge Image" class="h-24 w-24 rounded-full shadow-lg transform transition-all duration-300 hover:scale-105">
        <span class="absolute top-0 right-0 inline-flex items-center justify-center w-6 h-6 p-2 bg-red-600 rounded-full text-white shadow-lg transform transition-all duration-300 hover:scale-110">4</span>
    </div>
</div>

<style>
/* Dark mode adjustments */
@media (prefers-color-scheme: dark) {
    .bg-white {
        background-color: #1f2937; /* Gray-800 */
    }
    .text-white {
        color: #f9fafb; /* Gray-100 */
    }
}
</style>

Badges 구성 요소

Tailwind CSS를 사용하여 설계된 마이크로 인터랙션 및 어두운 테마 지원이 있는 반응형 배지 구성 요소입니다. 이 구성 요소에는 호버 효과가 포함되어 있으며 아바타에 자리 표시자 이미지를 사용합니다.

미리보기 열기

                <div class="flex flex-wrap gap-4 p-6 bg-white dark:bg-gray-800">
    <div class="transition-transform transform hover:scale-110 bg-blue-500 dark:bg-blue-700 text-white font-bold rounded-full px-3 py-1 flex items-center">
        <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-6 h-6 rounded-full mr-2">
        Badge One
    </div>
    <div class="transition-transform transform hover:scale-110 bg-green-500 dark:bg-green-700 text-white font-bold rounded-full px-3 py-1 flex items-center">
        <img src="https://randomuser.me/api/portraits/women/2.jpg" alt="Avatar" class="w-6 h-6 rounded-full mr-2">
        Badge Two
    </div>
    <div class="transition-transform transform hover:scale-110 bg-yellow-500 dark:bg-yellow-700 text-white font-bold rounded-full px-3 py-1 flex items-center">
        <img src="https://randomuser.me/api/portraits/men/3.jpg" alt="Avatar" class="w-6 h-6 rounded-full mr-2">
        Badge Three
    </div>
    <div class="transition-transform transform hover:scale-110 bg-red-500 dark:bg-red-700 text-white font-bold rounded-full px-3 py-1 flex items-center">
        <img src="https://randomuser.me/api/portraits/women/4.jpg" alt="Avatar" class="w-6 h-6 rounded-full mr-2">
        Badge Four
    </div>
    <div class="transition-transform transform hover:scale-110 bg-purple-500 dark:bg-purple-700 text-white font-bold rounded-full px-3 py-1 flex items-center">
        <img src="https://randomuser.me/api/portraits/men/5.jpg" alt="Avatar" class="w-6 h-6 rounded-full mr-2">
        Badge Five
    </div>
</div>

스큐어모픽 배지

반응형 효과와 어두운 테마를 지원하는 Skeuomorphic Badges 컴포넌트입니다.

미리보기 열기

                <span class="inline-flex items-center rounded-md bg-gray-200 px-2.5 py-0.5 text-sm font-medium text-gray-800 shadow-md dark:bg-gray-700 dark:text-gray-200">
  Badge
</span>

<span class="inline-flex items-center rounded-full bg-red-100 px-2.5 py-0.5 text-xs font-medium text-red-800 shadow-inner dark:bg-red-900 dark:text-red-200">
  Badge
</span>

<span class="inline-flex items-center rounded-md bg-blue-50 px-3 py-1 text-base font-medium text-blue-700 ring-1 ring-inset ring-blue-700/10 dark:bg-blue-900 dark:text-blue-200 dark:ring-blue-200/10">
  Badge
</span>

<span class="inline-flex items-center px-3 py-0.5 rounded-full bg-green-100 text-sm font-medium text-green-800 shadow-lg dark:bg-green-800 dark:text-green-100">
  <svg class="-ml-1 mr-1.5 h-2 w-2 text-green-400 dark:text-green-600" fill="currentColor" viewBox="0 0 8 8">
    <circle cx="4" cy="4" r="3" />
  </svg>
  Badge with dot
</span>

Badges 구성 요소

Glassmorphism 스타일로 디자인된 반응형 Badges 구성 요소로, 젖빛 유리와 같은 반투명 요소와 흐림 효과를 특징으로 하며 다크 모드를 지원합니다.

미리보기 열기

                <div class="flex flex-wrap justify-center space-x-4 mt-10">
    <!-- Badge 1 -->
    <div class="bg-white bg-opacity-30 backdrop-filter backdrop-blur-md rounded-lg border border-gray-200 dark:bg-gray-800 dark:bg-opacity-50 p-4 shadow-lg hover:shadow-xl transition-shadow duration-300 ease-in-out">
        <img src="https://picsum.photos/50/50" alt="Avatar" class="rounded-full mb-2">
        <h3 class="text-lg font-semibold text-gray-900 dark:text-white">John Doe</h3>
        <p class="text-gray-500 dark:text-gray-400">Web Developer</p>
    </div>
    <!-- Badge 2 -->
    <div class="bg-white bg-opacity-30 backdrop-filter backdrop-blur-md rounded-lg border border-gray-200 dark:bg-gray-800 dark:bg-opacity-50 p-4 shadow-lg hover:shadow-xl transition-shadow duration-300 ease-in-out">
        <img src="https://picsum.photos/50/51" alt="Avatar" class="rounded-full mb-2">
        <h3 class="text-lg font-semibold text-gray-900 dark:text-white">Jane Smith</h3>
        <p class="text-gray-500 dark:text-gray-400">Graphic Designer</p>
    </div>
    <!-- Badge 3 -->
    <div class="bg-white bg-opacity-30 backdrop-filter backdrop-blur-md rounded-lg border border-gray-200 dark:bg-gray-800 dark:bg-opacity-50 p-4 shadow-lg hover:shadow-xl transition-shadow duration-300 ease-in-out">
        <img src="https://picsum.photos/50/52" alt="Avatar" class="rounded-full mb-2">
        <h3 class="text-lg font-semibold text-gray-900 dark:text-white">Mike Lee</h3>
        <p class="text-gray-500 dark:text-gray-400">UX Designer</p>
    </div>
    <!-- Badge 4 -->
    <div class="bg-white bg-opacity-30 backdrop-filter backdrop-blur-md rounded-lg border border-gray-200 dark:bg-gray-800 dark:bg-opacity-50 p-4 shadow-lg hover:shadow-xl transition-shadow duration-300 ease-in-out">
        <img src="https://picsum.photos/50/53" alt="Avatar" class="rounded-full mb-2">
        <h3 class="text-lg font-semibold text-gray-900 dark:text-white">Emily Clark</h3>
        <p class="text-gray-500 dark:text-gray-400">Product Manager</p>
    </div>
</div>

Badges 구성 요소

3D 디자인의 반응형 배지 구성 요소로, 깊이와 어두운 테마를 지원합니다. 각 배지는 Tailwind CSS를 사용하여 디자인된 이름, 이미지 및 설명이 있는 사용자를 나타냅니다.

미리보기 열기

                <div class="grid grid-cols-1 md:grid-cols-3 gap-4 p-4">
    <!-- Badge 1 -->
    <div class="bg-white dark:bg-gray-800 p-4 rounded-lg shadow-lg transform hover:scale-105 transition-transform duration-300">
        <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="rounded-full w-16 h-16 mb-2 shadow-md">
        <h4 class="text-lg font-semibold text-gray-800 dark:text-gray-200">John Doe</h4>
        <p class="text-gray-600 dark:text-gray-400">Web Developer</p>
    </div>
    <!-- Badge 2 -->
    <div class="bg-white dark:bg-gray-800 p-4 rounded-lg shadow-lg transform hover:scale-105 transition-transform duration-300">
        <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="Avatar" class="rounded-full w-16 h-16 mb-2 shadow-md">
        <h4 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Jane Smith</h4>
        <p class="text-gray-600 dark:text-gray-400">Graphic Designer</p>
    </div>
    <!-- Badge 3 -->
    <div class="bg-white dark:bg-gray-800 p-4 rounded-lg shadow-lg transform hover:scale-105 transition-transform duration-300">
        <img src="https://randomuser.me/api/portraits/men/2.jpg" alt="Avatar" class="rounded-full w-16 h-16 mb-2 shadow-md">
        <h4 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Michael Johnson</h4>
        <p class="text-gray-600 dark:text-gray-400">Product Manager</p>
    </div>
    <!-- Badge 4 -->
    <div class="bg-white dark:bg-gray-800 p-4 rounded-lg shadow-lg transform hover:scale-105 transition-transform duration-300">
        <img src="https://randomuser.me/api/portraits/women/2.jpg" alt="Avatar" class="rounded-full w-16 h-16 mb-2 shadow-md">
        <h4 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Sarah Connor</h4>
        <p class="text-gray-600 dark:text-gray-400">UI/UX Designer</p>
    </div>
    <!-- Badge 5 -->
    <div class="bg-white dark:bg-gray-800 p-4 rounded-lg shadow-lg transform hover:scale-105 transition-transform duration-300">
        <img src="https://randomuser.me/api/portraits/men/3.jpg" alt="Avatar" class="rounded-full w-16 h-16 mb-2 shadow-md">
        <h4 class="text-lg font-semibold text-gray-800 dark:text-gray-200">David Lee</h4>
        <p class="text-gray-600 dark:text-gray-400">Content Writer</p>
    </div>
    <!-- Badge 6 -->
    <div class="bg-white dark:bg-gray-800 p-4 rounded-lg shadow-lg transform hover:scale-105 transition-transform duration-300">
        <img src="https://randomuser.me/api/portraits/women/3.jpg" alt="Avatar" class="rounded-full w-16 h-16 mb-2 shadow-md">
        <h4 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Emily Davis</h4>
        <p class="text-gray-600 dark:text-gray-400">Software Engineer</p>
    </div>
</div>

배지 구성 요소 48

머티리얼 디자인 원칙에 따라 설계된 배지 구성요소로, Tailwind CSS를 사용하여 반응형 레이아웃과 어두운 테마를 지원합니다.

미리보기 열기

                <div class="p-4 bg-white dark:bg-gray-800 rounded-lg shadow-md">
    <h2 class="text-xl font-semibold mb-4 dark:text-white">Badges</h2>
    <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4">
        <div class="flex items-center p-3 bg-gray-200 dark:bg-gray-700 rounded-lg shadow transition duration-300 hover:shadow-lg">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-3">
            <span class="text-gray-800 dark:text-gray-200 font-medium">Badge 1</span>
        </div>
        <div class="flex items-center p-3 bg-gray-200 dark:bg-gray-700 rounded-lg shadow transition duration-300 hover:shadow-lg">
            <img src="https://randomuser.me/api/portraits/women/2.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-3">
            <span class="text-gray-800 dark:text-gray-200 font-medium">Badge 2</span>
        </div>
        <div class="flex items-center p-3 bg-gray-200 dark:bg-gray-700 rounded-lg shadow transition duration-300 hover:shadow-lg">
            <img src="https://randomuser.me/api/portraits/men/3.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-3">
            <span class="text-gray-800 dark:text-gray-200 font-medium">Badge 3</span>
        </div>
        <div class="flex items-center p-3 bg-gray-200 dark:bg-gray-700 rounded-lg shadow transition duration-300 hover:shadow-lg">
            <img src="https://randomuser.me/api/portraits/women/4.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-3">
            <span class="text-gray-800 dark:text-gray-200 font-medium">Badge 4</span>
        </div>
        <div class="flex items-center p-3 bg-gray-200 dark:bg-gray-700 rounded-lg shadow transition duration-300 hover:shadow-lg">
            <img src="https://randomuser.me/api/portraits/men/5.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-3">
            <span class="text-gray-800 dark:text-gray-200 font-medium">Badge 5</span>
        </div>
        <div class="flex items-center p-3 bg-gray-200 dark:bg-gray-700 rounded-lg shadow transition duration-300 hover:shadow-lg">
            <img src="https://randomuser.me/api/portraits/women/6.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-3">
            <span class="text-gray-800 dark:text-gray-200 font-medium">Badge 6</span>
        </div>
    </div>
</div>