Native-Style Sheet

<div class="nuda-shr-sheet">
  <div class="nuda-shr-sheet__handle"></div>
  <p class="nuda-shr-sheet__title">Share via</p>
  <div class="nuda-shr-sheet__apps">
    <div class="nuda-shr-sheet__app">
      <div class="nuda-shr-sheet__icon nuda-shr-sheet__app--tw" style="background:#000">X</div>
      <span class="nuda-shr-sheet__lbl">X (Twitter)</span>
    </div>
    <div class="nuda-shr-sheet__app">
      <div class="nuda-shr-sheet__icon nuda-shr-sheet__app--wa" style="background:#25d366">WA</div>
      <span class="nuda-shr-sheet__lbl">WhatsApp</span>
    </div>
    <div class="nuda-shr-sheet__app">
      <div class="nuda-shr-sheet__icon nuda-shr-sheet__app--fb" style="background:#1877f2">FB</div>
      <span class="nuda-shr-sheet__lbl">Facebook</span>
    </div>
    <div class="nuda-shr-sheet__app">
      <div class="nuda-shr-sheet__icon nuda-shr-sheet__app--em" style="background:#555">✉</div>
      <span class="nuda-shr-sheet__lbl">Email</span>
    </div>
  </div>
  <button class="nuda-shr-sheet__cancel">Cancel</button>
</div>

.nuda-shr-sheet {
  background: #1a1a1a;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 18px 18px 12px 12px;
  padding: .6rem .75rem .75rem;
  width: 240px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .6rem;
  animation: _nuda-shrsheetUp .25s ease-out;
}

@keyframes _nuda-shrsheetUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

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

.nuda-shr-sheet__handle {
  width: 36px;
  height: 4px;
  background: rgba(255,255,255,.2);
  border-radius: 2px;
}

.nuda-shr-sheet__title {
  color: #777;
  font-size: .72rem;
  font-weight: 500;
  margin: 0;
}

.nuda-shr-sheet__apps {
  display: flex;
  gap: .9rem;
  justify-content: center;
  width: 100%;
}

.nuda-shr-sheet__app {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .3rem;
  cursor: pointer;
}

.nuda-shr-sheet__icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .7rem;
  font-weight: 800;
  color: #fff;
  letter-spacing: -.02em;
}

.nuda-shr-sheet__lbl {
  color: #777;
  font-size: .6rem;
  text-align: center;
  white-space: nowrap;
}

.nuda-shr-sheet__cancel {
  width: 100%;
  background: rgba(255,255,255,.06);
  border: none;
  border-radius: 10px;
  padding: .5rem;
  color: #cfcfcf;
  font-size: .8rem;
  font-weight: 500;
  cursor: pointer;
  transition: background .15s;
}

.nuda-shr-sheet__cancel:hover {
  background: rgba(255,255,255,.1);
}