Card

A container for related content, such as a form, alert, or data list.

Welcome back!

Required

Password

Required

Remember me

<x-card class="space-y-6">
    <div>
        <x-heading size="lg">Log in to your account</x-heading>
        <x-subheading>Welcome back!</x-subheading>
    </div>
 
    <x-input wire:model="email" type="email" label="Email" placeholder="[email protected]" required autofocus
        autocomplete="off" />
 
    <x-field>
        <div class="flex justify-between mb-3">
            <x-label badge="Required">Password</x-label>
 
            <x-link href="#" variant="subtle" class="text-sm">Forgot
                password?</x-link>
        </div>
 
        <x-input wire:model="password" type="password" placeholder="Your password" />
 
        <x-error name="password" />
    </x-field>
 
    <x-checkbox wire:model="remember" label="Remember me" />
 
 
    <div class="space-y-2">
        <x-button variant="primary" class="w-full">Log in</x-button>
 
        <x-button variant="ghost" class="w-full">Sign up for a new account</x-button>
    </div>
</x-card>

Simple card

Let's be honest, a card is just a div with a border and some padding.

Are you sure?

Your post will be deleted permanently.

This action cannot be undone.

<x-card>
    <x-heading size="lg">Are you sure?</x-heading>
 
    <x-subheading class="mb-4">
        <p>Your post will be deleted permanently.</p>
        <p>This action cannot be undone.</p>
    </x-subheading>
 
    <x-button variant="danger">Delete</x-button>
</x-card>