Playground

Card

A card element that can be used to display content.

Tailwind Only
Copied!

Product Name

This card element can be used to display a product, post, or any other type of data.

<div class="rounded-lg overflow-hidden border border-neutral-200/60 bg-white text-neutral-700 shadow-sm w-[380px]">
    <div class="relative">
        <img src="https://images.unsplash.com/photo-1542291026-7eec264c27ff?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2370&q=80" class="w-full h-auto" />
    </div>
    <div class="p-7">
        <h2 class="mb-2 text-lg font-bold leading-none tracking-tight">Product Name</h2>
        <p class="mb-5 text-neutral-500">This card element can be used to display a product, post, or any other type of data.</p>
        <button class="inline-flex items-center justify-center w-full h-10 px-4 py-2 text-sm font-medium text-white transition-colors rounded-md focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none bg-neutral-950 hover:bg-neutral-950/90">View Product</button>
    </div>
</div>

Data

Below you will find the data properties available in the x-data attribute of this element.

This particular element does not contain any data, It holds within it only TailwindCSS classes. Ah, but fear not! Should you so desire, you have the power to infuse it with some dynamic magic. Simply add the `x-data` attribute and create your desired functionality.

More Examples

Below you will find more Card examples you may wish to use in your projects.

Copied!
Card Title

Here are the biggest enterprise technology acquisitions of 2021 so far, in reverse chronological order.

<div class="max-w-sm bg-white border rounded-lg shadow-sm p-7 border-neutral-200/60">
    <a href="#_" class="block mb-3">
        <h5 class="text-xl font-bold leading-none tracking-tight text-neutral-900">Card Title</h5>
    </a>
    <p class="mb-4 text-neutral-500">Here are the biggest enterprise technology acquisitions of 2021 so far, in reverse chronological order.</p>
    <button class="inline-flex items-center justify-between w-auto h-10 px-4 py-2 text-sm font-medium text-white transition-colors rounded-md focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none bg-neutral-950 hover:bg-neutral-950/90">
        <span>Card Button</span>
        <svg class="w-4 h-4 ml-2 -mr-1" fill="currentColor" viewBox="0 0 20 20" xmlns="https://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
    </button>
</div>
Copied!
Adam Wathan
@adamwathan

Creator of @tailwindcss. Listener of Slayer. Austin 3:16. BTW, Pines UI is super cool!

673 Following 168.6K Followers 
<div class="relative max-w-sm overflow-hidden bg-white border rounded-lg shadow-sm border-neutral-200/60">
    <img src="https://cdn.devdojo.com/images/august2023/wallpaper.jpeg" class="relative z-20 object-cover w-full h-32" />
    <div class="absolute top-0 z-50 flex items-center w-full mt-2 translate-y-24 px-7 -translate-x-0">
        <div class="w-20 h-20 p-1 bg-white rounded-full">
            <img src="https://cdn.devdojo.com/images/august2023/adam.jpeg" class="w-full h-full rounded-full" />
        </div>
        <a href="https://twitter.com/adamwathan" target="_blank" class="block mt-6 ml-2">
            <h5 class="text-lg font-bold leading-none tracking-tight text-neutral-900">Adam Wathan</h5>
            <small class="block mt-1 text-sm font-medium leading-none text-neutral-500">@adamwathan</small>
        </a>
        <button class="absolute right-0 inline-flex items-center justify-center w-auto px-5 mt-6 text-sm font-medium transition-colors duration-100 rounded-full h-9 mr-7 hover:text-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:opacity-50 bg-neutral-900 disabled:pointer-events-none hover:bg-neutral-800 text-neutral-100">
            <span>Follow</span>
        </button>
    </div>
    <div class="relative pb-6 p-7">
        <p class="mt-12 mb-6 text-neutral-500 text-">Creator of @tailwindcss. Listener of Slayer. Austin 3:16. BTW, Pines UI is super cool!</p>
        <div class="flex items-center justify-between pr-2 text-neutral-500">
            <div class="relative flex w-16">
                <img src="https://cdn.devdojo.com/images/august2023/caleb.jpeg" class="relative z-30 w-8 h-8 border-2 border-white rounded-full" />
                <img src="https://cdn.devdojo.com/images/august2023/taylor.jpeg" class="z-20 w-8 h-8 -translate-x-4 border-2 border-white rounded-full" />
                <img src="https://cdn.devdojo.com/images/august2023/adam.jpeg" class="z-10 w-8 h-8 border-2 border-white rounded-full -translate-x-7" />
            </div>
            <a href="https://twitter.com/adamwathan/following" target="_blank" class="text-sm hover:underline"><strong class="text-neutral-800">673</strong> Following</a>
            <a href="https://twitter.com/adamwathan/followers" target="_blank" class="text-sm hover:underline"><strong class="text-neutral-800">168.6K</strong> Followers</a>
        </div>
    </div>
</div>
Copied!
Card Title

This card element can be used to display a product, post, or any other type of data.

<div class="flex items-center max-w-2xl overflow-hidden bg-white border rounded-lg shadow-sm border-neutral-200/60">
    <img src="https://images.unsplash.com/photo-1542291026-7eec264c27ff?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2370&q=80" class="object-cover w-auto h-48 aspect-video" />
    <div class="p-8">
        <a href="#_" class="block mb-3">
            <h5 class="text-xl font-bold leading-none tracking-tight text-neutral-900">Card Title</h5>
        </a>
        <p class="mb-4 text-sm text-neutral-500">This card element can be used to display a product, post, or any other type of data.</p>
        <button class="inline-flex items-center justify-between w-auto h-10 px-4 py-2 text-sm font-medium text-white transition-colors rounded-md focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none bg-neutral-950 hover:bg-neutral-950/90">
            <span>Card Button</span>
            <svg class="w-4 h-4 ml-2 -mr-1" fill="currentColor" viewBox="0 0 20 20" xmlns="https://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
        </button>
    </div>
</div>
Button Checkbox
A project by DevDojo