네온 팔레트

<div class="wrap">
  <div class="sws" id="sws"></div>
  <div class="badge" id="badge">LIVE</div>
</div>

.wrap{width:min(440px,92%);display:grid;gap:clamp(14px,3.6vmin,22px);justify-items:center}
.sws{display:flex;gap:clamp(8px,2.4vmin,14px)}
.sws i{display:block;width:clamp(24px,7vmin,36px);height:clamp(24px,7vmin,36px);border-radius:8px}
.badge{padding:clamp(8px,2.2vmin,12px) clamp(18px,4.6vmin,26px);border-radius:999px;background:#0a0a10;border:2px solid;font:900 clamp(13px,3.4vmin,17px)/1 ui-monospace,monospace;letter-spacing:.08em;transition:box-shadow .3s,border-color .3s,color .3s}

var COLORS = ['#39ff14', '#ff2ec4', '#00e5ff', '#ffea00', '#ff3860'];
var idx = 0;
var sws = document.getElementById('sws');
sws.innerHTML = COLORS.map(function (_, i) { return '<i id="c' + i + '"></i>'; }).join('');
var cells = COLORS.map(function (_, i) { return document.getElementById('c' + i); });
var badge = document.getElementById('badge');
function render() {
  cells.forEach(function (el, i) { el.style.background = COLORS[i]; el.style.boxShadow = '0 0 ' + (i === idx ? '18px' : '6px') + ' ' + COLORS[i]; });
  var c = COLORS[idx];
  badge.style.color = c;
  badge.style.borderColor = c;
  badge.style.boxShadow = '0 0 6px ' + c + ', 0 0 22px ' + c + ', 0 0 46px ' + c + '55';
}
render();
setInterval(function () { idx = (idx + 1) % COLORS.length; render(); }, 1400);