Card

<twig:Card class="w-[350px]">
    <twig:Card:Header>
        <twig:Card:Title>Card Title</twig:Card:Title>
        <twig:Card:Description>Card Description</twig:Card:Description>
    </twig:Card:Header>
    <twig:Card:Content>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos.</p>
    </twig:Card:Content>
    <twig:Card:Footer class="justify-between">
        <twig:Button variant="outline">Cancel</twig:Button>
        <twig:Button>Action</twig:Button>
    </twig:Card:Footer>
</twig:Card>

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

{# @block content The default block #}
<div
    class="{{ 'rounded-lg border bg-card text-card-foreground shadow-sm ' ~ attributes.render('class')|tailwind_merge }}"
    {{ attributes }}
>
    {%- block content %}{% endblock -%}
</div>

{# @block content The default block #}
<div
    class="{{ 'p-6 pt-0 ' ~ attributes.render('class')|tailwind_merge }}"
    {{ attributes }}
>
    {%- block content %}{% endblock -%}
</div>

{# @block content The default block #}
<div
    class="{{ 'text-sm text-muted-foreground ' ~ attributes.render('class')|tailwind_merge }}"
    {{ attributes }}
>
    {%- block content %}{% endblock -%}
</div>

{# @block content The default block #}
<div
    class="{{ 'flex items-center p-6 pt-0 ' ~ attributes.render('class')|tailwind_merge }}"
    {{ attributes }}
>
    {%- block content %}{% endblock -%}
</div>

{# @block content The default block #}
<div
    class="{{ 'flex flex-col space-y-1.5 p-6 ' ~ attributes.render('class')|tailwind_merge }}"
    {{ attributes }}
>
    {%- block content %}{% endblock -%}
</div>

{# @block content The default block #}
<div
    class="{{ 'text-2xl font-semibold leading-none tracking-tight ' ~ attributes.render('class')|tailwind_merge }}"
    {{ attributes }}
>
    {%- block content %}{% endblock -%}
</div>

<twig:Card class="w-[350px]">
    <twig:Card:Header>
        <twig:Card:Title>Card Title</twig:Card:Title>
        <twig:Card:Description>Card Description</twig:Card:Description>
    </twig:Card:Header>
    <twig:Card:Content>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos.</p>
    </twig:Card:Content>
    <twig:Card:Footer class="justify-between">
        <twig:Button variant="outline">Cancel</twig:Button>
        <twig:Button>Action</twig:Button>
    </twig:Card:Footer>
</twig:Card>

{% set notifications = [
  { title: "Your call has been confirmed.", description: "1 hour ago"},
  { title: "You have a new message!",  description: "1 hour ago"},
  { title: "Your subscription is expiring soon!", description: "2 hours ago" },
] %}
<twig:Card class="w-[350px]">
    <twig:Card:Header>
        <twig:Card:Title>Notifications</twig:Card:Title>
        <twig:Card:Description>You have 3 unread messages.</twig:Card:Description>
    </twig:Card:Header>
    <twig:Card:Content>
        {%- for notification in notifications -%}
            <div class="mb-4 grid grid-cols-[25px_1fr] items-start pb-4 last:mb-0 last:pb-0">
                <span class="flex h-2 w-2 translate-y-1 rounded-full bg-sky-500"></span>
                <div class="space-y-1">
                    <p class="text-sm font-medium leading-none">
                        {{ notification.title }}
                    </p>
                    <p class="text-sm text-muted-foreground">
                        {{ notification.description }}
                    </p>
                </div>
            </div>
        {%- endfor -%}
    </twig:Card:Content>
    <twig:Card:Footer>
        <twig:Button class="w-full">
            <twig:ux:icon name="lucide:check" />
            Mark all as read
        </twig:Button>
    </twig:Card:Footer>
</twig:Card>