Skip to content

Instantly share code, notes, and snippets.

@itznur07

itznur07/index.html

Created December 21, 2022 17:41
Show Gist options
  • Save itznur07/fca5154b4fcc921d61987e6cde45da04 to your computer and use it in GitHub Desktop.
Save itznur07/fca5154b4fcc921d61987e6cde45da04 to your computer and use it in GitHub Desktop.
Download ZIP
user-card tailwind
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>User Card</title>
</head>
<body>
<!-- User Card Component Design -->
<div class="w-full h-screen bg-black bg-[#131b2e] flex justify-center items-center">
<div class="max-w-sm bg-white mx-auto item-center shadow-lg py-6 px-12 rounded flex space-x-6">
<div><img class="block mx-auto h-24 rounded-full sm:mx-0 sm:shrink-0" src="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Ftse1.mm.bing.net%2Fth%3Fid%3DOIP.2i5UaEHaQM3PYAYXQyM1AAAAAA%26pid%3DApi&f=1&ipt=d60d6764e11a2df48a649d3569d15ce7514ea44b3140f3c47cdcdcd633d09c8f&ipo=images" alt=""></div>
<div class="text-center space-y-2 sm:text-left">
<div class="space-y-0.5">
<p class="text-lg text-black font-semibold">
Erin Lindford
</p>
<p class="text-slate-500 font-medium">
Product Engineer
</p>
</div>
<button class="px-4 py-1 text-sm text-purple-600 font-semibold rounded-full border border-purple-200 hover:text-white hover:bg-purple-600 hover:border-transparent focus:outline-none focus:ring-2 focus:ring-purple-600 focus:ring-offset-2">Message</button>
</div>
</div>
</div>
</body>
</html>
Raw
styles
<link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment