Emoji Reaction Bar — HTML CSS JS Snippet

<div class="er-card">
  <div class="er-post">
    <div class="er-avatar">N</div>
    <div>
      <div class="er-author">Nadia Okonkwo</div>
      <div class="er-time">2 hours ago</div>
    </div>
  </div>
  <p class="er-text">Just shipped the new dashboard 🚀 Months of work — would love your honest reactions!</p>

  <div class="er-footer">
    <div class="er-summary">
      <div class="er-cluster" id="erCluster"></div>
      <span class="er-total"><span id="erTotal">24</span> reactions</span>
    </div>

    <div class="er-react" id="erReact">
      <div class="er-pop" id="erPop">
        <button class="er-emoji" data-emoji="👍" data-label="Like" onclick="pickReaction(this)">👍</button>
        <button class="er-emoji" data-emoji="❤️" data-label="Love" onclick="pickReaction(this)">❤️</button>
        <button class="er-emoji" data-emoji="😂" data-label="Haha" onclick="pickReaction(this)">😂</button>
        <button class="er-emoji" data-emoji="😮" data-label="Wow" onclick="pickReaction(this)">😮</button>
        <button class="er-emoji" data-emoji="😢" data-label="Sad" onclick="pickReaction(this)">😢</button>
        <button class="er-emoji" data-emoji="😡" data-label="Angry" onclick="pickReaction(this)">😡</button>
      </div>
      <button class="er-trigger" id="erTrigger" onclick="togglePop(event)"><span class="er-temoji">🙂</span>React</button>
    </div>
  </div>
</div>

*{box-sizing:border-box;margin:0;padding:0}
body{font-family:system-ui,-apple-system,sans-serif;background:#f1f5f9;min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px}
.er-card{background:#fff;border:1px solid #e2e8f0;border-radius:16px;padding:18px;width:100%;max-width:380px;box-shadow:0 14px 44px rgba(15,23,42,.07)}
.er-post{display:flex;align-items:center;gap:11px;margin-bottom:12px}
.er-avatar{width:42px;height:42px;border-radius:50%;background:linear-gradient(135deg,#6366f1,#8b5cf6);color:#fff;font-weight:800;font-size:17px;display:flex;align-items:center;justify-content:center}
.er-author{font-size:14px;font-weight:700;color:#1e293b}
.er-time{font-size:11px;color:#94a3b8}
.er-text{font-size:14px;color:#334155;line-height:1.55;margin-bottom:16px}

.er-footer{display:flex;align-items:center;justify-content:space-between;border-top:1px solid #f1f5f9;padding-top:12px}
.er-summary{display:flex;align-items:center;gap:8px}
.er-cluster{display:flex}
.er-bubble{width:24px;height:24px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(15,23,42,.15);display:flex;align-items:center;justify-content:center;font-size:13px;margin-left:-7px;border:1.5px solid #fff}
.er-bubble:first-child{margin-left:0}
.er-bubble.mine{box-shadow:0 0 0 2px #6366f1;animation:er-bub .3s cubic-bezier(.2,1.6,.4,1)}
@keyframes er-bub{from{transform:scale(0)}to{transform:scale(1)}}
.er-total{font-size:12px;color:#64748b;font-weight:600}

.er-react{position:relative}
.er-trigger{display:flex;align-items:center;gap:6px;background:#f1f5f9;border:none;border-radius:9px;padding:8px 14px;font-size:13px;font-weight:700;color:#475569;cursor:pointer;font-family:inherit;transition:background .15s,color .15s}
.er-trigger:hover{background:#e2e8f0}
.er-trigger.reacted{background:#eef2ff;color:#4f46e5}
.er-temoji{font-size:16px;line-height:1}

.er-pop{position:absolute;bottom:calc(100% + 9px);right:0;display:flex;gap:3px;background:#fff;border:1px solid #e2e8f0;border-radius:999px;padding:6px 8px;box-shadow:0 10px 28px rgba(15,23,42,.18);opacity:0;visibility:hidden;transform:translateY(8px) scale(.9);transform-origin:bottom right;transition:opacity .2s,transform .2s,visibility .2s;z-index:5}
.er-react:hover .er-pop,.er-react.open .er-pop{opacity:1;visibility:visible;transform:translateY(0) scale(1)}
.er-emoji{position:relative;width:38px;height:38px;border:none;background:none;font-size:24px;cursor:pointer;border-radius:50%;transition:transform .15s;line-height:1}
.er-emoji:hover{transform:scale(1.45) translateY(-4px)}
.er-emoji::after{content:attr(data-label);position:absolute;bottom:calc(100% + 4px);left:50%;transform:translateX(-50%);background:#1e293b;color:#fff;font-size:10px;font-weight:700;padding:2px 7px;border-radius:6px;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .15s}
.er-emoji:hover::after{opacity:1}

var REACTIONS = { '👍': 'Like', '❤️': 'Love', '😂': 'Haha', '😮': 'Wow', '😢': 'Sad', '😡': 'Angry' };
var BASE = ['👍', '❤️', '😂'];
var BASE_COUNT = 24;
var myReaction = null;
var react = document.getElementById('erReact');

function togglePop(e) {
  e.stopPropagation();
  react.classList.toggle('open');
}

function closePop() { react.classList.remove('open'); }

function pickReaction(el) {
  var emoji = el.dataset.emoji;
  myReaction = (myReaction === emoji) ? null : emoji;
  updateReact();
  closePop();
}

function updateReact() {
  var trigger = document.getElementById('erTrigger');
  if (myReaction) {
    trigger.innerHTML = '<span class="er-temoji">' + myReaction + '</span>' + REACTIONS[myReaction];
    trigger.classList.add('reacted');
  } else {
    trigger.innerHTML = '<span class="er-temoji">🙂</span>React';
    trigger.classList.remove('reacted');
  }

  document.getElementById('erTotal').textContent = BASE_COUNT + (myReaction ? 1 : 0);

  var list = (myReaction && BASE.indexOf(myReaction) === -1) ? [myReaction].concat(BASE).slice(0, 3) : BASE.slice();
  document.getElementById('erCluster').innerHTML = list.map(function (e) {
    var mine = e === myReaction ? ' mine' : '';
    return '<span class="er-bubble' + mine + '">' + e + '</span>';
  }).join('');
}

document.addEventListener('click', function (e) {
  if (!react.contains(e.target)) closePop();
});

updateReact();