Minimal Pill

<div class="nuda-ck-pill">
  <span class="nuda-ck-pill__dot"></span>
  <span class="nuda-ck-pill__text">We use cookies.</span>
  <a class="nuda-ck-pill__link" href="#">Details</a>
  <button class="nuda-ck-pill__ok">OK</button>
  <button class="nuda-ck-pill__close" aria-label="Dismiss">&times;</button>
</div>

.nuda-ck-pill {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  background: #1a1a1a;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 999px;
  padding: .35rem .75rem .35rem .55rem;
  font-size: .73rem;
  animation: _nuda-ckpillIn .4s ease-out;
}

.nuda-ck-pill__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #e4ff54;
  flex-shrink: 0;
}

.nuda-ck-pill__text {
  color: #cfcfcf;
  white-space: nowrap;
}

.nuda-ck-pill__link {
  color: #e4ff54;
  text-decoration: none;
  font-weight: 600;
}

.nuda-ck-pill__link:hover {
  text-decoration: underline;
}

.nuda-ck-pill__ok {
  background: #e4ff54;
  color: #0a0a0a;
  border: none;
  border-radius: 999px;
  padding: .2rem .65rem;
  font-size: .7rem;
  font-weight: 700;
  cursor: pointer;
  transition: opacity .15s;
}

.nuda-ck-pill__ok:hover {
  opacity: .85;
}

.nuda-ck-pill__close {
  background: none;
  border: none;
  color: #555;
  font-size: .9rem;
  cursor: pointer;
  padding: 0;
  line-height: 1;
}

.nuda-ck-pill__close:hover {
  color: #cfcfcf;
}

@keyframes _nuda-ckpillIn {
  from {
    opacity: 0;
    transform: scale(.85);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@media (prefers-reduced-motion:reduce) {
  .nuda-ck-pill {
    animation: none;
  }
}