Card

<twig:Card class="max-w-sm">
    <twig:Card:Header>
        <twig:Card:Title as="h5">Noteworthy technology acquisitions 2021</twig:Card:Title>
    </twig:Card:Header>

    <twig:Card:Content>
        <p>Here are the biggest technology acquisitions of 2025 so far, in reverse chronological order.</p>
    </twig:Card:Content>
</twig:Card>

composer require tales-from-a-dev/twig-tailwind-extra:^1.0.0

{# @block content The card content, typically includes `Card:Content` with `Card:Header`, and/or `Card:Footer` #}
<div
    class="{{ ('bg-neutral-primary-soft text-body block p-6 border border-default rounded-base shadow-xs ' ~ attributes.render('class'))|tailwind_merge }}"
    {{ attributes }}
>
    {%- block content %}{% endblock -%}
</div>

{# @block content The main content area of the card #}
<div
    {{ attributes }}
>
    {%- block content %}{% endblock -%}
</div>

{# @block content The footer area, typically contains actions or additional information #}
<div
    class="{{ ('pt-6 ' ~ attributes.render('class'))|tailwind_merge }}"
    {{ attributes }}
>
    {%- block content %}{% endblock -%}
</div>

{# @block content The header area, typically contains `Card:Title` #}
<div
    class="{{ ('pb-6 ' ~ attributes.render('class'))|tailwind_merge }}"
    {{ attributes }}
>
    {%- block content %}{% endblock -%}
</div>

{# @block content The title text of the card #}
{%- props as = 'span' -%}
<{{ as }}
    class="{{ ('text-2xl font-semibold tracking-tight text-heading leading-8 ' ~ attributes.render('class'))|tailwind_merge }}"
    {{ attributes }}
>
    {%- block content %}{% endblock -%}
</{{ as }}>

<twig:Card class="max-w-sm">
    <twig:Card:Header>
        <twig:Card:Title as="h5">Noteworthy technology acquisitions 2021</twig:Card:Title>
    </twig:Card:Header>

    <twig:Card:Content>
        <p>Here are the biggest technology acquisitions of 2025 so far, in reverse chronological order.</p>
    </twig:Card:Content>

    <twig:Card:Footer>
        <twig:Button as="a" href="#">
            Read more
            <twig:ux:icon name="flowbite:arrow-right-outline" class="w-4 h-4 ms-1.5 -me-0.5" aria-hidden="true"/>
        </twig:Button>
    </twig:Card:Footer>
</twig:Card>

<twig:Card class="max-w-sm">
    <twig:Card:Header>
        <a href="#">
            <img
                class="rounded-base"
                src="https://images.unsplash.com/photo-1535189043414-47a3c49a0bed?ixlib=rb-4.1.0&q=85&fm=jpg&crop=entropy&cs=srgb&w=1000"
                alt="Bukchon Hanok Village by Y K" />
        </a>
    </twig:Card:Header>

    <twig:Card:Content>
        <twig:Badge border="bordered" class="mb-2">
            <twig:ux:icon name="flowbite:fire-outline" class="w-3 h-3 me-1" aria-hidden="true"/>
            Trending
        </twig:Badge>
        <a href="#">
            <twig:Card:Title class="mb-2" as="h5">Streamlining your design process today.</twig:Card:Title>
        </a>
        <p>In today’s fast-paced digital landscape, fostering seamless collaboration among Developers and IT Operations.</p>
    </twig:Card:Content>

    <twig:Card:Footer>
        <twig:Button variant="secondary" as="a" href="#">
            Read more
            <twig:ux:icon name="flowbite:arrow-right-outline" class="w-4 h-4 ms-1.5 -me-0.5" aria-hidden="true"/>
        </twig:Button>
    </twig:Card:Footer>
</twig:Card>

<twig:Card class="w-full max-w-sm">
    <twig:Card:Header>
        <twig:Card:Title as="h5">Sign in to our platform</twig:Card:Title>
    </twig:Card:Header>

    <twig:Card:Content>
        <div class="mb-4">
            <twig:Label for="email" class="mb-2.5">Your email</twig:Label>
            <twig:Input type="email" id="email" placeholder="example@company.com" required />
        </div>

        <div>
            <twig:Label for="password" class="mb-2.5">Your password</twig:Label>
            <twig:Input type="password" id="password" placeholder="•••••••••" required />
        </div>

        <div class="flex items-start mt-6">
            <div class="flex items-center">
                <twig:Checkbox id="checkbox-remember" value="" />
                <twig:Label for="checkbox-remember" class="ms-2">Remember me</twig:Label>
            </div>
            <a href="#" class="ms-auto text-sm font-medium text-fg-brand hover:underline">Lost Password?</a>
        </div>
    </twig:Card:Content>

    <twig:Card:Footer>
        <twig:Button type="submit" class="w-full mb-3">
            Login to your account
        </twig:Button>

        <div class="text-sm font-medium text-body">Not registered? <a href="#" class="text-fg-brand hover:underline">Create account</a></div>
    </twig:Card:Footer>
</twig:Card>