Card
TailPro cards provide a flexible and extensible content container with multiple variants and options.
Default card
TailPro default vertical card.
New web design layout trends in 2021
04 May 2020
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore ducimus est, excepturi nam odit possimus.
New web design layout trends in 2021
04 May 2020
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore ducimus est, excepturi nam odit possimus.
<!-- card -->
<div class="flex oskasdadiaa 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-primary-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 me-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 oskasdadiaa 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-primary-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 me-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.
New web design layout trends in 2021
04 May 2020
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore ducimus est, excepturi nam odit possimus.
<!-- card start -->
<div class="flex oskasdadiaa md:lsdfdfsdafd 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:ps-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-primary-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 me-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 -->