Tailwind CSS Card

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.


Material Tailwind

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="card">
  <div class="card-header mx-4 -mt-6">
    <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="tailwind-card-image"
      />
    </a>
  </div>
  <div class="card-body">
    <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 class="button button-pink" data-ripple-light="true">
      Read More
    </button>
  </div>
</div>

Simple Card

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).

Material Tailwind

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="card">
  <div class="card-body">
    <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="button button-pink" data-ripple-light="true">
      Read More
    </button>
  </div>
</div>

Card with image inside

The card example below includes an image and avatar component.

tailwind-card-image
Hub
Material Tailwind

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="card">
  <div class="card-header mx-4 mt-4">
    <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="tailwind-card-image"
      />
    </a>
  </div>
  <div class="card-body">
    <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="card-footer">
    <div class="flex">
      <a href="#" class="avatar">
        <img
          alt="Image placeholder"
          src="https://demos.creative-tim.com/material-kit-pro/assets/img/marie.jpg"
        />
      </a>
      <div class="ml-3">
        <span class="mb-0 font-bold text-blue-grey-700">Mathew</span>
        <p class="mb-0 text-xs">Posted on 28 February</p>
      </div>
    </div>
  </div>
</div>

Card Signin

Cards also can be used for Login/Signup pages. See below our Tailwind CSS example:

Sign in

Don't have an account?

<div class="card">
  <div class="card-header mx-4 -mt-6">
    <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="card-body">
    <form action="role">
      <div class="input-group-outline input-group my-3">
        <label class="form-label">Email</label>
        <input type="email" class="form-control" />
      </div>
      <div class="input-group-outline input-group my-3">
        <label class="form-label">Password</label>
        <input type="password" class="form-control" />
      </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="button button-pink w-full">Sign In</button>
    <a href="#">
      <p class="mt-5 mb-0 text-center text-sm">Don&apos;t have an account?</p>
    </a>
  </div>
</div>

Card Horizontal

Our last card example has an horizontal layout. Use it to your projects!

tailwind_card-horizozntal-image
Startups

Lyft launching cross-platform service this week

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="card card-plain">
  <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="tailwind_card-horizozntal-image"
      />
    </div>
    <div class="card-body w-2/3">
      <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>
Edit this page on Github