Use our cards to provide a flexible and extensible content container based on Tailwind CSS with multiple variants and options.
By its definition, a card is a sheet of material that serves as an entry point to more detailed information. Cards usually include a photo, text, and a link about a single subject. They should be easy to scan for relevant and actionable information. Elements, like text and images, should be placed on them in a way that clearly indicates hierarchy.
See below our beautiful card example that you can use in your Tailwind CSS projects.
The time is now for it to be okay to be great. People in this world shun people for being great. For being a bright color. For standing out.
<div class="shadow-card flex flex-col rounded-xl bg-white bg-clip-border">
<div class="mx-4 -mt-6 translate-y-0">
<a href="#" blur-shadow-image="true">
<img
class="w-auto rounded-lg"
src="https://images.unsplash.com/photo-1540553016722-983e48a2cd10?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=800&q=80"
alt="card image"
/>
</a>
</div>
<div class="text-secondary flex-1 p-6">
<a href="#">
<h4 class="font-medium">Material Tailwind</h4>
</a>
<p class="opcacity-60 mb-3">
The time is now for it to be okay to be great. People in this world shun
people for being great. For being a bright color. For standing out.
</p>
<button
className="middle none center rounded-lg bg-pink-500 py-3 px-6 font-sans text-xs font-bold uppercase text-white shadow-md shadow-pink-500/20 transition-all hover:shadow-lg hover:shadow-pink-500/40 focus:opacity-[0.85] focus:shadow-none active:opacity-[0.85] active:shadow-none disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none"
data-ripple-light="true"
>
Read More
</button>
</div>
</div>
Cards support a wide variety of content, including images, text, list groups, links and more.
Below you can see a card example with only text and link (button).
The time is now for it to be okay to be great. People in this world shun people for being great. For being a bright color. For standing out.
<div class="shadow-card flex flex-col rounded-xl bg-white bg-clip-border">
<div class="text-secondary flex-1 p-6">
<a href="#">
<h3>Material Tailwind</h3>
</a>
<p class="mb-3 opacity-60">
The time is now for it to be okay to be great. People in this world shun
people for being great. For being a bright color. For standing out.
</p>
<button
class="middle none center rounded-lg bg-pink-500 py-3 px-6 font-sans text-xs font-bold uppercase text-white shadow-md shadow-pink-500/20 transition-all hover:shadow-lg hover:shadow-pink-500/40 focus:opacity-[0.85] focus:shadow-none active:opacity-[0.85] active:shadow-none disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none"
data-ripple-light="true"
>
Read More
</button>
</div>
</div>
The card example below includes an image and avatar component.
The time is now for it to be okay to be great. People in this world shun people for being great. For being a bright color. For standing out.
<div class="shadow-card flex flex-col rounded-xl bg-white bg-clip-border">
<div class="mx-4 mt-4 translate-y-0">
<a href="#" blur-shadow-image="true">
<img
class="w-auto rounded-lg"
src="https://demos.creative-tim.com/material-kit-pro/assets/img/annie-spratt.jpg"
alt="card image"
/>
</a>
</div>
<div class="text-secondary flex-1 p-6">
<span class="text-sm font-bold uppercase text-orange-500">Hub</span>
<a href="#">
<h5 class="mt-2 font-medium">Material Tailwind</h5>
</a>
<p class="mb-3">
The time is now for it to be okay to be great. People in this world shun
people for being great. For being a bright color. For standing out.
</p>
</div>
<div class="bg-transparent p-6 pt-0">
<div class="flex">
<a href="#" class="inline-flex h-10 w-10">
<img
class="h-full w-full rounded-xl"
src="https://demos.creative-tim.com/material-kit-pro/assets/img/marie.jpg"
alt="avatar"
/>
</a>
<div class="ml-3">
<span class="mb-0 font-bold text-blue-gray-700">Mathew</span>
<p class="mb-0 text-xs">Posted on 28 February</p>
</div>
</div>
</div>
</div>
Cards also can be used for Login/Signup pages. See below our Tailwind CSS example:
<div class="shadow-card flex flex-col rounded-xl bg-white bg-clip-border">
<div class="mx-4 -mt-6 translate-y-0">
<div class="shadow-pink pe-1 rounded-lg bg-pink-500 py-3">
<h4 class="mt-2 mb-0 text-center font-bold text-white">Sign in</h4>
<div class="mt-4 flex">
<a class="button button-text ml-auto" href="#">
<i class="fab fa-facebook-f text-lg text-white"></i>
</a>
<a class="button button-text" href="#">
<i class="fab fa-github text-lg text-white"></i>
</a>
<a class="button button-text mr-auto" href="#">
<i class="fab fa-google text-lg text-white"></i>
</a>
</div>
</div>
</div>
<div class="text-secondary flex-1 p-6">
<form action="role">
<div class="flex flex-col gap-4">
<div class="relative h-10 w-full min-w-[200px]">
<input
type="email"
class="peer h-full w-full rounded-[7px] border border-blue-gray-200 border-t-transparent bg-transparent px-3 py-2.5 font-sans text-sm font-normal text-blue-gray-700 outline outline-0 transition-all placeholder-shown:border placeholder-shown:border-blue-gray-200 placeholder-shown:border-t-blue-gray-200 focus:border-2 focus:border-pink-500 focus:border-t-transparent focus:outline-0 disabled:border-0 disabled:bg-blue-gray-50"
placeholder=" "
/>
<label class="before:content[' '] after:content[' '] pointer-events-none absolute left-0 -top-1.5 flex h-full w-full select-none text-[11px] font-normal leading-tight text-blue-gray-400 transition-all before:pointer-events-none before:mt-[6.5px] before:mr-1 before:box-border before:block before:h-1.5 before:w-2.5 before:rounded-tl-md before:border-t before:border-l before:border-blue-gray-200 before:transition-all after:pointer-events-none after:mt-[6.5px] after:ml-1 after:box-border after:block after:h-1.5 after:w-2.5 after:flex-grow after:rounded-tr-md after:border-t after:border-r after:border-blue-gray-200 after:transition-all peer-placeholder-shown:text-sm peer-placeholder-shown:leading-[3.75] peer-placeholder-shown:text-blue-gray-500 peer-placeholder-shown:before:border-transparent peer-placeholder-shown:after:border-transparent peer-focus:text-[11px] peer-focus:leading-tight peer-focus:text-pink-500 peer-focus:before:border-t-2 peer-focus:before:border-l-2 peer-focus:before:border-pink-500 peer-focus:after:border-t-2 peer-focus:after:border-r-2 peer-focus:after:border-pink-500 peer-disabled:text-transparent peer-disabled:before:border-transparent peer-disabled:after:border-transparent peer-disabled:peer-placeholder-shown:text-blue-gray-500">
Email
</label>
</div>
<div class="relative h-10 w-full min-w-[200px]">
<input
type="password"
class="peer h-full w-full rounded-[7px] border border-blue-gray-200 border-t-transparent bg-transparent px-3 py-2.5 font-sans text-sm font-normal text-blue-gray-700 outline outline-0 transition-all placeholder-shown:border placeholder-shown:border-blue-gray-200 placeholder-shown:border-t-blue-gray-200 focus:border-2 focus:border-pink-500 focus:border-t-transparent focus:outline-0 disabled:border-0 disabled:bg-blue-gray-50"
placeholder=" "
/>
<label class="before:content[' '] after:content[' '] pointer-events-none absolute left-0 -top-1.5 flex h-full w-full select-none text-[11px] font-normal leading-tight text-blue-gray-400 transition-all before:pointer-events-none before:mt-[6.5px] before:mr-1 before:box-border before:block before:h-1.5 before:w-2.5 before:rounded-tl-md before:border-t before:border-l before:border-blue-gray-200 before:transition-all after:pointer-events-none after:mt-[6.5px] after:ml-1 after:box-border after:block after:h-1.5 after:w-2.5 after:flex-grow after:rounded-tr-md after:border-t after:border-r after:border-blue-gray-200 after:transition-all peer-placeholder-shown:text-sm peer-placeholder-shown:leading-[3.75] peer-placeholder-shown:text-blue-gray-500 peer-placeholder-shown:before:border-transparent peer-placeholder-shown:after:border-transparent peer-focus:text-[11px] peer-focus:leading-tight peer-focus:text-pink-500 peer-focus:before:border-t-2 peer-focus:before:border-l-2 peer-focus:before:border-pink-500 peer-focus:after:border-t-2 peer-focus:after:border-r-2 peer-focus:after:border-pink-500 peer-disabled:text-transparent peer-disabled:before:border-transparent peer-disabled:after:border-transparent peer-disabled:peer-placeholder-shown:text-blue-gray-500">
Password
</label>
</div>
</div>
</form>
<div class="form-check form-switch my-7 ml-1 flex items-center">
<input
class="absolute z-10 h-5 w-8 cursor-pointer opacity-0"
data-attribute="toggle"
id="remember"
/>
<div class="form-check-input"></div>
<label class="form-check-label mb-0 ml-2 cursor-pointer">
Remember me
</label>
</div>
<button
class="middle none center rounded-lg bg-pink-500 py-3 px-6 font-sans text-xs font-bold uppercase text-white shadow-md shadow-pink-500/20 transition-all hover:shadow-lg hover:shadow-pink-500/40 focus:opacity-[0.85] focus:shadow-none active:opacity-[0.85] active:shadow-none disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none"
data-ripple-light="true"
>
Sign In
</button>
<a href="#">
<p class="mt-5 mb-0 text-center text-sm">Don't have an account?</p>
</a>
</div>
</div>
Our last card example has an horizontal layout. Use it to your projects!
Like so many organizations these days, Autodesk is a company in transition. It was until recently a traditional boxed software company selling licenses. Yet its own business model disruption is only part of the story — and Read More.
by Megan Rose, 2 days ago
<div class="flex flex-col rounded-xl bg-white bg-transparent bg-clip-border shadow-none">
<div class="flex">
<div class="w-1/3">
<img
class="rounded-lg"
src="https://images.unsplash.com/photo-1536704689578-8fff53d4dfd7?ixlib=rb-1.2.1&raw_url=true&q=80&fm=jpg&crop=entropy&cs=tinysrgb&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=987"
alt="card image"
/>
</div>
<div class="text-secondary w-2/3 flex-1 p-6">
<span class="font-bold uppercase text-blue-500">Startups</span>
<a href="#">
<h3 class="mt-4">Lyft launching cross-platform service this week</h3>
</a>
<p class="mb-5 opacity-80">
Like so many organizations these days, Autodesk is a company in
transition. It was until recently a traditional boxed software company
selling licenses. Yet its own business model disruption is only part
of the story — and <a href="#">Read More</a>.
</p>
<p>
by <span class="font-bold">Megan Rose</span>, 2 days ago
</p>
</div>
</div>
</div>
standard
5 team members
200+ components
40+ built-in pages
1 year free updates
Life time technical support
<div class="relative flex w-full max-w-[20rem] flex-col rounded-xl bg-gradient-to-tr from-pink-600 to-pink-400 bg-clip-border p-8 text-white shadow-md shadow-pink-500/40">
<div class="relative m-0 mb-8 overflow-hidden rounded-none border-b border-white/10 bg-transparent bg-clip-border pb-8 text-center text-gray-700 shadow-none">
<p class="block font-sans text-sm font-normal uppercase leading-normal text-white antialiased">
standard
</p>
<h1 class="mt-6 flex justify-center gap-1 font-sans text-7xl font-normal tracking-normal text-white antialiased">
<span class="mt-2 text-4xl">$</span>29
<span class="self-end text-4xl">/mo</span>
</h1>
</div>
<div class="p-0">
<ul class="flex flex-col gap-4">
<li class="flex items-center gap-4">
<span class="rounded-full border border-white/20 bg-white/20 p-1">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="2"
stroke="currentColor"
aria-hidden="true"
class="h-3 w-3"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M4.5 12.75l6 6 9-13.5"
></path>
</svg>
</span>
<p class="block font-sans text-base font-normal leading-relaxed text-inherit antialiased">
5 team members
</p>
</li>
<li class="flex items-center gap-4">
<span class="rounded-full border border-white/20 bg-white/20 p-1">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="2"
stroke="currentColor"
aria-hidden="true"
class="h-3 w-3"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M4.5 12.75l6 6 9-13.5"
></path>
</svg>
</span>
<p class="block font-sans text-base font-normal leading-relaxed text-inherit antialiased">
200+ components
</p>
</li>
<li class="flex items-center gap-4">
<span class="rounded-full border border-white/20 bg-white/20 p-1">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="2"
stroke="currentColor"
aria-hidden="true"
class="h-3 w-3"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M4.5 12.75l6 6 9-13.5"
></path>
</svg>
</span>
<p class="block font-sans text-base font-normal leading-relaxed text-inherit antialiased">
40+ built-in pages
</p>
</li>
<li class="flex items-center gap-4">
<span class="rounded-full border border-white/20 bg-white/20 p-1">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="2"
stroke="currentColor"
aria-hidden="true"
class="h-3 w-3"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M4.5 12.75l6 6 9-13.5"
></path>
</svg>
</span>
<p class="block font-sans text-base font-normal leading-relaxed text-inherit antialiased">
1 year free updates
</p>
</li>
<li class="flex items-center gap-4">
<span class="rounded-full border border-white/20 bg-white/20 p-1">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="2"
stroke="currentColor"
aria-hidden="true"
class="h-3 w-3"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M4.5 12.75l6 6 9-13.5"
></path>
</svg>
</span>
<p class="block font-sans text-base font-normal leading-relaxed text-inherit antialiased">
Life time technical support
</p>
</li>
</ul>
</div>
<div class="mt-12 p-0">
<button
class="block w-full select-none rounded-lg bg-white py-3.5 px-7 text-center align-middle font-sans text-sm font-bold uppercase text-pink-500 shadow-md shadow-blue-gray-500/10 transition-all hover:scale-[1.02] hover:shadow-lg hover:shadow-blue-gray-500/20 focus:scale-[1.02] focus:opacity-[0.85] focus:shadow-none active:scale-100 active:opacity-[0.85] active:shadow-none disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none"
type="button"
data-ripple-dark="true"
>
Buy Now
</button>
</div>
</div>
Because it's about motivating the doers. Because I'm here to follow my dreams and inspire others.
January 10
<div class="relative flex max-w-[24rem] flex-col overflow-hidden rounded-xl bg-white bg-clip-border text-gray-700 shadow-md">
<div class="relative m-0 overflow-hidden rounded-none bg-transparent bg-clip-border text-gray-700 shadow-none">
<img
src="https://images.unsplash.com/photo-1522202176988-66273c2fd55f?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1471&q=80"
alt="ui/ux review check"
/>
</div>
<div class="p-6">
<h4 class="block font-sans text-2xl font-semibold leading-snug tracking-normal text-blue-gray-900 antialiased">
UI/UX Review Check
</h4>
<p class="mt-3 block font-sans text-xl font-normal leading-relaxed text-gray-700 antialiased">
Because it's about motivating the doers. Because I'm here to follow my
dreams and inspire others.
</p>
</div>
<div class="flex items-center justify-between p-6">
<div class="flex items-center -space-x-3">
<img
alt="natali craig"
src="https://images.unsplash.com/photo-1580489944761-15a19d654956?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1061&q=80"
class="relative inline-block h-9 w-9 rounded-full border-2 border-white object-cover object-center hover:z-10"
/>
<img
alt="candice wu"
src="https://images.unsplash.com/photo-1633332755192-727a05c4013d?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1480&q=80"
class="relative inline-block h-9 w-9 rounded-full border-2 border-white object-cover object-center hover:z-10"
/>
</div>
<p class="block font-sans text-base font-normal leading-relaxed text-inherit antialiased">
January 10
</p>
</div>
</div>
<div class="relative grid h-[40rem] w-full max-w-[28rem] flex-col items-end justify-center overflow-hidden rounded-xl bg-white bg-clip-border text-center text-gray-700">
<div class="absolute inset-0 m-0 h-full w-full overflow-hidden rounded-none bg-transparent bg-[url('https://images.unsplash.com/photo-1552960562-daf630e9278b?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80')] bg-cover bg-clip-border bg-center text-gray-700 shadow-none">
<div class="to-bg-black-10 absolute inset-0 h-full w-full bg-gradient-to-t from-black/80 via-black/50"></div>
</div>
<div class="relative p-6 py-14 px-6 md:px-12">
<h2 class="mb-6 block font-sans text-4xl font-medium leading-[1.5] tracking-normal text-white antialiased">
How we design and code open-source projects?
</h2>
<h5 class="mb-4 block font-sans text-xl font-semibold leading-snug tracking-normal text-gray-400 antialiased">
Candice Wu
</h5>
<img
alt="candice wu"
src="https://images.unsplash.com/photo-1633332755192-727a05c4013d?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1480&q=80"
class="relative inline-block h-[74px] w-[74px] rounded-full border-2 border-white object-cover object-center"
/>
</div>
</div>
5.0
Enter a freshly updated and thoughtfully furnished peaceful home surrounded by ancient trees, stone walls, and open meadows.
<div class="relative flex w-full max-w-[26rem] flex-col rounded-xl bg-white bg-clip-border text-gray-700 shadow-lg">
<div class="relative mx-4 mt-4 overflow-hidden rounded-xl bg-blue-gray-500 bg-clip-border text-white shadow-lg shadow-blue-gray-500/40">
<img
src="https://images.unsplash.com/photo-1499696010180-025ef6e1a8f9?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80"
alt="ui/ux review check"
/>
<div class="to-bg-black-10 absolute inset-0 h-full w-full bg-gradient-to-tr from-transparent via-transparent to-black/60"></div>
<button
class="!absolute top-4 right-4 h-8 max-h-[32px] w-8 max-w-[32px] select-none rounded-full text-center align-middle font-sans text-xs font-medium uppercase text-red-500 transition-all hover:bg-red-500/10 active:bg-red-500/30 disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none"
type="button"
data-ripple-dark="true"
>
<span class="absolute top-1/2 left-1/2 -translate-y-1/2 -translate-x-1/2 transform">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="currentColor"
aria-hidden="true"
class="h-6 w-6"
>
<path d="M11.645 20.91l-.007-.003-.022-.012a15.247 15.247 0 01-.383-.218 25.18 25.18 0 01-4.244-3.17C4.688 15.36 2.25 12.174 2.25 8.25 2.25 5.322 4.714 3 7.688 3A5.5 5.5 0 0112 5.052 5.5 5.5 0 0116.313 3c2.973 0 5.437 2.322 5.437 5.25 0 3.925-2.438 7.111-4.739 9.256a25.175 25.175 0 01-4.244 3.17 15.247 15.247 0 01-.383.219l-.022.012-.007.004-.003.001a.752.752 0 01-.704 0l-.003-.001z"></path>
</svg>
</span>
</button>
</div>
<div class="p-6">
<div class="mb-3 flex items-center justify-between">
<h5 class="block font-sans text-xl font-medium leading-snug tracking-normal text-blue-gray-900 antialiased">
Wooden House, Florida
</h5>
<p class="flex items-center gap-1.5 font-sans text-base font-normal leading-relaxed text-blue-gray-900 antialiased">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="currentColor"
aria-hidden="true"
class="-mt-0.5 h-5 w-5 text-yellow-700"
>
<path
fill-rule="evenodd"
d="M10.788 3.21c.448-1.077 1.976-1.077 2.424 0l2.082 5.007 5.404.433c1.164.093 1.636 1.545.749 2.305l-4.117 3.527 1.257 5.273c.271 1.136-.964 2.033-1.96 1.425L12 18.354 7.373 21.18c-.996.608-2.231-.29-1.96-1.425l1.257-5.273-4.117-3.527c-.887-.76-.415-2.212.749-2.305l5.404-.433 2.082-5.006z"
clip-rule="evenodd"
></path>
</svg>
5.0
</p>
</div>
<p class="block font-sans text-base font-light leading-relaxed text-gray-700 antialiased">
Enter a freshly updated and thoughtfully furnished peaceful home
surrounded by ancient trees, stone walls, and open meadows.
</p>
<div class="group mt-8 inline-flex flex-wrap items-center gap-3">
<span
data-tooltip-target="money"
class="cursor-pointer rounded-full border border-pink-500/5 bg-pink-500/5 p-3 text-pink-500 transition-colors hover:border-pink-500/10 hover:bg-pink-500/10 hover:!opacity-100 group-hover:opacity-70"
>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="currentColor"
aria-hidden="true"
class="h-5 w-5"
>
<path d="M12 7.5a2.25 2.25 0 100 4.5 2.25 2.25 0 000-4.5z"></path>
<path
fill-rule="evenodd"
d="M1.5 4.875C1.5 3.839 2.34 3 3.375 3h17.25c1.035 0 1.875.84 1.875 1.875v9.75c0 1.036-.84 1.875-1.875 1.875H3.375A1.875 1.875 0 011.5 14.625v-9.75zM8.25 9.75a3.75 3.75 0 117.5 0 3.75 3.75 0 01-7.5 0zM18.75 9a.75.75 0 00-.75.75v.008c0 .414.336.75.75.75h.008a.75.75 0 00.75-.75V9.75a.75.75 0 00-.75-.75h-.008zM4.5 9.75A.75.75 0 015.25 9h.008a.75.75 0 01.75.75v.008a.75.75 0 01-.75.75H5.25a.75.75 0 01-.75-.75V9.75z"
clip-rule="evenodd"
></path>
<path d="M2.25 18a.75.75 0 000 1.5c5.4 0 10.63.722 15.6 2.075 1.19.324 2.4-.558 2.4-1.82V18.75a.75.75 0 00-.75-.75H2.25z"></path>
</svg>
</span>
<div
data-tooltip="money"
class="absolute z-50 whitespace-normal break-words rounded-lg bg-black py-1.5 px-3 font-sans text-sm font-normal text-white focus:outline-none"
>
$129 per night
</div>
<span
data-tooltip-target="wifi"
class="cursor-pointer rounded-full border border-pink-500/5 bg-pink-500/5 p-3 text-pink-500 transition-colors hover:border-pink-500/10 hover:bg-pink-500/10 hover:!opacity-100 group-hover:opacity-70"
>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="currentColor"
aria-hidden="true"
class="h-5 w-5"
>
<path
fill-rule="evenodd"
d="M1.371 8.143c5.858-5.857 15.356-5.857 21.213 0a.75.75 0 010 1.061l-.53.53a.75.75 0 01-1.06 0c-4.98-4.979-13.053-4.979-18.032 0a.75.75 0 01-1.06 0l-.53-.53a.75.75 0 010-1.06zm3.182 3.182c4.1-4.1 10.749-4.1 14.85 0a.75.75 0 010 1.061l-.53.53a.75.75 0 01-1.062 0 8.25 8.25 0 00-11.667 0 .75.75 0 01-1.06 0l-.53-.53a.75.75 0 010-1.06zm3.204 3.182a6 6 0 018.486 0 .75.75 0 010 1.061l-.53.53a.75.75 0 01-1.061 0 3.75 3.75 0 00-5.304 0 .75.75 0 01-1.06 0l-.53-.53a.75.75 0 010-1.06zm3.182 3.182a1.5 1.5 0 012.122 0 .75.75 0 010 1.061l-.53.53a.75.75 0 01-1.061 0l-.53-.53a.75.75 0 010-1.06z"
clip-rule="evenodd"
></path>
</svg>
</span>
<div
data-tooltip="wifi"
class="absolute z-50 whitespace-normal break-words rounded-lg bg-black py-1.5 px-3 font-sans text-sm font-normal text-white focus:outline-none"
>
Free wifi
</div>
<span
data-tooltip-target="bedrooms"
class="cursor-pointer rounded-full border border-pink-500/5 bg-pink-500/5 p-3 text-pink-500 transition-colors hover:border-pink-500/10 hover:bg-pink-500/10 hover:!opacity-100 group-hover:opacity-70"
>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="currentColor"
aria-hidden="true"
class="h-5 w-5"
>
<path d="M11.47 3.84a.75.75 0 011.06 0l8.69 8.69a.75.75 0 101.06-1.06l-8.689-8.69a2.25 2.25 0 00-3.182 0l-8.69 8.69a.75.75 0 001.061 1.06l8.69-8.69z"></path>
<path d="M12 5.432l8.159 8.159c.03.03.06.058.091.086v6.198c0 1.035-.84 1.875-1.875 1.875H15a.75.75 0 01-.75-.75v-4.5a.75.75 0 00-.75-.75h-3a.75.75 0 00-.75.75V21a.75.75 0 01-.75.75H5.625a1.875 1.875 0 01-1.875-1.875v-6.198a2.29 2.29 0 00.091-.086L12 5.43z"></path>
</svg>
</span>
<div
data-tooltip="bedrooms"
class="absolute z-50 whitespace-normal break-words rounded-lg bg-black py-1.5 px-3 font-sans text-sm font-normal text-white focus:outline-none"
>
2 bedrooms
</div>
<span
data-tooltip-target="tv"
class="cursor-pointer rounded-full border border-pink-500/5 bg-pink-500/5 p-3 text-pink-500 transition-colors hover:border-pink-500/10 hover:bg-pink-500/10 hover:!opacity-100 group-hover:opacity-70"
>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="currentColor"
aria-hidden="true"
class="h-5 w-5"
>
<path d="M19.5 6h-15v9h15V6z"></path>
<path
fill-rule="evenodd"
d="M3.375 3C2.339 3 1.5 3.84 1.5 4.875v11.25C1.5 17.16 2.34 18 3.375 18H9.75v1.5H6A.75.75 0 006 21h12a.75.75 0 000-1.5h-3.75V18h6.375c1.035 0 1.875-.84 1.875-1.875V4.875C22.5 3.839 21.66 3 20.625 3H3.375zm0 13.5h17.25a.375.375 0 00.375-.375V4.875a.375.375 0 00-.375-.375H3.375A.375.375 0 003 4.875v11.25c0 .207.168.375.375.375z"
clip-rule="evenodd"
></path>
</svg>
</span>
<div
data-tooltip="tv"
class="absolute z-50 whitespace-normal break-words rounded-lg bg-black py-1.5 px-3 font-sans text-sm font-normal text-white focus:outline-none"
>
64" HDTV
</div>
<span
data-tooltip-target="fire"
class="cursor-pointer rounded-full border border-pink-500/5 bg-pink-500/5 p-3 text-pink-500 transition-colors hover:border-pink-500/10 hover:bg-pink-500/10 hover:!opacity-100 group-hover:opacity-70"
>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="currentColor"
aria-hidden="true"
class="h-5 w-5"
>
<path
fill-rule="evenodd"
d="M12.963 2.286a.75.75 0 00-1.071-.136 9.742 9.742 0 00-3.539 6.177A7.547 7.547 0 016.648 6.61a.75.75 0 00-1.152-.082A9 9 0 1015.68 4.534a7.46 7.46 0 01-2.717-2.248zM15.75 14.25a3.75 3.75 0 11-7.313-1.172c.628.465 1.35.81 2.133 1a5.99 5.99 0 011.925-3.545 3.75 3.75 0 013.255 3.717z"
clip-rule="evenodd"
></path>
</svg>
</span>
<div
data-tooltip="fire"
class="absolute z-50 whitespace-normal break-words rounded-lg bg-black py-1.5 px-3 font-sans text-sm font-normal text-white focus:outline-none"
>
Fire alert
</div>
<span
data-tooltip-target="more"
class="cursor-pointer rounded-full border border-pink-500/5 bg-pink-500/5 p-3 text-pink-500 transition-colors hover:border-pink-500/10 hover:bg-pink-500/10 hover:!opacity-100 group-hover:opacity-70"
>
+20
</span>
<div
data-tooltip="more"
class="absolute z-50 whitespace-normal break-words rounded-lg bg-black py-1.5 px-3 font-sans text-sm font-normal text-white focus:outline-none"
>
And +20 more
</div>
</div>
</div>
<div class="p-6 pt-3">
<button
class="block w-full select-none rounded-lg bg-pink-500 py-3.5 px-7 text-center align-middle font-sans text-sm font-bold uppercase text-white shadow-md shadow-pink-500/20 transition-all hover:shadow-lg hover:shadow-pink-500/40 focus:opacity-[0.85] focus:shadow-none active:opacity-[0.85] active:shadow-none disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none"
type="button"
data-ripple-light="true"
>
Reserve
</button>
</div>
</div>
Frontend Lead @ Google
"I found solution to all my design needs from Creative Tim. I use them as a freelancer in my hobby projects htmlFor fun! And its really affordable, very humble guys !!!"
<div class="relative flex w-full max-w-[26rem] flex-col rounded-xl bg-transparent bg-clip-border text-gray-700 shadow-none">
<div class="relative mx-0 mt-4 flex items-center gap-4 overflow-hidden rounded-xl bg-transparent bg-clip-border pt-0 pb-8 text-gray-700 shadow-none">
<img
src="https://images.unsplash.com/photo-1633332755192-727a05c4013d?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1480&q=80"
alt="candice wu"
class="relative inline-block h-[58px] w-[58px] !rounded-full object-cover object-center"
/>
<div class="flex w-full flex-col gap-0.5">
<div class="flex items-center justify-between">
<h5 class="block font-sans text-xl font-semibold leading-snug tracking-normal text-blue-gray-900 antialiased">
Candice Wu
</h5>
<div class="5 flex items-center gap-0">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="currentColor"
aria-hidden="true"
class="h-5 w-5 text-yellow-700"
>
<path
fill-rule="evenodd"
d="M10.788 3.21c.448-1.077 1.976-1.077 2.424 0l2.082 5.007 5.404.433c1.164.093 1.636 1.545.749 2.305l-4.117 3.527 1.257 5.273c.271 1.136-.964 2.033-1.96 1.425L12 18.354 7.373 21.18c-.996.608-2.231-.29-1.96-1.425l1.257-5.273-4.117-3.527c-.887-.76-.415-2.212.749-2.305l5.404-.433 2.082-5.006z"
clip-rule="evenodd"
></path>
</svg>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="currentColor"
aria-hidden="true"
class="h-5 w-5 text-yellow-700"
>
<path
fill-rule="evenodd"
d="M10.788 3.21c.448-1.077 1.976-1.077 2.424 0l2.082 5.007 5.404.433c1.164.093 1.636 1.545.749 2.305l-4.117 3.527 1.257 5.273c.271 1.136-.964 2.033-1.96 1.425L12 18.354 7.373 21.18c-.996.608-2.231-.29-1.96-1.425l1.257-5.273-4.117-3.527c-.887-.76-.415-2.212.749-2.305l5.404-.433 2.082-5.006z"
clip-rule="evenodd"
></path>
</svg>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="currentColor"
aria-hidden="true"
class="h-5 w-5 text-yellow-700"
>
<path
fill-rule="evenodd"
d="M10.788 3.21c.448-1.077 1.976-1.077 2.424 0l2.082 5.007 5.404.433c1.164.093 1.636 1.545.749 2.305l-4.117 3.527 1.257 5.273c.271 1.136-.964 2.033-1.96 1.425L12 18.354 7.373 21.18c-.996.608-2.231-.29-1.96-1.425l1.257-5.273-4.117-3.527c-.887-.76-.415-2.212.749-2.305l5.404-.433 2.082-5.006z"
clip-rule="evenodd"
></path>
</svg>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="currentColor"
aria-hidden="true"
class="h-5 w-5 text-yellow-700"
>
<path
fill-rule="evenodd"
d="M10.788 3.21c.448-1.077 1.976-1.077 2.424 0l2.082 5.007 5.404.433c1.164.093 1.636 1.545.749 2.305l-4.117 3.527 1.257 5.273c.271 1.136-.964 2.033-1.96 1.425L12 18.354 7.373 21.18c-.996.608-2.231-.29-1.96-1.425l1.257-5.273-4.117-3.527c-.887-.76-.415-2.212.749-2.305l5.404-.433 2.082-5.006z"
clip-rule="evenodd"
></path>
</svg>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="currentColor"
aria-hidden="true"
class="h-5 w-5 text-yellow-700"
>
<path
fill-rule="evenodd"
d="M10.788 3.21c.448-1.077 1.976-1.077 2.424 0l2.082 5.007 5.404.433c1.164.093 1.636 1.545.749 2.305l-4.117 3.527 1.257 5.273c.271 1.136-.964 2.033-1.96 1.425L12 18.354 7.373 21.18c-.996.608-2.231-.29-1.96-1.425l1.257-5.273-4.117-3.527c-.887-.76-.415-2.212.749-2.305l5.404-.433 2.082-5.006z"
clip-rule="evenodd"
></path>
</svg>
</div>
</div>
<p class="block font-sans text-base font-light leading-relaxed text-blue-gray-900 antialiased">
Frontend Lead @ Google
</p>
</div>
</div>
<div class="mb-6 p-0">
<p class="block font-sans text-base font-light leading-relaxed text-inherit antialiased">
"I found solution to all my design needs from Creative Tim. I use them
as a freelancer in my hobby projects for fun! And its really affordable,
very humble guys !!!"
</p>
</div>
</div>