Card

TailPro cards provide a flexible and extensible content container with multiple variants and options.

Default card

TailPro default vertical card.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore ducimus est, excepturi nam odit possimus.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore ducimus est, excepturi nam odit possimus.

                
                  <!-- card -->
                  <div class="flex flex-col bg-white dark:bg-gray-800 mb-12 rounded overflow-hidden shadow">
                    <div class="relative overflow-hidden">
                      <a href="#">
                        <div class="absolute inset-0 hover:bg-black opacity-0 transition duration-700 hover:opacity-20"></div>
                        <img class="max-w-full h-auto" src="src/img-min/blog/blog_1.jpg" alt="alt title">
                      </a>
                    </div>
                    <div class="py-6 px-8 flex-1">
                      <div class="mb-2">
                        <h3 class="text-xl leading-normal mb-4 font-bold text-gray-800 dark:text-gray-200"><a href="#" class="hover:text-blue-700 dark:hover:text-gray-100">New web design layout trends in 2021</a></h3>
                        <div class="text-gray-600">
                          <svg class="bi bi-calendar ltr:mr-2 rtl:ml-2 inline-block" width=".8rem" height=".8rem" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                              <path fill-rule="evenodd" d="M14 0H2a2 2 0 00-2 2v12a2 2 0 002 2h12a2 2 0 002-2V2a2 2 0 00-2-2zM1 3.857C1 3.384 1.448 3 2 3h12c.552 0 1 .384 1 .857v10.286c0 .473-.448.857-1 .857H2c-.552 0-1-.384-1-.857V3.857z" clip-rule="evenodd"></path>
                              <path fill-rule="evenodd" d="M6.5 7a1 1 0 100-2 1 1 0 000 2zm3 0a1 1 0 100-2 1 1 0 000 2zm3 0a1 1 0 100-2 1 1 0 000 2zm-9 3a1 1 0 100-2 1 1 0 000 2zm3 0a1 1 0 100-2 1 1 0 000 2zm3 0a1 1 0 100-2 1 1 0 000 2zm3 0a1 1 0 100-2 1 1 0 000 2zm-9 3a1 1 0 100-2 1 1 0 000 2zm3 0a1 1 0 100-2 1 1 0 000 2zm3 0a1 1 0 100-2 1 1 0 000 2z" clip-rule="evenodd"></path>
                            </svg><span>04 May 2020</span>
                        </div>
                      </div>
                      <p class="text-gray-500">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore ducimus est, excepturi nam odit possimus.</p>
                    </div>
                  </div><!-- end card -->

                  <!-- card -->
                  <div class="flex flex-col bg-white dark:bg-gray-800 mb-12 rounded overflow-hidden shadow">
                    <div class="relative overflow-hidden">
                      <a href="#">
                        <div class="absolute inset-0 hover:bg-black opacity-0 transition duration-700 hover:opacity-20"></div>
                        <img class="max-w-full h-auto" src="src/img-min/blog/blog_1.jpg" alt="alt title">
                      </a>
                    </div>
                    <div class="py-6 flex-1">
                      <div class="mb-2">
                        <h3 class="text-xl leading-normal mb-4 font-bold text-gray-800 dark:text-gray-200"><a href="#" class="hover:text-blue-700 dark:hover:text-gray-100">New web design layout trends in 2021</a></h3>
                        <div class="text-gray-600">
                          <svg class="bi bi-calendar ltr:mr-2 rtl:ml-2 inline-block" width=".8rem" height=".8rem" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                              <path fill-rule="evenodd" d="M14 0H2a2 2 0 00-2 2v12a2 2 0 002 2h12a2 2 0 002-2V2a2 2 0 00-2-2zM1 3.857C1 3.384 1.448 3 2 3h12c.552 0 1 .384 1 .857v10.286c0 .473-.448.857-1 .857H2c-.552 0-1-.384-1-.857V3.857z" clip-rule="evenodd"></path>
                              <path fill-rule="evenodd" d="M6.5 7a1 1 0 100-2 1 1 0 000 2zm3 0a1 1 0 100-2 1 1 0 000 2zm3 0a1 1 0 100-2 1 1 0 000 2zm-9 3a1 1 0 100-2 1 1 0 000 2zm3 0a1 1 0 100-2 1 1 0 000 2zm3 0a1 1 0 100-2 1 1 0 000 2zm3 0a1 1 0 100-2 1 1 0 000 2zm-9 3a1 1 0 100-2 1 1 0 000 2zm3 0a1 1 0 100-2 1 1 0 000 2zm3 0a1 1 0 100-2 1 1 0 000 2z" clip-rule="evenodd"></path>
                            </svg><span>04 May 2020</span>
                        </div>
                      </div>
                      <p class="text-gray-500">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore ducimus est, excepturi nam odit possimus.</p>
                    </div>
                  </div><!-- end card -->
                
              

Horizontal card

TailPro default horizontal card.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore ducimus est, excepturi nam odit possimus.

                
                  <!-- card start -->
                  <div class="flex flex-col md:flex-row bg-white dark:bg-gray-800 mb-12 rounded overflow-hidden">
                    <div class="relative overflow-hidden md:flex-shrink md:w-1/3 rounded">
                      <a href="#">
                        <div class="absolute inset-0 hover:bg-black opacity-0 transition duration-700 hover:opacity-20"></div>
                        <img class="max-w-full h-auto" src="src/img-min/blog/blog_1.jpg" alt="alt title">
                      </a>
                    </div>
                    <div class="pt-6 flex-1 md:flex-shrink md:w-2/3 md:ltr:pl-8 md:rtl:pr-8 md:pt-0">
                      <div class="mb-2">
                        <h3 class="text-2xl leading-normal mb-4 font-semibold text-gray-800 dark:text-gray-200"><a href="#" class="hover:text-blue-700 dark:hover:text-gray-100">New web design layout trends in 2021</a></h3>
                        <div class="text-gray-600">
                          <svg class="bi bi-calendar ltr:mr-2 rtl:ml-2 inline-block" width=".8rem" height=".8rem" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                              <path fill-rule="evenodd" d="M14 0H2a2 2 0 00-2 2v12a2 2 0 002 2h12a2 2 0 002-2V2a2 2 0 00-2-2zM1 3.857C1 3.384 1.448 3 2 3h12c.552 0 1 .384 1 .857v10.286c0 .473-.448.857-1 .857H2c-.552 0-1-.384-1-.857V3.857z" clip-rule="evenodd"></path>
                              <path fill-rule="evenodd" d="M6.5 7a1 1 0 100-2 1 1 0 000 2zm3 0a1 1 0 100-2 1 1 0 000 2zm3 0a1 1 0 100-2 1 1 0 000 2zm-9 3a1 1 0 100-2 1 1 0 000 2zm3 0a1 1 0 100-2 1 1 0 000 2zm3 0a1 1 0 100-2 1 1 0 000 2zm3 0a1 1 0 100-2 1 1 0 000 2zm-9 3a1 1 0 100-2 1 1 0 000 2zm3 0a1 1 0 100-2 1 1 0 000 2zm3 0a1 1 0 100-2 1 1 0 000 2z" clip-rule="evenodd"></path>
                            </svg><span>04 May 2020</span>
                        </div>
                      </div>
                      <p class="text-gray-500">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore ducimus est, excepturi nam odit possimus.</p>
                    </div>
                  </div><!-- end card -->