Tailwind CSS Card - Taco Tall Stack
A card is used to display content and actions about a single topic. It usually includes a photo, text, and a link about a single subject. The card 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. Below we are presenting dynamic examples of the Card component that you can use in your Taco project.
Cozy 5 Stars Apartment
The place is close to Barceloneta Beach and bus stop just 2 min by walk and near to "Naviglio" where you can enjoy the main night life in Barcelona.
$899/night
Barcelona, Spain
<x-card>
<x-slot name="header" class="relative h-56">
<a href="#" blur-shadow-image="true">
<img class="h-full w-full 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>
</x-slot>
<x-slot name="body" class="text-center">
<a href="#">
<h5 class="font-medium">Cozy 5 Stars Apartment</h5>
</a>
<p class="mb-3 opacity-60">
The place is close to Barceloneta Beach and bus stop just 2 min by
walk and near to "Naviglio" where you can enjoy the main night life in
Barcelona.
</p>
</x-slot>
<x-slot name="footer" class="flex items-center justify-between py-3 border-t-2">
<p>
$899/night
</p>
<div class="flex gap-1">
<div class="mt-1">
<svg fill="#828282" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" width="16px" height="16px"
viewBox="0 0 395.71 395.71" xml:space="preserve" stroke="#828282">
<g id="SVGRepo_bgCarrier" stroke-width="0" />
<g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round" />
<g id="SVGRepo_iconCarrier">
<g>
<path
d="M197.849,0C122.131,0,60.531,61.609,60.531,137.329c0,72.887,124.591,243.177,129.896,250.388l4.951,6.738 c0.579,0.792,1.501,1.255,2.471,1.255c0.985,0,1.901-0.463,2.486-1.255l4.948-6.738c5.308-7.211,129.896-177.501,129.896-250.388 C335.179,61.609,273.569,0,197.849,0z M197.849,88.138c27.13,0,49.191,22.062,49.191,49.191c0,27.115-22.062,49.191-49.191,49.191 c-27.114,0-49.191-22.076-49.191-49.191C148.658,110.2,170.734,88.138,197.849,88.138z" />
</g>
</g>
</svg>
</div>
<p color="gray">Barcelona, Spain</p>
</div>
</x-slot>
</x-card>
Tailwind CSS Profile Card
Natalie Paisley
CEO / Co-Founder
<x-card type="simple">
<x-slot name="header" class="relative">
<a href="#" blur-shadow-image="true">
<img class="h-full w-full rounded-lg" src="https://docs.material-tailwind.com/img/team-3.jpg"
alt="card image" />
</a>
</x-slot>
<x-slot name="body" class="flex flex-col items-center">
<p class="text-gray-800 text-xl font-bold mb-3 opacity-60">
Natalie Paisley
</p>
<p class="text-blue-500">
CEO / Co-Founder
</p>
</x-slot>
<x-slot name="footer" class="flex gap-4 justify-center ">
<p href="#facebook">
<i class="fa-brands fa-facebook" style="color: #005eff;"></i>
</p>
<p href="#twitter">
<i class="fa-brands fa-twitter" style="color: #005eff;"></i>
</p>
<p href="#instagram">
<i class="fa-brands fa-instagram" style="color: #bb00ff;"></i>
</p>
</x-slot>
</x-card>
Card Signin
Cards also can be used for Login pages. See below our Tailwind CSS example:
<x-card type="signin">
<x-slot name="header" class="bg-light-blue-500">
<h4 class="mt-2 mb-0 font-bold text-center text-white p-8">Sign in</h4>
</x-slot>
<x-slot name="body">
<form wire:submit.prevent action="role">
<div class="my-3">
<x-input wire:model.lazy='email' type="email" inputType="outline" label="Email"
placeholder=" "></x-input>
<x-validation class="text-sm text-red-500" name="email" />
</div>
<div class="my-3">
<x-input wire:model.lazy='password' type="password" inputType="outline" label="Password"
placeholder=" "></x-input>
<x-validation class="text-sm text-red-500" name="password" />
</div>
<div class="my-2">
<x-input wire:model.lazy='rememberMe' label="Remember me" type="checkbox"></x-input>
</div>
<x-validation class="text-sm text-red-500" name="rememberMe" />
<x-button type="submit" class="w-full bg-light-blue-500">
Sign in
</x-button>
</form>
</x-slot>
<x-slot name="footer" class="flex justify-center">
<p class="text-sm">Don't have an account?</p>
<a class="text-sm text-light-blue-500" href="#">Sign up</a>
</x-slot>
</x-card>