GDPR Settings List

<div class="nuda-ck-gdpr">
  <div class="nuda-ck-gdpr__header">
    <span class="nuda-ck-gdpr__logo">
      <svg viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.8"
           stroke-linecap="round" stroke-linejoin="round" width="16" height="16">
        <circle cx="10" cy="10" r="8" />
        <path d="M10 6v4l3 3" />
      </svg>
    </span>
    <div>
      <p class="nuda-ck-gdpr__site">acme.io</p>
      <p class="nuda-ck-gdpr__sub">Manage cookie consent</p>
    </div>
  </div>
  <ul class="nuda-ck-gdpr__list">
    <li class="nuda-ck-gdpr__item">
      <span class="nuda-ck-gdpr__name">Strictly Necessary</span>
      <span class="nuda-ck-gdpr__badge" style="color:#e4ff54;border-color:rgba(228,255,84,.25);background:rgba(228,255,84,.08)">Required</span>
    </li>
    <li class="nuda-ck-gdpr__item">
      <span class="nuda-ck-gdpr__name">Functional</span>
      <span class="nuda-ck-gdpr__badge" style="color:#7dd3fc;border-color:rgba(125,211,252,.25);background:rgba(125,211,252,.08)">Optional</span>
    </li>
    <li class="nuda-ck-gdpr__item">
      <span class="nuda-ck-gdpr__name">Performance</span>
      <span class="nuda-ck-gdpr__badge" style="color:#7dd3fc;border-color:rgba(125,211,252,.25);background:rgba(125,211,252,.08)">Optional</span>
    </li>
    <li class="nuda-ck-gdpr__item">
      <span class="nuda-ck-gdpr__name">Targeting</span>
      <span class="nuda-ck-gdpr__badge" style="color:#7dd3fc;border-color:rgba(125,211,252,.25);background:rgba(125,211,252,.08)">Optional</span>
    </li>
  </ul>
  <div class="nuda-ck-gdpr__footer">
    <button class="nuda-ck-gdpr__btn nuda-ck-gdpr__btn--ess">Essentials only</button>
    <button class="nuda-ck-gdpr__btn nuda-ck-gdpr__btn--all">Accept all</button>
  </div>
</div>

.nuda-ck-gdpr {
  background: #141414;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 16px;
  width: 240px;
  overflow: hidden;
  animation: _nuda-ckgdprIn .5s cubic-bezier(.16,1,.3,1) both;
  box-shadow: 0 18px 45px rgba(0,0,0,.55);
}

.nuda-ck-gdpr__header {
  display: flex;
  align-items: center;
  gap: .65rem;
  padding: .85rem 1rem;
  border-bottom: 1px solid rgba(255,255,255,.07);
}

.nuda-ck-gdpr__logo {
  display: inline-flex;
  color: #e4ff54;
  flex-shrink: 0;
}

.nuda-ck-gdpr__site {
  color: #fafafa;
  font-size: .8rem;
  font-weight: 700;
  margin: 0;
}

.nuda-ck-gdpr__sub {
  color: #555;
  font-size: .65rem;
  margin: .1rem 0 0;
}

.nuda-ck-gdpr__list {
  list-style: none;
  margin: 0;
  padding: .3rem 0;
}

.nuda-ck-gdpr__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .45rem 1rem;
}

.nuda-ck-gdpr__name {
  color: #cfcfcf;
  font-size: .73rem;
}

.nuda-ck-gdpr__badge {
  font-size: .62rem;
  font-weight: 600;
  padding: .15rem .45rem;
  border-radius: 999px;
  border: 1px solid;
}

.nuda-ck-gdpr__footer {
  display: flex;
  gap: .4rem;
  padding: .7rem 1rem;
  border-top: 1px solid rgba(255,255,255,.07);
}

.nuda-ck-gdpr__btn {
  flex: 1;
  border: none;
  border-radius: 8px;
  padding: .45rem 0;
  font-size: .72rem;
  font-weight: 700;
  cursor: pointer;
  transition: opacity .15s;
}

.nuda-ck-gdpr__btn:hover {
  opacity: .8;
}

.nuda-ck-gdpr__btn--ess {
  background: rgba(255,255,255,.07);
  color: #777;
  border: 1px solid rgba(255,255,255,.1);
}

.nuda-ck-gdpr__btn--all {
  background: #e4ff54;
  color: #0a0a0a;
}

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

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