シンプルな赤いラベル
<span class="bg-red-500 text-white px-3 py-1 rounded-full text-sm font-semibold">
○○
</span>bg-red-500 → 背景色を赤にするtext-white → 文字色を白にする px-3 py-1 → 水平方向 px-3、垂直方向 py-1 の余白を追加 rounded-full → 角を丸くする（バッジ風） text-sm font-semibold → 文字を小さめ＆少し太字にする
角が四角い赤いラベル
<span class="bg-red-600 text-white px-2 py-1 rounded text-xs font-bold">
○○
</span>rounded → 角を少しだけ丸める text-xs → さらに小さい文字
赤いラベルの中にアイコン＋文字
<span class="bg-red-500 text-white px-3 py-1 rounded-full text-sm font-semibold flex items-center gap-1">
<svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" d="M12 8v4m0 4h.01M12 2a10 10 0 1 0 10 10A10 10 0 0 0 12 2z"></path>
</svg>
○○
</span>flex items-center gap-1 → アイコンと文字を横並び＆間隔を開けるw-4 h-4 → アイコンのサイズを調整
赤い枠だけのラベル（ボーダースタイル）
<span class="border border-red-500 text-red-500 px-3 py-1 rounded-full text-sm font-semibold">
○○
</span>border border-red-500 → 赤い枠を追加 text-red-500 → 文字色も赤にする
コメント