パーツ番号 03-07-08 ・ CSSのみ

番号バッジ付きタブ(静止)

各タブに件数バッジを添えた見た目。通知や未読件数を伴うメールUIなどの見本になります。

staticcss

プレビュー

ソースコード

HTML

<div class="tabs">
          <span class="tab">受信箱<span class="badge">3</span></span>
          <span class="tab active">重要<span class="badge b2">12</span></span>
          <span class="tab">アーカイブ<span class="badge">99+</span></span>
        </div>

CSS

.d03-07-08 .tabs{ display:flex; flex-direction:column; gap:8px; width:100%; max-width:220px; }
        .d03-07-08 .tab{ display:flex; align-items:center; justify-content:space-between; padding:9px 12px; font-size:12.5px; color:#6b7280; border-radius:8px; }
        .d03-07-08 .tab.active{ background:#f3f4f6; color:#111827; font-weight:600; }
        .d03-07-08 .badge{ background:#e5e7eb; color:#6b7280; font-size:11px; padding:1px 8px; border-radius:999px; }
        .d03-07-08 .b2{ background:#2563eb; color:#fff; }

クラス名 .d03-07-08 は本ライブラリ内での識別用です。複数のパーツを同じページで使う場合は、重複しないよう名前を変更してください。