Badges 구성 요소
블로그 및 콘텐츠 소비를 위한 3D 미적 및 보색 구성표로 설계된 간단하고 반응이 빠른 Badges 구성 요소입니다. 다크 모드를 지원합니다.
HTML 코드
<div class="flex flex-wrap p-5 justify-center">
<div class="m-2 transition-transform transform hover:scale-105 bg-blue-500 dark:bg-blue-700 text-white rounded-lg shadow-lg p-4">
<div class="flex items-center">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-8 h-8 rounded-full mr-2">
<span class="font-semibold">Badge 1</span>
</div>
<p class="text-sm mt-2">This is a description for badge 1.</p>
</div>
<div class="m-2 transition-transform transform hover:scale-105 bg-red-500 dark:bg-red-700 text-white rounded-lg shadow-lg p-4">
<div class="flex items-center">
<img src="https://randomuser.me/api/portraits/women/1.jpg" alt="Avatar" class="w-8 h-8 rounded-full mr-2">
<span class="font-semibold">Badge 2</span>
</div>
<p class="text-sm mt-2">This is a description for badge 2.</p>
</div>
<div class="m-2 transition-transform transform hover:scale-105 bg-green-500 dark:bg-green-700 text-white rounded-lg shadow-lg p-4">
<div class="flex items-center">
<img src="https://randomuser.me/api/portraits/men/2.jpg" alt="Avatar" class="w-8 h-8 rounded-full mr-2">
<span class="font-semibold">Badge 3</span>
</div>
<p class="text-sm mt-2">This is a description for badge 3.</p>
</div>
</div>관련 구성 요소
Badges 구성 요소
스큐어모피즘 스타일, 트라이어딕 색 구성표 및 단순한 복잡성을 갖춘 반응형 Badges 구성 요소로, 어두운 테마를 지원하는 포트폴리오를 위해 설계되었습니다.
파스텔 배지 다크 모드 UI
비즈니스 웹 사이트를 위한 간단하고 반응이 빠른 배지 구성 요소로, 파스텔 색상의 다크 모드 UI를 특징으로 합니다. Tailwind CSS로 설계된 이 제품은 어두운 배경을 사용하여 눈의 피로를 줄이고 반응형 레이아웃을 지원합니다.