Tailwind CSS Card - Taco Vue

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 
<CardContainer
    color="white"
    variant="filled"
    shadow=
    class="w-96"
>
    <CardHeader
        color="blue"
        variant="filled"
        floated
        shadow
        class="relative h-56"
    >
        <img
            src="https://images.unsplash.com/photo-1540553016722-983e48a2cd10?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=800&q=80"
            class="w-full h-full"
        />
    </CardHeader>
    <CardBody class="text-center">
        <Typography variant="h5" :textGradient="false">
            Cozy 5 Stars Apartment
        </Typography>
        <Typography>
            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.
        </Typography>
    </CardBody>
    <CardFooter
        :divider="true"
        class="flex items-center justify-between py-3"
    >
        <Typography variant="small">$899/night</Typography>
        <Typography variant="small" color="gray" class="flex gap-1">
            <i class="fas fa-map-marker-alt fa-sm mt-[3px]" />
            Barcelona, Spain
        </Typography>
    </CardFooter>
</CardContainer>

Tailwind CSS Profile Card - Taco Vue

Natalie Paisley

CEO / Co-Founder 

<CardContainer
    color="white"
    variant="filled"
    shadow
    class="w-96"
>
    <CardHeader
        color="blue"
        variant="filled"
    >
        <img
            src="https://docs.material-tailwind.com/img/team-3.jpg"
        />
    </CardHeader>
    <CardBody class="text-center">
        <Typography variant="h4" class="mb-2" color="blue-gray">
            Natalie Paisley
        </Typography>
        <Typography color="blue" class="!font-semibold" textGradient>
            CEO / Co-Founder
        </Typography>
    </CardBody>
    <CardFooter
        class="flex justify-center pt-2 gap-7"
    >
        <Typography as="a" href="#facebook" variant="lead" color="blue">
            <i class="fab fa-facebook" />
        </Typography>
        <Typography as="a" href="#twitter" variant="lead" color="light-blue">
            <i class="fab fa-twitter" />
        </Typography>
        <Typography as="a" href="#instagram" variant="lead" color="purple">
            <i class="fab fa-instagram" />
        </Typography>
    </CardFooter>
</CardContainer>

Tailwind CSS Login Card - Taco Vue

Sign In

Don't have an account? Sign up 
<CardContainer
    color="white"
    variant="filled"
    :shadow="true"
    class="mt-10 w-96"
>
    <CardHeader
        color="blue"
        variant="gradient"
        :floated="true"
        class="grid mb-4 h-28 place-items-center"
    >
        <Typography
            variant="h3"
            color="white"
        >
          Sign In
        <Typography/>
    </CardHeader>
    <CardBody class="flex flex-col gap-4">
      <Input type="email" size="lg" label="Email"></Input>
      <Input type="password" size="lg" label="Password"></Input>
      <div class="flex mb-3">
        <Checkbox label="Remember Me" />
      </div>
    </CardBody>
    <CardFooter
        class="pt-0"
    >
      <Button variant="gradient" :fullWidth="true">
        Sign In
      </Button>
      <Typography variant="small" class="flex justify-center mt-6">
        Don't have an account?
        <Typography
          as="a"
          href="#signup"
          variant="small"
          color="blue"
          class="ml-1 font-bold"
        >
          Sign up
        </Typography>
      </Typography>
    </CardFooter>
</CardContainer>

Custom Card

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
<CardContainer
    color="white"
    variant="filled"
    :shadow="true"
    class="w-96"
>
    <CardHeader
        color="blue"
        variant="filled"
        :floated="true"
        :shadow="true"
        class="relative h-56"
    >
        <img
            src="https://images.unsplash.com/photo-1540553016722-983e48a2cd10?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=800&q=80"
            class="w-full h-full"
        />
    </CardHeader>
    <CardBody class="text-center">
        <Typography variant="h5" :textGradient="false">
            Cozy 5 Stars Apartment
        </Typography>
        <Typography>
            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.
        </Typography>
    </CardBody>
    <CardFooter
        :divider="true"
        class="flex items-center justify-between py-3"
    >
        <Typography variant="small">$899/night</Typography>
        <Typography variant="small" color="gray" class="flex gap-1">
            <i class="fas fa-map-marker-alt fa-sm mt-[3px]" />
            Barcelona, Spain
        </Typography>
    </CardFooter>
</CardContainer>