<div class="email-links">
  <div class="email-link">
    <h2>Basic Usage</h2>
    <p>
      <a href="mailto:geoff@geoffgraham.me">
        <svg viewBox="0 0 512 512" width="20" fill="#ffffff" title="envelope">
          <path d="M502.3 190.8c3.9-3.1 9.7-.2 9.7 4.7V400c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V195.6c0-5 5.7-7.8 9.7-4.7 22.4 17.4 52.1 39.5 154.1 113.6 21.1 15.4 56.7 47.8 92.2 47.6 35.7.3 72-32.8 92.3-47.6 102-74.1 131.6-96.3 154-113.7zM256 320c23.2.4 56.6-29.2 73.4-41.4 132.7-96.3 142.8-104.7 173.4-128.7 5.8-4.5 9.2-11.5 9.2-18.9v-19c0-26.5-21.5-48-48-48H48C21.5 64 0 85.5 0 112v19c0 7.4 3.4 14.3 9.2 18.9 30.6 23.9 40.7 32.4 173.4 128.7 16.8 12.2 50.2 41.8 73.4 41.4z" />
        </svg>Email Us
      </a>
    </p>
  </div>

  <div class="email-link">
    <h2>Subject Line</h2>
    <p>
      <a href="mailto:someone@yoursite.com?subject=Mail from Our Site">
        <svg viewBox="0 0 512 512" width="20" fill="#ffffff" title="envelope">
          <path d="M502.3 190.8c3.9-3.1 9.7-.2 9.7 4.7V400c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V195.6c0-5 5.7-7.8 9.7-4.7 22.4 17.4 52.1 39.5 154.1 113.6 21.1 15.4 56.7 47.8 92.2 47.6 35.7.3 72-32.8 92.3-47.6 102-74.1 131.6-96.3 154-113.7zM256 320c23.2.4 56.6-29.2 73.4-41.4 132.7-96.3 142.8-104.7 173.4-128.7 5.8-4.5 9.2-11.5 9.2-18.9v-19c0-26.5-21.5-48-48-48H48C21.5 64 0 85.5 0 112v19c0 7.4 3.4 14.3 9.2 18.9 30.6 23.9 40.7 32.4 173.4 128.7 16.8 12.2 50.2 41.8 73.4 41.4z" />
        </svg>Email Us
      </a>
    </p>
  </div>

  <div class="email-link">
    <h2>CC and BCC</h2>
    <p>
      <a href="mailto:someone@yoursite.com?cc=someoneelse@theirsite.com, another@thatsite.com, me@mysite.com&bcc=lastperson@theirsite.com&subject=Big%20News">
        <svg viewBox="0 0 512 512" width="20" fill="#ffffff" title="envelope">
          <path d="M502.3 190.8c3.9-3.1 9.7-.2 9.7 4.7V400c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V195.6c0-5 5.7-7.8 9.7-4.7 22.4 17.4 52.1 39.5 154.1 113.6 21.1 15.4 56.7 47.8 92.2 47.6 35.7.3 72-32.8 92.3-47.6 102-74.1 131.6-96.3 154-113.7zM256 320c23.2.4 56.6-29.2 73.4-41.4 132.7-96.3 142.8-104.7 173.4-128.7 5.8-4.5 9.2-11.5 9.2-18.9v-19c0-26.5-21.5-48-48-48H48C21.5 64 0 85.5 0 112v19c0 7.4 3.4 14.3 9.2 18.9 30.6 23.9 40.7 32.4 173.4 128.7 16.8 12.2 50.2 41.8 73.4 41.4z" />
        </svg>Email Us
      </a>
    </p>
  </div>

  <div class="email-link">
    <h2>Body Text</h2>
    <p>
      <a href="mailto:someone@yoursite.com?cc=someoneelse@theirsite.com, another@thatsite.com, me@mysite.com&bcc=lastperson@theirsite.com&subject=Big%20News&body=Body-goes-here">
        <svg viewBox="0 0 512 512" width="20" fill="#ffffff" title="envelope">
          <path d="M502.3 190.8c3.9-3.1 9.7-.2 9.7 4.7V400c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V195.6c0-5 5.7-7.8 9.7-4.7 22.4 17.4 52.1 39.5 154.1 113.6 21.1 15.4 56.7 47.8 92.2 47.6 35.7.3 72-32.8 92.3-47.6 102-74.1 131.6-96.3 154-113.7zM256 320c23.2.4 56.6-29.2 73.4-41.4 132.7-96.3 142.8-104.7 173.4-128.7 5.8-4.5 9.2-11.5 9.2-18.9v-19c0-26.5-21.5-48-48-48H48C21.5 64 0 85.5 0 112v19c0 7.4 3.4 14.3 9.2 18.9 30.6 23.9 40.7 32.4 173.4 128.7 16.8 12.2 50.2 41.8 73.4 41.4z" />
        </svg>Email Us
      </a>
    </p>
  </div>
</div>

body {
  background: #333;
  display: grid;
  height: 100vh;
  place-items: center;
  width: 100%;
}

.email-links {
  background: #fff;
  border: 5px solid #222;
  border-radius: 18px;
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(4, 1fr);
  padding: 2rem;
  position: relative;
  width: clamp(600px, 50%, 800px);
}

.email-links:before {
  content: "";
  background: linear-gradient(130deg, #ff7a18, #af002d 41.07%, #319197 76.05%);
  border: 5px solid #222;
  border-radius: 18px;
  height: 100%;
  position: absolute;
  left: 1rem;
  top: 1rem;
  width: 100%;
  z-index: -1;
}

.email-link {
  padding: 1rem;
}

.email-link:not(:last-child) {
  border-right: 1px solid #ccc;
}

.email-link svg {
  filter: drop-shadow(1px 0 5px hsla(170, 0%, 0%, 0.5));
  margin-right: 10px;
  position: relative;
  top: 4px;
}