Cards

<mijnui:card class="mb-10 ">
    <mijnui:card.header>
        <mijnui:card.title>Card Title</mijnui:card.title>
        <mijnui:card.description>Card Description</mijnui:card.description>
    </mijnui:card.header>
    <mijnui:card.content>
        Card Content
    </mijnui:card.content>
    <mijnui:card.footer>
        <mijnui:button class="me-4">Cancel</mijnui:button>
        <mijnui:button color="primary">Add</mijnui:button>
    </mijnui:card.footer>
</mijnui:card>

<mijnui:card class="rounded-lg">
    <mijnui:card.header class="relative mb-4 flex aspect-[4/3] w-full flex-col space-y-1.5 p-0">
        <img class="rounded-lg"
            alt="PUMA Smash v2 Sneakers"
            loading="lazy"
            style="position: absolute; height: 100%; width: 100%; inset: 0px; object-fit: cover"
            src="https://images.unsplash.com/photo-1608231387042-66d1773070a5?q=80&w=1974&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />

    </mijnui:card.header>
    <mijnui:card.content>
        <mijnui:card.title>PUMA Smash v2 Sneakers</mijnui:card.title>
        <mijnui:card.description>Classic tennis-inspired sneakers with a sleek design and everyday comfort.</mijnui:card.description>

        <div class="flex items-center justify-between mb-4">
            <span class="text-3xl font-bold">$60</span>
           <mijnui:badge size="sm" outline>In Stock</mijnui:badge>
        </div>
    </mijnui:card.content>
    <mijnui:card.footer>
        <mijnui:button color="primary" class="w-full "> Add To Cart</mijnui:button>
    </mijnui:card.footer>
</mijnui:card>