絵文字/リアクションピッカー

<div class="d10-03-09-wrap">
          <div class="d10-03-09-display" id="d10-03-09-display">😊</div>
          <div class="d10-03-09-anchor">
            <button class="d10-03-09-toggle" id="d10-03-09-toggle" aria-label="絵文字を選ぶ">
              <svg viewBox="0 0 24 24" width="16" height="16" fill="#8a6cff"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-3.5 6a1.5 1.5 0 110 3 1.5 1.5 0 010-3zm7 0a1.5 1.5 0 110 3 1.5 1.5 0 010-3zM12 18c-2.3 0-4.3-1.4-5.1-3.4h10.2C16.3 16.6 14.3 18 12 18z"/></svg>
              絵文字
            </button>
            <div class="d10-03-09-panel" id="d10-03-09-panel">
              <button class="d10-03-09-e">😀</button><button class="d10-03-09-e">😍</button><button class="d10-03-09-e">😂</button><button class="d10-03-09-e">🥳</button>
              <button class="d10-03-09-e">😎</button><button class="d10-03-09-e">😢</button><button class="d10-03-09-e">👍</button><button class="d10-03-09-e">🔥</button>
              <button class="d10-03-09-e">🎉</button><button class="d10-03-09-e">❤️</button><button class="d10-03-09-e">✨</button><button class="d10-03-09-e">🙌</button>
            </div>
          </div>
        </div>

.d10-03-09 .d10-03-09-wrap{width:240px;display:flex;flex-direction:column;align-items:center;gap:14px;font-size:12px}
        .d10-03-09 .d10-03-09-display{font-size:44px;line-height:1;transition:transform .2s}
        .d10-03-09 .d10-03-09-anchor{position:relative}
        .d10-03-09 .d10-03-09-toggle{display:inline-flex;align-items:center;gap:5px;border:1px solid #e6e9ef;border-radius:18px;padding:7px 14px;font-size:12px;font-weight:700;color:#8a6cff;background:#fff;cursor:pointer}
        .d10-03-09 .d10-03-09-toggle:hover{background:#f6f3ff}
        .d10-03-09 .d10-03-09-panel{position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%) scale(.9);transform-origin:bottom center;display:grid;grid-template-columns:repeat(4,1fr);gap:2px;padding:8px;background:#fff;border:1px solid #e6e9ef;border-radius:14px;box-shadow:0 8px 24px rgba(0,0,0,.14);opacity:0;pointer-events:none;transition:.18s}
        .d10-03-09 .d10-03-09-panel.on{opacity:1;pointer-events:auto;transform:translateX(-50%) scale(1)}
        .d10-03-09 .d10-03-09-e{border:none;background:none;font-size:19px;cursor:pointer;padding:4px;border-radius:8px;transition:transform .12s}
        .d10-03-09 .d10-03-09-e:hover{transform:scale(1.3);background:#f2f5fb}

(function(){
        var tog=document.getElementById('d10-03-09-toggle'),pan=document.getElementById('d10-03-09-panel'),disp=document.getElementById('d10-03-09-display');
        tog.addEventListener('click',function(e){e.stopPropagation();pan.classList.toggle('on');});
        pan.querySelectorAll('.d10-03-09-e').forEach(function(b){
          b.addEventListener('click',function(){disp.textContent=b.textContent;disp.style.transform='scale(1.4)';setTimeout(function(){disp.style.transform='scale(1)';},180);pan.classList.remove('on');});
        });
        document.addEventListener('click',function(e){if(!pan.contains(e.target)&&e.target!==tog)pan.classList.remove('on');});
      })();