Tweet Style
Twitter/X-styled callout — bird/X icon, name, handle, timestamp, and like/retweet glyphs. Native to dev audiences and a great social-proof pattern.
Tweet Style the 13th of 19 designs in the 19 CSS Blockquote Designs collection. The design is implemented in pure CSS — no JavaScript required. Copy the HTML and CSS panels below into your project. Because the demo is pure CSS, it works in any framework or templating engine you happen to use. The design honours prefers-reduced-motion and uses real semantic markup, so it ships accessibility-ready out of the box.
Live preview
The code
<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;
}