16 件

プレビュー
アバターの重なり
顔を少し重ねて人数を示す
プレビュー
ブルータルクラスター
太い枠と大文字
プレビュー
キャプション行
印と説明を横に置く
プレビュー
シッククラスター
セリフと細い線の完成例
プレビュー
クラスターピル
余白を一定にして詰める
プレビュー
高密度クラスター
狭い隙間と等幅
プレビュー
編集クラスター
本文幅と見出しの対
プレビュー
入力アドオン
入力と送信を一つの帯に付ける
プレビュー
横一列
アイテムを一点で横に揃える
プレビュー
メディアオブジェクト
図と本文を横に固定する
プレビュー
モダンクラスター
赤と白黒の短い面
プレビュー
パンケーキ行
ヘッダー・本文・フッターを縦に分ける
プレビュー
ソフトクラスター
大きな角丸と淡い面
プレビュー
左右分け
両端に置くだけの一行
プレビュー
スイッチトリオ
幅が足りなければ縦に折る
プレビュー
ツール帯
操作ボタンを横に詰める帯

横一列

アイテムを一点で横に揃える

プレビュー

色彩ダークモノクロ暖色

HTML

<ul>
      <li>Filter</li>
      <li>Sort</li>
      <li>Export</li>
    </ul>

CSS

:root {
  --ink: #241c16;
  --paper: #fffaf1;
  --accent: #d4552b;
  --accent-2: #4338ca;
  --on-accent: #fff;
  --muted: #6a6156;
  --line: #d7ccb8;
  --chip: #efe6d6;
}

ul {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  padding: 0;
  list-style: none;
}

li {
  padding: 0.45rem 0.8rem;
  border: 1px solid var(--line);
  border-radius: 0.7rem;
  background: var(--paper);
}

Tailwind

<style>
:root {
  --ink: #241c16;
  --paper: #fffaf1;
  --accent: #d4552b;
  --accent-2: #4338ca;
  --on-accent: #fff;
  --muted: #6a6156;
  --line: #d7ccb8;
  --chip: #efe6d6;
}
</style>
<ul class="flex gap-[0.75rem] items-center p-0 list-none">
      <li class="p-[0.45rem_0.8rem] [border:1px_solid_var(--line)] rounded-[0.7rem] bg-[var(--paper)]">Filter</li>
      <li class="p-[0.45rem_0.8rem] [border:1px_solid_var(--line)] rounded-[0.7rem] bg-[var(--paper)]">Sort</li>
      <li class="p-[0.45rem_0.8rem] [border:1px_solid_var(--line)] rounded-[0.7rem] bg-[var(--paper)]">Export</li>
    </ul>