Skip to content

Instantly share code, notes, and snippets.

@clqu

clqu/index.html

Last active April 20, 2022 16:55
Show Gist options
  • Save clqu/9a1d8225a828cc9a28ffdc6c0c293a34 to your computer and use it in GitHub Desktop.
Save clqu/9a1d8225a828cc9a28ffdc6c0c293a34 to your computer and use it in GitHub Desktop.
Download ZIP
HTML Card with TailwindCSS
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>TailwindCSS Card</title>
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://pro.fontawesome.com/releases/v6.0.0-beta1/css/all.css" rel="stylesheet" />
</head>
<body>
<style>
@import url(https://fonts.googleapis.com/css?family=Poppins:100,100italic,200,200italic,300,300italic,regular,italic,500,500italic,600,600italic,700,700italic,800,800italic,900,900italic);
html {
font-family: 'Poppins', sans-serif;
}
.bot-card {
--gradient-1: rgb(5, 5, 12);
--gradient-2: rgba(5, 5, 12, 0.9);
--gradient-3: rgba(5, 5, 12, 0.5);
background: linear-gradient(
10deg,
var(--gradient-1),
var(--gradient-1),
var(--gradient-2),
var(--gradient-3)
),
var(--card-banner);
background-size: cover !important;
background-repeat: no-repeat;
background-position: center;
}
</style>
<div class="bg-[#0B0A16] w-screen h-screen">
<div class="p-6 grid grid-cols-4 text-white gap-6">
<div
style="--card-banner: url(https://vcodes.xyz/images/banner.jpg)"
class="group mt-6 bot-card p-5 relative rounded-lg transition-all duration-200 w-full"
>
<div
class="w-full flex justify-start rounded-full flex-shrink-0"
>
<img
class="rounded-full bg-violet-800 dark:bg-black"
width="72"
height="72"
src="https://cdn.discordapp.com/embed/avatars/0.png"
alt="username"
/>
</div>
<div class="flex flex-col mt-3 w-full">
<a class="space-y-1">
<h1
class="flex items-center gap-2 text-zinc-50 w-full font-semibold leading-none text-2xl"
>
Bot name <span>
<i class="fa fa-check-circle"></i>
</span>
</h1>
<p class="text-xs text-zinc-500">231 servers</p>
</a>
<h6
class="w-full font-light mt-1 text-zinc-400 text-sm overflow-auto overflow-small h-12"
>
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</h6>
<div class="mt-4 flex items-center gap-4">
<button class="w-full bg-white font-semibold rounded-lg text-center px-4 py-2 text-black">
View
</button>
<button class="w-full bg-white font-semibold rounded-lg text-center px-4 py-2 text-black">
Invite
</button>
</div>
</div>
<div
class="absolute flex justify-end gap-2 left-5 right-5 top-5 items-center"
>
<div
class="bg-black rounded-md px-2 flex items-center py-1 text-sm"
>
<i class="fal fa-star mr-2 text-blue-500"></i>
4.2
</div>
<div
class="bg-black rounded-md px-2 flex items-center py-1 text-sm"
>
<i class="fal fa-inbox-full mr-2 text-blue-500"></i>
5.8k
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment