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:

Sign in

Don't have an account?


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

button

carousel