チーム紹介グリッド(部署タブ切替)

<div class="d06-03-12-wrap">
          <div class="d06-03-12-tabs">
            <button class="d06-03-12-tab is-active" data-d="all" type="button">全員</button>
            <button class="d06-03-12-tab" data-d="dev" type="button">開発</button>
            <button class="d06-03-12-tab" data-d="design" type="button">デザイン</button>
          </div>
          <div class="d06-03-12-grid">
            <div class="d06-03-12-mem" data-d="dev"><span class="d06-03-12-av" style="background:linear-gradient(135deg,#6a8dff,#9b6bff)">KT</span><span>木村</span></div>
            <div class="d06-03-12-mem" data-d="design"><span class="d06-03-12-av" style="background:linear-gradient(135deg,#ff8fb1,#a86bff)">HS</span><span>橋本</span></div>
            <div class="d06-03-12-mem" data-d="dev"><span class="d06-03-12-av" style="background:linear-gradient(135deg,#3ec6b0,#5ac8fa)">OY</span><span>大山</span></div>
            <div class="d06-03-12-mem" data-d="design"><span class="d06-03-12-av" style="background:linear-gradient(135deg,#ffb347,#ff7e5f)">FR</span><span>藤原</span></div>
          </div>
        </div>

.d06-03-12-wrap{width:250px}
        .d06-03-12-tabs{display:flex;gap:6px;margin-bottom:16px;justify-content:center}
        .d06-03-12-tab{border:1.5px solid #dde2ee;background:#fff;color:#6b7390;font-size:11.5px;font-weight:600;padding:6px 12px;border-radius:16px;cursor:pointer;transition:all .15s}
        .d06-03-12-tab.is-active{background:#6a8dff;border-color:#6a8dff;color:#fff}
        .d06-03-12-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
        .d06-03-12-mem{display:flex;flex-direction:column;align-items:center;gap:6px;font-size:11px;color:#3a4666;transition:opacity .25s,transform .25s}
        .d06-03-12-mem.d06-03-12-hide{opacity:0;transform:scale(.7);pointer-events:none;position:absolute}
        .d06-03-12-av{width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:13px}

(function(){
        var root=document.getElementById('item-06-03-12');if(!root)return;
        var tabs=root.querySelectorAll('.d06-03-12-tab'),mems=root.querySelectorAll('.d06-03-12-mem');
        tabs.forEach(function(t){
          t.addEventListener('click',function(){
            tabs.forEach(function(x){x.classList.remove('is-active');});
            t.classList.add('is-active');
            var d=t.dataset.d;
            mems.forEach(function(m){
              var show=(d==='all'||m.dataset.d===d);
              m.classList.toggle('d06-03-12-hide',!show);
            });
          });
        });
      })();