# Login 01

- Install: `php artisan blatui:add https://blatui.remix-it.com/r/button.json https://blatui.remix-it.com/r/card.json https://blatui.remix-it.com/r/field.json https://blatui.remix-it.com/r/input.json`
- Source: https://blatui.remix-it.com/r/login-01.json
- Composer: `composer require gehrisandro/tailwind-merge-laravel`

## resources/views/blocks/login-01.blade.php

```blade
<x-layouts.app title="Login 01">
    <div class="flex min-h-svh w-full items-center justify-center p-6 md:p-10">
        <div class="w-full max-w-sm">
            <div class="flex flex-col gap-6">
                <x-ui.card variant="sectioned">
                    <x-ui.card-header>
                        <x-ui.card-title>Login to your account</x-ui.card-title>
                        <x-ui.card-description>
                            Enter your email below to login to your account
                        </x-ui.card-description>
                    </x-ui.card-header>
                    <x-ui.card-content>
                        <form>
                            <x-ui.field-group>
                                <x-ui.field>
                                    <x-ui.field-label for="email">Email</x-ui.field-label>
                                    <x-ui.input id="email" type="email" placeholder="m@example.com" required />
                                </x-ui.field>
                                <x-ui.field>
                                    <div class="flex items-center">
                                        <x-ui.field-label for="password">Password</x-ui.field-label>
                                        <a href="#" class="ml-auto inline-block text-sm underline-offset-4 hover:underline">
                                            Forgot your password?
                                        </a>
                                    </div>
                                    <x-ui.input id="password" type="password" required />
                                </x-ui.field>
                                <x-ui.field>
                                    <x-ui.button type="submit">Login</x-ui.button>
                                    <x-ui.button variant="outline" type="button">
                                        Login with Google
                                    </x-ui.button>
                                    <x-ui.field-description class="text-center">
                                        Don't have an account? <a href="#" class="underline underline-offset-4">Sign up</a>
                                    </x-ui.field-description>
                                </x-ui.field>
                            </x-ui.field-group>
                        </form>
                    </x-ui.card-content>
                </x-ui.card>
            </div>
        </div>
    </div>
</x-layouts.app>
```