Tailwind CSS Card - Taco Svelte

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="h-full w-full rounded-lg"
    />
</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
    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 Svelte

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" class="rounded-lg"
    />
</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 gap-7 pt-2"
>
    <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 Svelte

Sign In

Don't have an account? Sign up 
<CardContainer
color="white"
variant="filled"
shadow
class="w-96 mt-10"
>
<CardHeader
    color="blue"
    variant="gradient"
    floated
    class="mb-4 grid 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>
    Sign In
  </Button>
  <Typography variant="small" class="mt-6 flex justify-center">
    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

Profile
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="h-full w-full rounded-lg"
            />
        </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-[10px]" />
                Barcelona, Spain
            </Typography>
        </CardFooter>
</CardContainer>