Skip to content

Instantly share code, notes, and snippets.

@danielhe4rt

danielhe4rt/card-twitter.html

Created December 5, 2025 22:47
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save danielhe4rt/bb7eaeb20363371525d24febcb6abc3c to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save danielhe4rt/bb7eaeb20363371525d24febcb6abc3c to your computer and use it in GitHub Desktop.
Download ZIP
Raw
card-twitter.html
<div class="min-h-screen bg-gray-100 flex items-center justify-center p-4">
<div class="max-w-[550px] bg-white rounded-xl border border-gray-200 overflow-hidden font-sans">
<div class="p-4 pb-0">
<div class="flex items-start justify-between">
<div class="flex gap-3">
<div
class="w-10 h-10 rounded-full bg-black flex items-center justify-center overflow-hidden shrink-0">
<svg viewBox="0 0 24 24" class="w-5 h-5 text-white fill-current">
<path
d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z">
</path>
</svg></div>
<div class="flex flex-col">
<div class="flex items-center gap-1"><span
class="font-bold text-[15px] text-gray-900 hover:underline cursor-pointer">SpaceX</span><span
class="text-yellow-500 text-sm">✓</span></div>
<div class="flex items-center gap-1 text-gray-500 text-[15px]">
<span>@SpaceX</span><span>·</span><span
class="text-blue-500 hover:underline cursor-pointer">Follow</span></div>
</div>
</div><svg viewBox="0 0 24 24" class="w-5 h-5 text-gray-900 fill-current">
<path
d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z">
</path>
</svg>
</div>
</div>
<div class="px-4 py-3">
<p class="text-[15px] text-gray-900 leading-5">At dawn from the gateway to Mars, the launch of Starship's
second flight test</p>
</div>
<div class="mx-4 mb-3 relative rounded-xl overflow-hidden border border-gray-200"><img alt="Tweet media"
class="w-full aspect-video object-cover"
src="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/starship-rocket-launch-at-dawn-with-orange-sky-and-G8FHCf6urchlI1QgSaFGYjOtSNWiua.jpg">
<div class="absolute top-3 right-3"><span
class="bg-black/70 text-white text-xs font-medium px-2.5 py-1.5 rounded">Watch on X</span></div>
<div class="absolute inset-0 flex items-center justify-center">
<div
class="w-16 h-16 bg-blue-500 rounded-full flex items-center justify-center cursor-pointer hover:bg-blue-600 transition-colors">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
class="lucide lucide-play w-7 h-7 text-white fill-white ml-1">
<polygon points="6 3 20 12 6 21 6 3"></polygon>
</svg></div>
</div>
</div>
<div class="px-4 pb-3 flex items-center justify-between text-gray-500 text-[15px]"><span>3:09 PM · Dec 7,
2023</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
class="lucide lucide-info w-4 h-4 cursor-pointer">
<circle cx="12" cy="12" r="10"></circle>
<path d="M12 16v-4"></path>
<path d="M12 8h.01"></path>
</svg></div>
<div class="mx-4 border-t border-gray-200"></div>
<div class="px-4 py-3 flex items-center gap-6"><button
class="flex items-center gap-2 text-gray-500 hover:text-red-500 transition-colors group"><svg
xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
class="lucide lucide-heart w-5 h-5 group-hover:fill-red-500">
<path
d="M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z">
</path>
</svg><span class="text-[13px] font-medium text-gray-900">34.8K</span></button><button
class="flex items-center gap-2 text-gray-500 hover:text-blue-500 transition-colors"><svg
xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
class="lucide lucide-message-circle w-5 h-5">
<path d="M7.9 20A9 9 0 1 0 4 16.1L2 22Z"></path>
</svg><span class="text-[13px] text-gray-500">Reply</span></button><button
class="flex items-center gap-2 text-gray-500 hover:text-blue-500 transition-colors"><svg
xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
class="lucide lucide-link2 w-5 h-5">
<path d="M9 17H7A5 5 0 0 1 7 7h2"></path>
<path d="M15 7h2a5 5 0 1 1 0 10h-2"></path>
<line x1="8" x2="16" y1="12" y2="12"></line>
</svg><span class="text-[13px] text-gray-500">Copy link</span></button></div>
<div class="px-4 pb-4"><button class="text-blue-500 text-[15px] hover:underline">Read 2.6K replies</button>
</div>
</div>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment