Tailwind cards

Responsive cards built with Tailwind. Card is a flexible content container with an extensible option for headers, footers, images, and a wide variety of content.


Simple card

Card title

Lorem ipsum dolor sit amet consectetur adipisicing elit. Iure sequi tenetur, voluptatibus harum consequuntur alias quaerat excepturi temporibus nisi commodi, ex, ratione quae soluta! Saepe alias dolores dolorem assumenda totam?

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
    <!-- Card -->
    <div class="shadow-md rounded-md" style="width: 350px;">

      <div class="p-5">
          <h5 class="text-xl font-semibold mb-2">Card title</h5>

          <p class="mb-4">Lorem ipsum dolor sit amet consectetur adipisicing elit. Iure sequi tenetur, voluptatibus
              harum
              consequuntur
              alias quaerat excepturi temporibus nisi commodi, ex, ratione quae soluta! Saepe alias dolores dolorem
              assumenda totam?</p>

          <button
              class="bg-purple-500 text-white active:bg-purple-600 font-bold uppercase text-xs px-4 py-2 rounded shadow hover:shadow-md outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150"
              type="button">
              Button
          </button>

      </div>

  </div>
  <!-- Card -->

Card with image

Card title

Lorem ipsum dolor sit amet consectetur adipisicing elit. Iure sequi tenetur, voluptatibus harum consequuntur alias quaerat excepturi temporibus nisi commodi, ex, ratione quae soluta! Saepe alias dolores dolorem assumenda totam?

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
    <!-- Card -->
    <div class="shadow-md rounded-md overflow-hidden" style="width: 350px;">

      <img src="https://mdbootstrap.com/img/new/standard/city/031.jpg" class="" alt="">

      <div class="p-4">
          <h5 class="text-xl font-semibold mb-2">Card title</h5>

          <p class="mb-4">Lorem ipsum dolor sit amet consectetur adipisicing elit. Iure sequi tenetur, voluptatibus
              harum
              consequuntur
              alias quaerat excepturi temporibus nisi commodi, ex, ratione quae soluta! Saepe alias dolores dolorem
              assumenda totam?</p>

          <button
              class="bg-purple-500 text-white active:bg-purple-600 font-bold uppercase text-xs px-4 py-2 rounded shadow hover:shadow-md outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150"
              type="button">
              Button
          </button>
      </div>
  </div>
  <!-- Card -->

Card with header and footer

Card header
Card title

Lorem ipsum dolor sit amet consectetur adipisicing elit. Iure sequi tenetur, voluptatibus harum consequuntur alias quaerat excepturi temporibus nisi commodi, ex, ratione quae soluta! Saepe alias dolores dolorem assumenda totam?

Card footer
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
    <!-- Card -->
    <div class="shadow-md rounded-md overflow-hidden text-center" style="width: 350px;">

      <div class="py-3 px-5 bg-gray-100">
          Card header
      </div>

      <div class="p-5">
          <h5 class="text-xl font-semibold mb-2">Card title</h5>

          <p class="mb-4">Lorem ipsum dolor sit amet consectetur adipisicing elit. Iure sequi tenetur, voluptatibus
              harum
              consequuntur
              alias quaerat excepturi temporibus nisi commodi, ex, ratione quae soluta! Saepe alias dolores dolorem
              assumenda totam?</p>

          <button
              class="bg-purple-500 text-white active:bg-purple-600 font-bold uppercase text-xs px-4 py-2 rounded shadow hover:shadow-md outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150"
              type="button">
              Button
          </button>

      </div>

      <div class="py-3 px-5 bg-gray-100">
          Card footer
      </div>

  </div>
  <!-- Card -->

No border

Card title

Lorem ipsum dolor sit amet consectetur adipisicing elit. Iure sequi tenetur, voluptatibus harum consequuntur alias quaerat excepturi temporibus nisi commodi, ex, ratione quae soluta! Saepe alias dolores dolorem assumenda totam?

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
    <!-- Card -->
    <div class="" style="width: 350px;">

      <img src="https://mdbootstrap.com/img/new/standard/city/031.jpg" class="rounded-lg shadow-xl mb-4" alt="">

      <div class="text-center">
          <h5 class="text-xl font-semibold mb-2">Card title</h5>

          <p class="mb-4">Lorem ipsum dolor sit amet consectetur adipisicing elit. Iure sequi tenetur, voluptatibus
              harum
              consequuntur
              alias quaerat excepturi temporibus nisi commodi, ex, ratione quae soluta! Saepe alias dolores dolorem
              assumenda totam?</p>

          <button
              class="bg-purple-500 text-white active:bg-purple-600 font-bold uppercase text-xs px-4 py-2 rounded shadow hover:shadow-md outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150"
              type="button">
              Button
          </button>
      </div>
  </div>
  <!-- Card -->