<figure class="cbq-tweet">
  <header class="cbq-tweet-head">
    <span class="cbq-tweet-avatar" aria-hidden="true">DM</span>
    <span class="cbq-tweet-id">
      <strong>Dana M.</strong>
      <em>@danamcode · 2h</em>
    </span>
    <svg class="cbq-tweet-x" viewBox="0 0 24 24" aria-hidden="true">
      <path
        d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-4.714-6.231-5.401 6.231H2.744l7.73-8.835L2.25 2.25h6.962l4.265 5.638L18.244 2.25z"
        fill="currentColor"
      />
    </svg>
  </header>
  <blockquote>
    <p>
      I would rather read codefronts than write CSS from scratch in 2026, and that's a hill I'm
      willing to die on.
    </p>
  </blockquote>
  <footer class="cbq-tweet-foot">
    <span aria-label="42 replies">💬 42</span>
    <span aria-label="231 reposts">🔁 231</span>
    <span aria-label="1.2k likes">♡ 1.2k</span>
  </footer>
</figure>

.cbq-tweet {
  max-width: 340px;
  padding: 14px 16px;
  background: #15151d;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 14px;
  font-family: system-ui, sans-serif;
  color: #e7e9ea;
}

.cbq-tweet-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.cbq-tweet-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #7c6cff, #2eb88a);
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
}

.cbq-tweet-id {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}

.cbq-tweet-id strong {
  font-size: 13.5px;
  font-weight: 700;
  color: #fff;
}

.cbq-tweet-id em {
  font-size: 12px;
  color: #71767b;
  font-style: normal;
}

.cbq-tweet-x {
  width: 18px;
  height: 18px;
  color: #fff;
  flex-shrink: 0;
}

.cbq-tweet blockquote {
  margin: 0 0 10px;
}

.cbq-tweet p {
  margin: 0;
  font-size: 14px;
  line-height: 1.45;
}

.cbq-tweet-foot {
  display: flex;
  gap: 18px;
  font-size: 12px;
  color: #71767b;
}