Cards
A collection of card examples built with Tailwind CSS and Starting Point UI.
<div class="card">
<div class="card-content grid gap-6">
<div class="grid gap-2">
<h3 class="text-lg/6 font-semibold">Sign Up</h3>
<p class="text-sm/6 text-muted-foreground">Create an account to get started on the platform and unlock all features and benefits.</p>
</div>
<div class="grid grid-cols-2 gap-4">
<button class="btn btn-outline" type="button">
<svg viewBox="0 0 24 24">
<path d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z" fill="#4285F4"></path>
<path d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z" fill="#34A853"></path>
<path d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z" fill="#FBBC05"></path>
<path d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z" fill="#EA4335"></path>
</svg>
Google
</button>
<button class="btn btn-outline" type="button">
<svg fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path fill-rule="evenodd" d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z" clip-rule="evenodd"></path></svg>
GitHub
</button>
</div>
<div class="relative">
<div class="absolute inset-0 flex items-center"><span class="w-full border-t"></span></div>
<div class="relative flex justify-center text-xs uppercase"><span class="bg-card px-2 text-muted-foreground">Or continue with</span></div>
</div>
<div class="grid gap-6">
<div class="grid gap-3">
<div class="flex items-center justify-between"><label class="label" for="email">Email</label></div>
<input id="email" class="input" type="email" placeholder="m@example.com" />
</div>
<div class="grid gap-3">
<div class="flex items-center justify-between"><label class="label" for="password">Password</label></div>
<input id="password" class="input" type="password" />
</div>
<button class="btn" type="submit">Create Account</button>
</div>
</div>
</div>
<div class="card">
<div class="card-content grid gap-6">
<div class="grid gap-2">
<h3 class="text-lg/6 font-semibold">Sign In</h3>
<p class="text-sm/6 text-muted-foreground">Enter your credentials to access your account.</p>
</div>
<div class="grid gap-6">
<div class="grid gap-3">
<div class="flex items-center justify-between"><label class="label" for="email">Email</label></div>
<input id="email" class="input" type="email" placeholder="m@example.com" />
</div>
<div class="grid gap-3">
<div class="flex items-center justify-between">
<label class="label" for="password">Password</label>
<a href="#" class="text-sm underline-offset-4 hover:underline">Forgot password?</a>
</div>
<input id="password" class="input" type="password" />
</div>
<button class="btn" type="submit">Sign In</button>
</div>
<div class="relative">
<div class="absolute inset-0 flex items-center"><span class="w-full border-t"></span></div>
<div class="relative flex justify-center text-xs uppercase"><span class="bg-card px-2 text-muted-foreground">Or continue with</span></div>
</div>
<div class="grid grid-cols-2 gap-4">
<button class="btn btn-outline" type="button">
<svg viewBox="0 0 24 24">
<path d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z" fill="#4285F4"></path>
<path d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z" fill="#34A853"></path>
<path d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z" fill="#FBBC05"></path>
<path d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z" fill="#EA4335"></path>
</svg>
Google
</button>
<button class="btn btn-outline" type="button">
<svg fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path fill-rule="evenodd" d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z" clip-rule="evenodd"></path></svg>
GitHub
</button>
</div>
<p class="text-sm text-center text-muted-foreground">
Don't have an account?
<a href="#" class="text-foreground font-medium underline underline-offset-4">Sign up</a>
</p>
</div>
</div>
<div class="card">
<img src="https://images.pexels.com/photos/7034439/pexels-photo-7034439.jpeg?auto=compress&cs=tinysrgb&w=600" alt="Blog post cover" class="aspect-video object-cover rounded-t-xl" />
<div class="card-content grid gap-6">
<div class="grid gap-2">
<span class="flex items-center gap-1.5 text-xs/5 font-medium text-muted-foreground">
<a href="#">Mar 15, 2024</a>
<span>·</span>
<a href="#">Articles</a>
</span>
<h3 class="text-lg/6 font-semibold">Building Modern Web Applications with Laravel and React</h3>
<p class="text-sm/6 text-muted-foreground">Learn how to build scalable and maintainable web applications using React and modern development practices.</p>
</div>
<div class="flex items-center gap-3">
<img class="avatar" src="https://images.pexels.com/photos/774909/pexels-photo-774909.jpeg?auto=compress&cs=tinysrgb&w=150&h=150&fit=crop" alt="Sarah Johnson" />
<div class="grid gap-1.5">
<span class="text-sm/none font-medium">Sarah Johnson</span>
<span class="text-xs/none text-muted-foreground font-medium">Technical Writer</span>
</div>
</div>
</div>
</div>
<div class="card">
<div class="card-content grid gap-6">
<div class="grid gap-2">
<h3 class="text-lg/6 font-semibold">Premium Plan</h3>
<p class="text-sm/6 text-muted-foreground">Everything you need to scale</p>
</div>
<div class="flex items-baseline gap-1">
<span class="text-4xl font-bold">$29</span>
<span class="text-muted-foreground">/month</span>
</div>
<ul class="grid gap-4 text-sm">
<li class="flex items-center gap-2">
<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-check size-4 text-primary" aria-hidden="true"><path d="M20 6 9 17l-5-5"></path></svg>
Up to 10 team members
</li>
<li class="flex items-center gap-2">
<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-check size-4 text-primary" aria-hidden="true"><path d="M20 6 9 17l-5-5"></path></svg>
50GB cloud storage
</li>
<li class="flex items-center gap-2">
<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-check size-4 text-primary" aria-hidden="true"><path d="M20 6 9 17l-5-5"></path></svg>
Priority email support
</li>
<li class="flex items-center gap-2">
<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-check size-4 text-primary" aria-hidden="true"><path d="M20 6 9 17l-5-5"></path></svg>
Advanced analytics dashboard
</li>
<li class="flex items-center gap-2">
<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-check size-4 text-primary" aria-hidden="true"><path d="M20 6 9 17l-5-5"></path></svg>
API access
</li>
</ul>
<button class="btn">Buy Now</button>
</div>
</div>
<div class="card">
<div class="card-content grid gap-6">
<div class="grid gap-2">
<h3 class="text-lg/6 font-semibold">Share Document</h3>
<p class="text-sm/6 text-muted-foreground">Invite others to view or edit this document and work together seamlessly.</p>
</div>
<div class="flex gap-2">
<input class="input flex-1" type="text" readonly="" value="https://example.com/doc/abc123" />
<button class="btn btn-outline btn-icon">
<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-copy" aria-hidden="true">
<rect width="14" height="14" x="8" y="8" rx="2" ry="2"></rect>
<path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"></path>
</svg>
</button>
</div>
<div class="separator"></div>
<div class="grid gap-6">
<span class="text-sm font-medium">People with access</span>
<div class="flex items-center justify-between gap-4">
<div class="flex items-center gap-3">
<img class="avatar" src="https://images.pexels.com/photos/2773682/pexels-photo-2773682.jpeg?auto=compress&cs=tinysrgb&w=150&h=150&fit=crop" alt="Sarah Johnson" />
<div class="grid gap-1.5">
<span class="text-sm/none font-medium">Sarah Johnson</span>
<span class="text-xs/none text-muted-foreground font-medium">sarah@example.com</span>
</div>
</div>
<select class="select select-sm w-22">
<option value="write">Write</option>
<option value="read">Read</option>
</select>
</div>
<div class="flex items-center justify-between gap-4">
<div class="flex items-center gap-3">
<img class="avatar" src="https://images.pexels.com/photos/2379004/pexels-photo-2379004.jpeg?auto=compress&cs=tinysrgb&w=150&h=150&fit=crop" alt="Michael Chen" />
<div class="grid gap-1.5">
<span class="text-sm/none font-medium">Michael Chen</span>
<span class="text-xs/none text-muted-foreground font-medium">michael@example.com</span>
</div>
</div>
<select class="select select-sm w-22">
<option value="read">Read</option>
<option value="write">Write</option>
</select>
</div>
<div class="flex items-center justify-between gap-4">
<div class="flex items-center gap-3">
<img class="avatar" src="https://images.pexels.com/photos/774909/pexels-photo-774909.jpeg?auto=compress&cs=tinysrgb&w=150&h=150&fit=crop" alt="Emma Wilson" />
<div class="grid gap-1.5">
<span class="text-sm/none font-medium">Emma Wilson</span>
<span class="text-xs/none text-muted-foreground font-medium">emma@example.com</span>
</div>
</div>
<select class="select select-sm w-22">
<option value="read">Read</option>
<option value="write">Write</option>
</select>
</div>
</div>
</div>
</div>
<div class="card">
<div class="card-content grid gap-6">
<div class="grid gap-2">
<h3 class="text-lg/6 font-semibold">Submit Feedback</h3>
<p class="text-sm/6 text-muted-foreground">Share your thoughts to help us improve.</p>
</div>
<div class="grid gap-6">
<div class="grid gap-3">
<div class="flex items-center justify-between"><label class="label" for="title">Title</label></div>
<input id="title" class="input" type="text" placeholder="Feedback title" />
</div>
<div class="grid gap-3">
<div class="flex items-center justify-between"><label class="label" for="type">Type</label></div>
<select id="type" class="select">
<option value="">Select type</option>
<option value="suggestion">Suggestion</option>
<option value="complaint">Complaint</option>
<option value="praise">Praise</option>
</select>
</div>
<div class="grid gap-3">
<div class="flex items-center justify-between"><label class="label" for="description">Description</label></div>
<textarea id="description" class="textarea" placeholder="Tell us more..." rows="4"></textarea>
</div>
<div class="flex justify-end gap-2">
<button class="btn btn-outline" type="button">Cancel</button>
<button class="btn" type="submit">Submit</button>
</div>
</div>
</div>
</div>
<div class="card">
<img src="https://images.pexels.com/photos/11112728/pexels-photo-11112728.jpeg?auto=compress&cs=tinysrgb&w=600" alt="Product" class="aspect-square object-cover rounded-t-xl" />
<div class="card-content grid gap-6">
<div class="grid gap-2">
<span class="flex items-center gap-1.5 text-xs/5 font-medium text-muted-foreground"><a href="#">Furniture</a></span>
<h3 class="text-lg/6 font-semibold">Classic Wooden Chair</h3>
<p class="text-sm/6 text-muted-foreground">Handcrafted solid oak chair with ergonomic design and natural finish.</p>
</div>
<div class="flex items-center gap-2">
<div class="flex gap-1">
<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-star size-4 text-primary fill-primary" aria-hidden="true"><path d="M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z"></path></svg
><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-star size-4 text-primary fill-primary" aria-hidden="true"><path d="M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z"></path></svg
><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-star size-4 text-primary fill-primary" aria-hidden="true"><path d="M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z"></path></svg
><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-star size-4 text-primary fill-primary" aria-hidden="true"><path d="M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z"></path></svg
><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-star size-4 text-muted fill-muted" aria-hidden="true"><path d="M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z"></path></svg>
</div>
<span class="text-sm text-muted-foreground">(128)</span>
</div>
<div class="flex items-center justify-between">
<div class="flex items-baseline gap-2">
<span class="text-lg font-bold">$149</span>
<span class="text-sm text-muted-foreground line-through">$199</span>
</div>
<button class="btn btn-sm">Add to Cart</button>
</div>
</div>
</div>
<div class="card">
<div class="card-content grid gap-6">
<div class="grid gap-2">
<h3 class="text-lg/6 font-semibold">Payment Method</h3>
<p class="text-sm/6 text-muted-foreground">Choose how you'd like to pay for your order.</p>
</div>
<div class="grid grid-cols-3 gap-4">
<label class="relative flex flex-col items-center gap-2 p-4 border rounded-lg cursor-pointer has-checked:border-primary has-checked:bg-primary/5">
<input type="radio" class="sr-only" name="payment" checked="" value="card" />
<svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5" class="size-6"><path stroke-linecap="round" stroke-linejoin="round" d="M2.25 8.25h19.5M2.25 9h19.5m-16.5 5.25h6m-6 2.25h3m-3.75 3h15a2.25 2.25 0 002.25-2.25V6.75A2.25 2.25 0 0019.5 4.5h-15a2.25 2.25 0 00-2.25 2.25v10.5A2.25 2.25 0 004.5 19.5z"></path></svg>
<span class="text-sm font-medium">Card</span>
</label>
<label class="relative flex flex-col items-center gap-2 p-4 border rounded-lg cursor-pointer has-checked:border-primary has-checked:bg-primary/5">
<input type="radio" class="sr-only" name="payment" value="paypal" />
<svg viewBox="0 0 24 24" fill="currentColor" class="size-6"><path d="M7.076 21.337H2.47a.641.641 0 0 1-.633-.74L4.944 3.72a.77.77 0 0 1 .757-.629h6.724c2.332 0 4.063.642 5.143 1.908.503.59.84 1.263 1.003 2.005.17.776.144 1.7-.08 2.744l-.004.015v.042c-.336 1.732-1.017 3.124-2.025 4.14-.958.965-2.232 1.591-3.788 1.86-.616.106-1.284.16-1.987.16H8.33a.77.77 0 0 0-.758.63l-.737 4.665a.641.641 0 0 1-.633.54h-.025l-.001.137z"></path></svg>
<span class="text-sm font-medium">PayPal</span>
</label>
<label class="relative flex flex-col items-center gap-2 p-4 border rounded-lg cursor-pointer has-checked:border-primary has-checked:bg-primary/5">
<input type="radio" class="sr-only" name="payment" value="apple" />
<svg viewBox="0 0 24 24" fill="currentColor" class="size-6"><path d="M12.152 6.896c-.948 0-2.415-1.078-3.96-1.04-2.04.027-3.91 1.183-4.961 3.014-2.117 3.675-.546 9.103 1.519 12.09 1.013 1.454 2.208 3.09 3.792 3.039 1.52-.065 2.09-.987 3.935-.987 1.831 0 2.35.987 3.96.948 1.637-.026 2.676-1.48 3.676-2.948 1.156-1.688 1.636-3.325 1.662-3.415-.039-.013-3.182-1.221-3.22-4.857-.026-3.04 2.48-4.494 2.597-4.559-1.429-2.09-3.623-2.324-4.39-2.376-2-.156-3.675 1.09-4.61 1.09zM15.53 3.83c.843-1.012 1.4-2.427 1.245-3.83-1.207.052-2.662.805-3.532 1.818-.78.896-1.454 2.338-1.273 3.714 1.338.104 2.715-.688 3.559-1.701"></path></svg>
<span class="text-sm font-medium">Apple</span>
</label>
</div>
<div class="grid gap-6">
<div class="grid gap-3">
<div class="flex items-center justify-between"><label class="label" for="cardholder-name">Cardholder Name</label></div>
<input id="cardholder-name" class="input" type="text" placeholder="John Doe" />
</div>
<div class="grid gap-3">
<div class="flex items-center justify-between"><label class="label" for="card-number">Card Number</label></div>
<input id="card-number" class="input" type="text" placeholder="1234 5678 9012 3456" />
</div>
<div class="grid grid-cols-3 gap-4">
<div class="grid gap-3">
<div class="flex items-center justify-between"><label class="label" for="month">Month</label></div>
<input id="month" class="input" type="text" placeholder="MM" />
</div>
<div class="grid gap-3">
<div class="flex items-center justify-between"><label class="label" for="year">Year</label></div>
<input id="year" class="input" type="text" placeholder="YY" />
</div>
<div class="grid gap-3">
<div class="flex items-center justify-between"><label class="label" for="cvv">CVV</label></div>
<input id="cvv" class="input" type="text" placeholder="123" />
</div>
</div>
<button class="btn" type="submit">Continue</button>
</div>
</div>
</div>
<div class="card">
<div class="card-content grid gap-6">
<div class="grid gap-2">
<h3 class="text-lg/6 font-semibold">Notifications</h3>
<p class="text-sm/6 text-muted-foreground">Choose how you want to be notified.</p>
</div>
<div class="grid gap-6">
<div class="flex items-center justify-between gap-4">
<div class="grid gap-1.5">
<span class="text-sm font-medium">Email notifications</span>
<span class="text-xs text-muted-foreground">Receive updates and alerts via email.</span>
</div>
<input class="switch" type="checkbox" role="switch" checked="" />
</div>
<div class="flex items-center justify-between gap-4">
<div class="grid gap-1.5">
<span class="text-sm font-medium">Push notifications</span>
<span class="text-xs text-muted-foreground">Get instant alerts on your mobile device.</span>
</div>
<input class="switch" type="checkbox" role="switch" />
</div>
<div class="flex items-center justify-between gap-4">
<div class="grid gap-1.5">
<span class="text-sm font-medium">Marketing emails</span>
<span class="text-xs text-muted-foreground">Stay informed about new features and offers.</span>
</div>
<input class="switch" type="checkbox" role="switch" />
</div>
</div>
<button class="btn">Save preferences</button>
</div>
</div>
<div class="card">
<img src="https://images.pexels.com/photos/5331154/pexels-photo-5331154.jpeg?auto=compress&cs=tinysrgb&w=600" alt="Album cover" class="aspect-square object-cover rounded-t-xl" />
<div class="card-content grid gap-6">
<div class="grid gap-2 text-center">
<h3 class="text-lg/6 font-semibold">Midnight Dreams</h3>
<p class="text-sm/6 text-muted-foreground">Luna Eclipse</p>
</div>
<div class="grid gap-2">
<div class="h-1 bg-muted rounded-full overflow-hidden"><div class="h-full w-1/3 bg-primary rounded-full"></div></div>
<div class="flex justify-between text-xs text-muted-foreground">
<span>1:23</span>
<span>3:45</span>
</div>
</div>
<div class="flex items-center justify-center gap-4">
<button class="btn btn-ghost btn-icon">
<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-shuffle" aria-hidden="true">
<path d="m18 14 4 4-4 4"></path>
<path d="m18 2 4 4-4 4"></path>
<path d="M2 18h1.973a4 4 0 0 0 3.3-1.7l5.454-8.6a4 4 0 0 1 3.3-1.7H22"></path>
<path d="M2 6h1.972a4 4 0 0 1 3.6 2.2"></path>
<path d="M22 18h-6.041a4 4 0 0 1-3.3-1.8l-.359-.45"></path>
</svg>
</button>
<button class="btn btn-ghost btn-icon">
<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-skip-back" aria-hidden="true">
<path d="M17.971 4.285A2 2 0 0 1 21 6v12a2 2 0 0 1-3.029 1.715l-9.997-5.998a2 2 0 0 1-.003-3.432z"></path>
<path d="M3 20V4"></path>
</svg>
</button>
<button class="btn btn-icon">
<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-pause size-5" aria-hidden="true">
<rect x="14" y="3" width="5" height="18" rx="1"></rect>
<rect x="5" y="3" width="5" height="18" rx="1"></rect>
</svg>
</button>
<button class="btn btn-ghost btn-icon">
<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-skip-forward" aria-hidden="true">
<path d="M21 4v16"></path>
<path d="M6.029 4.285A2 2 0 0 0 3 6v12a2 2 0 0 0 3.029 1.715l9.997-5.998a2 2 0 0 0 .003-3.432z"></path>
</svg>
</button>
<button class="btn btn-ghost btn-icon">
<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-repeat" aria-hidden="true">
<path d="m17 2 4 4-4 4"></path>
<path d="M3 11v-1a4 4 0 0 1 4-4h14"></path>
<path d="m7 22-4-4 4-4"></path>
<path d="M21 13v1a4 4 0 0 1-4 4H3"></path>
</svg>
</button>
</div>
</div>
</div>
<div class="card">
<div class="card-content grid gap-6">
<div class="flex gap-1">
<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-star size-4 text-primary fill-primary" aria-hidden="true"><path d="M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z"></path></svg
><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-star size-4 text-primary fill-primary" aria-hidden="true"><path d="M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z"></path></svg
><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-star size-4 text-primary fill-primary" aria-hidden="true"><path d="M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z"></path></svg
><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-star size-4 text-primary fill-primary" aria-hidden="true"><path d="M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z"></path></svg
><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-star size-4 text-primary fill-primary" aria-hidden="true"><path d="M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z"></path></svg>
</div>
<p class="text-sm/6 text-muted-foreground">Starting Point UI has transformed how we build interfaces. The components are beautifully designed and easy to customize.</p>
<div class="flex items-center gap-3">
<img class="avatar" src="https://images.pexels.com/photos/774909/pexels-photo-774909.jpeg?auto=compress&cs=tinysrgb&w=150&h=150&fit=crop" alt="Sarah Johnson" />
<div class="grid gap-1.5">
<span class="text-sm/none font-medium">Sarah Johnson</span>
<span class="text-xs/none text-muted-foreground font-medium">Product Designer</span>
</div>
</div>
</div>
</div>
<div class="card">
<div class="card-content grid gap-6">
<img src="https://images.pexels.com/photos/2773682/pexels-photo-2773682.jpeg?auto=compress&cs=tinysrgb&w=400&h=400&fit=crop" alt="Sophie Bennett" class="w-full aspect-square object-cover rounded-xl" />
<div class="grid gap-2">
<h3 class="text-lg/6 font-semibold flex items-center gap-1.5">
Sophie Bennett
<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-badge-check size-5 text-green-500 fill-green-500 stroke-white" aria-hidden="true">
<path d="M3.85 8.62a4 4 0 0 1 4.78-4.77 4 4 0 0 1 6.74 0 4 4 0 0 1 4.78 4.78 4 4 0 0 1 0 6.74 4 4 0 0 1-4.77 4.78 4 4 0 0 1-6.75 0 4 4 0 0 1-4.78-4.77 4 4 0 0 1 0-6.76Z"></path>
<path d="m9 12 2 2 4-4"></path>
</svg>
</h3>
<p class="text-sm/6 text-muted-foreground">Product Designer who focuses on simplicity & usability. Currently designing at Acme Inc.</p>
</div>
<div class="flex items-center gap-6">
<div class="flex items-center gap-2 text-sm text-foreground font-medium">
<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-users size-4 text-muted-foreground" aria-hidden="true">
<path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"></path>
<path d="M16 3.128a4 4 0 0 1 0 7.744"></path>
<path d="M22 21v-2a4 4 0 0 0-3-3.87"></path>
<circle cx="9" cy="7" r="4"></circle>
</svg>
<span>312</span>
</div>
<div class="flex items-center gap-2 text-sm text-foreground font-medium">
<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 size-4 text-muted-foreground" aria-hidden="true"><path d="M2.992 16.342a2 2 0 0 1 .094 1.167l-1.065 3.29a1 1 0 0 0 1.236 1.168l3.413-.998a2 2 0 0 1 1.099.092 10 10 0 1 0-4.777-4.719"></path></svg>
<span>48</span>
</div>
<button class="btn btn-sm ml-auto">
Follow
<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-plus" aria-hidden="true">
<path d="M5 12h14"></path>
<path d="M12 5v14"></path>
</svg>
</button>
</div>
</div>
</div>