ボトムタブナビ

<div class="d11-03-01-phone">
          <div class="d11-03-01-screen">
            <div class="d11-03-01-content">アプリ画面</div>
            <div class="d11-03-01-tabbar">
              <button class="d11-03-01-tab is-active" data-i="0" aria-label="ホーム">
                <svg viewBox="0 0 24 24" width="20" height="20"><path fill="currentColor" d="M12 3l9 8h-3v9h-4v-6h-4v6H6v-9H3z"/></svg>
              </button>
              <button class="d11-03-01-tab" data-i="1" aria-label="検索">
                <svg viewBox="0 0 24 24" width="20" height="20"><path fill="none" stroke="currentColor" stroke-width="2" d="M11 4a7 7 0 100 14 7 7 0 000-14zm5 12l4 4"/></svg>
              </button>
              <button class="d11-03-01-tab" data-i="2" aria-label="通知">
                <svg viewBox="0 0 24 24" width="20" height="20"><path fill="currentColor" d="M12 22a2 2 0 002-2h-4a2 2 0 002 2zm7-6v-5a7 7 0 00-5-6.7V4a2 2 0 00-4 0v.3A7 7 0 005 11v5l-2 2v1h18v-1z"/></svg>
              </button>
              <button class="d11-03-01-tab" data-i="3" aria-label="プロフィール">
                <svg viewBox="0 0 24 24" width="20" height="20"><path fill="currentColor" d="M12 12a4 4 0 100-8 4 4 0 000 8zm0 2c-4 0-8 2-8 5v1h16v-1c0-3-4-5-8-5z"/></svg>
              </button>
            </div>
          </div>
        </div>

.d11-03-01-phone{width:190px;height:240px;border-radius:24px;border:6px solid #1f2937;background:#fff;position:relative;overflow:hidden;box-shadow:0 10px 30px rgba(0,0,0,.15)}
        .d11-03-01-screen{position:absolute;inset:0;background:linear-gradient(160deg,#eef2ff,#fff)}
        .d11-03-01-content{position:absolute;top:0;left:0;right:0;bottom:56px;display:flex;align-items:center;justify-content:center;color:#94a3b8;font-size:13px;font-weight:600}
        .d11-03-01-tabbar{position:absolute;left:0;right:0;bottom:0;height:56px;background:#fff;border-top:1px solid #e5e7eb;display:flex;align-items:center;justify-content:space-around}
        .d11-03-01-tab{border:0;background:none;color:#9ca3af;padding:8px;cursor:pointer;display:flex;transition:color .2s}
        .d11-03-01-tab.is-active{color:#4f46e5}
        .d11-03-01-tab.d11-03-01-bounce{animation:d11-03-01-jump .4s ease}
        @keyframes d11-03-01-jump{0%,100%{transform:translateY(0)}40%{transform:translateY(-9px)}70%{transform:translateY(2px)}}

(function(){
        var root=document.getElementById('item-11-03-01');if(!root)return;
        var tabs=root.querySelectorAll('.d11-03-01-tab');
        tabs.forEach(function(t){t.addEventListener('click',function(){
          tabs.forEach(function(x){x.classList.remove('is-active');});
          t.classList.add('is-active');
          t.classList.remove('d11-03-01-bounce');void t.offsetWidth;t.classList.add('d11-03-01-bounce');
        });});
      })();