境界を溶かすUI

<button class="bg-primary-500 text-white h-10 px-4 rounded-lg text-[1rem] font-medium hover:bg-primary-700 transition-colors">
  保存する
</button>

<label for="name" class="block text-sm font-medium text-slate-900 mb-1">名前</label>
<input id="name" type="text" placeholder="山田 太郎"
  class="w-full px-3 py-2 text-base border border-slate-300 rounded-lg
  focus:ring-2 focus:ring-primary-500/50 focus:border-primary-500
  caret-primary-500 transition-colors">

<div class="relative">
  <select class="w-full appearance-none px-3 py-2 pr-10 text-base
    border border-slate-300 rounded-lg focus:ring-2
    focus:ring-primary-500/50 focus:border-primary-500
    transition-colors bg-white">
    <option value="">選択してください</option>
  </select>
  <svg class="pointer-events-none absolute right-3 top-1/2
    -translate-y-1/2 w-4 h-4 text-slate-500"
    fill="none" stroke="currentColor" viewBox="0 0 24 24">
    <path stroke-linecap="round" stroke-linejoin="round"
      stroke-width="2" d="M19 9l-7 7-7-7"/>
  </svg>
</div>

<fieldset>
  <legend class="text-sm font-medium text-slate-900 mb-2">通知設定</legend>
  <div class="leading-normal space-y-3">
    <div class="flex items-center gap-2">
      <input id="cb1" type="checkbox" checked
        class="rounded border-slate-300 text-primary-500 focus:ring-primary-500/50"
        style="width:1.125rem;height:1.125rem;">
      <label for="cb1" class="text-sm text-body">メール通知</label>
    </div>
  </div>
</fieldset>

<fieldset>
  <legend class="text-sm font-medium text-slate-900 mb-2">表示モード</legend>
  <div class="leading-normal space-y-3">
    <div class="flex items-center gap-2">
      <input id="rd1" name="display" type="radio" checked
        class="border-slate-300 text-primary-500 focus:ring-primary-500/50"
        style="width:1.125rem;height:1.125rem;">
      <label for="rd1" class="text-sm text-body">リスト表示</label>
    </div>
    <div class="flex items-center gap-2">
      <input id="rd2" name="display" type="radio"
        class="border-slate-300 text-primary-500 focus:ring-primary-500/50"
        style="width:1.125rem;height:1.125rem;">
      <label for="rd2" class="text-sm text-body">グリッド表示</label>
    </div>
  </div>
</fieldset>

<div class="leading-normal flex items-center justify-between">
  <div>
    <p class="text-sm font-medium text-slate-900">メール通知</p>
    <p class="text-sm text-slate-500">新着メールの通知を受け取る</p>
  </div>
  <button role="switch" aria-checked="false" aria-label="メール通知"
    class="relative w-11 h-6 bg-slate-200 rounded-full transition-colors">
    <span class="absolute left-0.5 top-0.5 w-5 h-5 bg-white rounded-full shadow-sm transition-transform"></span>
  </button>
</div>

<div class="relative" id="dp-wrapper">
  <label class="block text-sm font-medium text-slate-900 mb-1">日付</label>
  <button role="combobox" aria-haspopup="dialog" aria-expanded="false"
    class="w-full flex items-center gap-2 rounded-lg border border-slate-300 bg-white px-3 py-2 text-base">
    <svg class="w-5 h-5 text-slate-500" fill="currentColor" viewBox="0 0 24 24">...</svg>
    <span class="flex-1 text-left">日付を選択</span>
    <svg class="w-4 h-4 text-slate-500" fill="currentColor" viewBox="0 0 24 24">...</svg>
  </button>
  <input type="hidden" name="date">
  <div role="dialog" aria-label="カレンダー"
    class="absolute mt-1 w-[320px] bg-white rounded-xl border border-slate-200 shadow-md z-20 p-4">
    <!-- Month Header + Day Grid + Today Button -->
  </div>
</div>

<div class="bg-white rounded-xl border border-slate-200 p-6 shadow-sm">
  <h3 class="text-lg font-semibold text-slate-900">カードタイトル</h3>
  <p class="mt-2 text-sm text-body">カード本文</p>
</div>

<div class="bg-white rounded-xl border border-slate-200 shadow-sm overflow-hidden">
  <table class="w-full">
    <thead><tr class="border-b border-slate-200 bg-gray-50">
      <th scope="col" class="text-left px-6 py-3 text-xs font-medium text-slate-500 uppercase tracking-wider">名前</th>
      <th scope="col" class="text-left px-6 py-3 text-xs font-medium text-slate-500 uppercase tracking-wider">ステータス</th>
    </tr></thead>
    <tbody class="divide-y divide-slate-200">
      <tr class="hover:bg-gray-50 transition-colors">
        <td class="px-6 py-4 text-sm font-medium text-slate-900">山田 太郎</td>
        <td class="px-6 py-4"><span class="inline-flex items-center bg-emerald-50 text-emerald-700 px-3 py-1 rounded-full text-xs font-medium">アクティブ</span></td>
      </tr>
    </tbody>
  </table>
</div>

<div class="bg-white rounded-xl border border-slate-200 shadow-sm divide-y divide-slate-200">
  <div class="flex items-center gap-3 px-6 py-4 hover:bg-gray-50 transition-colors">
    <div class="w-10 h-10 rounded-full bg-primary-50 text-primary-500 font-medium inline-flex items-center justify-center text-sm">YT</div>
    <div class="flex-1 min-w-0">
      <p class="text-sm font-medium text-slate-900">山田 太郎</p>
      <p class="text-sm text-slate-500 truncate">taro@example.com</p>
    </div>
    <span class="inline-flex items-center bg-emerald-50 text-emerald-700 px-3 py-1 rounded-full text-xs font-medium">アクティブ</span>
  </div>
</div>

<span class="inline-flex items-center bg-emerald-50 text-emerald-700
  px-3 py-1 rounded-full text-xs font-medium">完了</span>

<!-- Basic Tag -->
<span role="listitem" class="inline-flex items-center gap-1 px-3 py-1
  rounded-full text-xs font-medium bg-primary-50 text-primary-700">
  デザイン
  <button type="button" aria-label="デザインを削除"
    class="ml-0.5 -mr-1 p-0.5 flex items-center justify-center rounded-full
    text-primary-400 hover:text-primary-500 hover:bg-primary-100
    focus:outline-none focus:ring-2 focus:ring-primary-500/50 transition-colors">
    <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
        d="M6 18L18 6M6 6l12 12"/></svg>
  </button>
</span>

<!-- Filter Chip (Active) -->
<button type="button" role="option" aria-selected="true"
  class="inline-flex items-center gap-1.5 px-3 py-1 rounded-full text-sm
  font-medium border bg-primary-50 border-primary-200 text-primary-700
  focus:outline-none focus:ring-2 focus:ring-primary-500/50 transition-colors">
  <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
      d="M5 13l4 4L19 7"/></svg>
  フロントエンド
</button>

<!-- 写真 -->
<img src="avatar.jpg" alt="山田太郎"
  class="w-10 h-10 rounded-full object-cover"
  role="img" aria-label="山田太郎">

<!-- イニシャル -->
<div class="w-10 h-10 rounded-full bg-primary-50 text-primary-500
  font-medium inline-flex items-center justify-center text-sm"
  role="img" aria-label="山田太郎">YT</div>

<!-- 水平 -->
<hr class="border-t border-slate-200 my-6">

<!-- テキスト付き -->
<div role="separator" class="flex items-center gap-4 my-6">
  <div class="flex-1 border-t border-slate-200"></div>
  <span class="text-sm text-slate-500">または</span>
  <div class="flex-1 border-t border-slate-200"></div>
</div>

<!-- 垂直 -->
<div role="separator" aria-orientation="vertical"
  class="border-l border-slate-200 self-stretch"></div>

<nav aria-label="パンくずリスト">
  <ol class="flex items-center gap-2 text-sm">
    <li><a href="#" class="text-slate-500 hover:text-slate-700">ホーム</a></li>
    <li class="text-slate-400">/</li>
    <li><a href="#" class="text-slate-500 hover:text-slate-700">設定</a></li>
    <li class="text-slate-400">/</li>
    <li><span class="text-slate-900 font-medium">プロフィール</span></li>
  </ol>
</nav>

<nav aria-label="ページネーション" class="flex items-center justify-center gap-2">
  <button aria-label="前のページ" disabled
    class="w-10 h-10 rounded-lg bg-white border border-slate-200 inline-flex items-center justify-center text-slate-400 cursor-not-allowed">
    <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24"><path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"/></svg>
  </button>
  <button aria-current="page" class="w-10 h-10 rounded-lg bg-primary-500 text-white font-medium text-sm">1</button>
  <button class="w-10 h-10 rounded-lg bg-white border border-slate-200 text-slate-700 font-medium text-sm hover:bg-gray-50">2</button>
  <button aria-label="次のページ"
    class="w-10 h-10 rounded-lg bg-white border border-slate-200 inline-flex items-center justify-center text-slate-700 hover:bg-gray-50">
    <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24"><path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/></svg>
  </button>
</nav>

<aside class="w-64 bg-white border-r border-slate-200 flex-shrink-0 flex flex-col h-screen">
  <!-- Header -->
  <div class="px-6 py-4 border-b border-slate-200">
    <span class="text-lg font-bold text-slate-900">App Name</span>
  </div>

  <!-- Navigation -->
  <nav class="flex-1 overflow-y-auto px-4 py-4 space-y-1" aria-label="メインナビゲーション">
    <a href="#" class="flex items-center gap-3 px-4 py-2.5 text-sm font-medium text-primary-500 bg-primary-50 rounded-lg" aria-current="page">
      <!-- Icon --> ダッシュボード
    </a>
    <a href="#" class="flex items-center gap-3 px-4 py-2.5 text-sm font-medium text-body hover:bg-gray-50 rounded-lg transition-colors">
      <!-- Icon --> プロジェクト
    </a>
  </nav>

  <!-- Footer -->
  <div class="px-4 py-4 border-t border-slate-200 mt-auto">
    <div class="flex items-center gap-3">
      <div class="w-8 h-8 bg-primary-50 text-primary-500 rounded-full flex items-center justify-center text-sm font-medium">T</div>
      <span class="text-sm text-slate-700">Taro Yamada</span>
    </div>
  </div>
</aside>

<div role="list" class="flex items-center">
  <!-- Completed -->
  <div role="listitem">
    <div class="w-8 h-8 rounded-full bg-primary-500 text-white inline-flex items-center justify-center">
      <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2">
        <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/>
      </svg>
    </div>
  </div>
  <div class="flex-1 h-0.5 mx-3 bg-primary-500"></div>
  <!-- Active -->
  <div role="listitem">
    <div class="w-8 h-8 rounded-full border-2 border-primary-500 bg-white text-primary-500 font-semibold inline-flex items-center justify-center" aria-current="step">2</div>
  </div>
  <div class="flex-1 h-0.5 mx-3 bg-slate-200"></div>
  <!-- Upcoming -->
  <div role="listitem">
    <div class="w-8 h-8 rounded-full bg-slate-100 text-slate-500 font-medium inline-flex items-center justify-center">3</div>
  </div>
</div>

<!-- CSS -->
<style>
.copy-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 0.75rem;
  width: 40px; height: 40px;
  cursor: pointer;
  transition: transform 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.copy-button:hover { transform: scale(1.05); }
.copy-button:active { transform: scale(0.9); transition: transform 0.1s ease-out; }
.copy-button .cb-icon {
  position: absolute;
  transition: opacity 0.18s ease, transform 0.18s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.copy-button .cb-icon-copy  { opacity: 1; transform: scale(1); }
.copy-button .cb-icon-check { opacity: 0; transform: scale(0.5); }
.copy-button.copied .cb-icon-copy  { opacity: 0; transform: scale(0.5); }
.copy-button.copied .cb-icon-check { opacity: 1; transform: scale(1); }
</style>

<!-- HTML -->
<button class="copy-button" aria-label="コピー" id="copyBtn">
  <svg class="cb-icon cb-icon-copy w-5 h-5" viewBox="0 0 24 24" fill="none"
       stroke="currentColor" stroke-width="2">
    <rect x="3" y="3" width="13" height="13" rx="2.5"/>
    <path d="M8 21h11a2 2 0 0 0 2-2v-11"/>
  </svg>
  <svg class="cb-icon cb-icon-check w-5 h-5" viewBox="0 0 24 24">
    <circle cx="12" cy="12" r="11" fill="currentColor" opacity="0.15"/>
    <polyline points="7 12.5 10.5 16 17 9" fill="none"
              stroke="currentColor" stroke-width="2.2"/>
  </svg>
</button>

<!-- JavaScript -->
<script>
const btn = document.getElementById('copyBtn');
let timer;
btn.addEventListener('click', () => {
  navigator.clipboard.writeText('コピー対象テキスト').catch(() => {});
  btn.classList.add('copied');
  btn.setAttribute('aria-label', 'コピーしました');
  clearTimeout(timer);
  timer = setTimeout(() => {
    btn.classList.remove('copied');
    btn.setAttribute('aria-label', 'コピー');
  }, 2000);
});
</script>

<div class="bg-white rounded-xl border border-slate-200 shadow-sm divide-y divide-slate-200">
  <div>
    <button class="w-full flex items-center justify-between py-4 px-6 text-left text-base font-medium text-slate-900" aria-expanded="false">
      セクションタイトル
      <svg class="w-5 h-5 text-slate-500" fill="currentColor" viewBox="0 0 24 24"><path d="M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6z"/></svg>
    </button>
    <div class="hidden px-6 pb-4">
      <p class="text-base text-body">コンテンツ</p>
    </div>
  </div>
</div>

<div role="status" class="bg-primary-50 border border-primary-200 text-primary-800 rounded-lg p-4 flex items-start gap-3">
  <svg class="w-5 h-5 flex-shrink-0 mt-0.5" fill="currentColor" viewBox="0 0 24 24">...</svg>
  <div><p class="font-medium">お知らせ</p></div>
</div>

<div class="fixed inset-0 bg-black/50 z-40"></div>
<div role="dialog" aria-modal="true" aria-labelledby="modal-title"
  class="fixed inset-0 flex items-center justify-center z-50 p-4">
  <div class="bg-white rounded-xl shadow-xl w-full max-w-sm">
    <!-- Header / Body / Footer -->
  </div>
</div>

<div class="relative inline-block">
  <button type="button" aria-haspopup="true" aria-expanded="false"
    class="inline-flex items-center gap-2 bg-white text-slate-700 border border-slate-200 h-10 px-4 rounded-lg text-[1rem] font-medium hover:bg-gray-50">
    オプション
    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/></svg>
  </button>
  <div role="menu" class="absolute top-full left-0 mt-1 w-48 bg-white rounded-lg border border-slate-200 shadow-md z-20 py-1">
    <button role="menuitem" tabindex="-1" class="w-full text-left px-3 py-2 text-sm text-slate-700 hover:bg-gray-50">編集</button>
    <button role="menuitem" tabindex="-1" class="w-full text-left px-3 py-2 text-sm text-slate-700 hover:bg-gray-50">複製</button>
    <div role="separator" class="border-t border-slate-200 my-1"></div>
    <button role="menuitem" tabindex="-1" class="w-full text-left px-3 py-2 text-sm text-red-600 hover:bg-red-50">削除</button>
  </div>
</div>

<div role="status" aria-live="polite"
  class="flex items-center gap-3 p-4 bg-emerald-50 border border-emerald-200 rounded-lg shadow-sm">
  <svg class="w-6 h-6 text-emerald-600 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20">...</svg>
  <p class="flex-1 text-sm font-medium text-emerald-800">保存しました</p>
  <button aria-label="閉じる" class="text-emerald-400 hover:text-emerald-600">...</button>
</div>

<div class="relative group inline-block">
  <button class="...">ホバー</button>
  <div role="tooltip" class="absolute bottom-full left-1/2 -translate-x-1/2 mb-2
    bg-slate-600 text-white text-sm rounded-lg shadow-sm px-3 py-2
    opacity-0 group-hover:opacity-100 transition-opacity duration-200">
    ツールチップ
  </div>
</div>

<div class="flex items-center justify-between mb-1">
  <span class="text-sm font-medium text-slate-900">アップロード</span>
  <span class="text-sm text-slate-500">72%</span>
</div>
<div class="bg-slate-200 rounded-full h-2" role="progressbar" aria-valuenow="72" aria-valuemin="0" aria-valuemax="100">
  <div class="bg-primary-500 rounded-full h-2 transition-all duration-500" style="width:72%"></div>
</div>