Tailwind CSS 3 배지 예

이 섹션에서는 tailwind css 3으로 배지를 만들 것입니다. Tailwind CSS 3로 그림자, 배지 링 스타일로 배지를 만듭니다.

예 1

tailwind v3 단순 및 원형 배지.

<div class="space-x-4">
    <span class="px-3 py-1.5 text-xs text-slate-800 bg-slate-100 rounded"> Badge</span>
    <span class="px-3 py-1.5 text-xs text-purple-800 bg-purple-100 rounded-full"> Badge</span>
    <span class="px-3 py-1.5 text-xs text-cyan-800 bg-cyan-100 rounded-full"> Badge</span>
</div>

테두리 스타일의 tailwind v3 배지.

<div class="space-x-4">
    <span class="px-3 py-1.5 text-xs border border-slate-400 text-slate-800 bg-slate-100 rounded"> Badge</span>
    <span class="px-3 py-1.5 text-xs text-purple-800 bg-purple-100 border border-purple-400 rounded-full"> Badge</span>
    <span class="px-3 py-1.5 text-xs text-cyan-800 bg-cyan-100 rounded-full border border-cyan-400"> Badge</span>
</div>

예 2

링 스타일의 tailwind v3 배지.

<div class="space-x-4">
    <span class="px-3 py-1.5 text-xs ring-2 text-slate-800 bg-slate-100 rounded"> Badge</span>
    <span class="px-3 py-1.5 text-xs ring-2 ring-purple-500 text-purple-800 bg-purple-100 rounded-full"> Badge</span>
    <span class="px-3 py-1.5 text-xs ring-2 ring-cyan-500 text-cyan-800 bg-cyan-100 rounded-full"> Badge</span>
</div>

그림자 스타일이 있는 tailwind v3 배지.

<div class="space-x-4">
    <span class="px-3 py-1.5 text-xs shadow shadow-slate-500/50 text-slate-800 bg-slate-100 rounded"> Badge</span>
    <span class="px-3 py-1.5 text-xs shadow shadow-purple-500 text-purple-800 bg-purple-100 rounded-full"> Badge</span>
    <span class="px-3 py-1.5 text-xs shadow-lg shadow-cyan-500/40 text-cyan-800 bg-cyan-100 rounded-full"> Badge</span>
</div>

또한 읽기

👉 Tailwind CSS Halloween Buttons Tutorial Example

👉 Tailwind CSS List Style Marker Example

👉 Create a Google Clone UI using Tailwind CSS

👉 Tailwind CSS Use Custom Fonts Example

👉 Tailwind CSS Line Chart Example

👉 Tailwind CSS Gradient Button Example

👉 Tailwind CSS Text Gradient Example

👉 Tailwind CSS Simple POST CRUD UI Example

👉 Tailwind CSS Thank You Page Example

👉 Tailwind CSS 3 Breadcrumb Example

👉 Tailwind CSS 3D Button Example

👉 How to Use Custom Colors in Tailwind CSS

👉 How to Use Strike Tag (cut text) in Tailwind CSS

👉 Tailwind CSS Headings Typography Examples

👉 Tailwind CSS Product List Example

👉 How to Center a Div in Tailwind CSS