Vuetify Login Form

<!DOCTYPE html>
<html>

<body>
    <div id="app">
        <v-app>
            <v-container>
                <v-card class="mx-auto pa-12 pb-8" elevation="8" max-width="448" rounded="lg">
                    <h2>Vuetify Login Form</h2>
                    <div class="text-subtitle-1 text-medium-emphasis">Account</div>
                    <v-text-field density="compact" placeholder="Email address" prepend-inner-icon="mdi-email-outline"
                        variant="outlined" clearable></v-text-field>
                    <div class="text-subtitle-1 text-medium-emphasis d-flex align-center justify-space-between">
                        Password
                        <a class="text-caption text-decoration-none text-blue" href="#" rel="noopener noreferrer"
                            target="_blank">
                            Forgot login password?</a>
                    </div>
                    <v-text-field :append-inner-icon="visible ? 'mdi-eye-off' : 'mdi-eye'"
                        :type="visible ? 'text' : 'password'" density="compact" placeholder="Enter your password"
                        prepend-inner-icon="mdi-lock-outline" variant="outlined"
                        @click:append-inner="visible = !visible" clearable></v-text-field>

<v-card class="mb-12" color="surface-variant" variant="tonal">
                        <v-card-text class="text-medium-emphasis text-caption">
                            Warning: After 3 consecutive failed login attempts, you account will
                            be temporarily locked for three hours. If you must login now, you can
                            also click "Forgot login password?" below to reset the login password.
                        </v-card-text>
                    </v-card>

<v-btn block class="mb-8" color="blue" size="large" variant="tonal">
                        Log In
                    </v-btn>

<v-card-text class="text-center">
                        <a class="text-blue text-decoration-none" href="#" rel="noopener noreferrer" target="_blank">
                            Sign up now <v-icon icon="mdi-chevron-right"></v-icon>
                        </a>
                    </v-card-text>
                </v-card>
            </v-container>

</v-app>
    </div>
    
    <script src="https://unpkg.com/vue@3.2.21/dist/vue.global.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vuetify@3.1.11/dist/vuetify.min.js"></script>
    
    <script type="module">
        const { createApp } = Vue;
        const { createVuetify } = Vuetify;
        const vuetify = createVuetify();
        const app = createApp({
            data() {
                return {
                    visible: false,
                };
            },
        }).use(vuetify).mount('#app'); // Mount the app to the #app element
    </script>
</body>

</html>

 
<!DOCTYPE html>
<html>
​
<head>
    <!-- Load Vuetify Icon and Styles -->
    <link href="https://cdn.jsdelivr.net/npm/@mdi/font@5.9.55/css/materialdesignicons.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vuetify@3.1.11/dist/vuetify.min.css">
</head>
​
<body>
    <div id="app">
        <v-app>
            <v-container>
                <v-card class="mx-auto pa-12 pb-8" elevation="8" max-width="448" rounded="lg">
                    <h2>Vuetify Login Form</h2>
                    <div class="text-subtitle-1 text-medium-emphasis">Account</div>
                    <v-text-field density="compact" placeholder="Email address" prepend-inner-icon="mdi-email-outline"
                        variant="outlined" clearable></v-text-field>
                    <div class="text-subtitle-1 text-medium-emphasis d-flex align-center justify-space-between">
                        Password
                        <a class="text-caption text-decoration-none text-blue" href="#" rel="noopener noreferrer"
                            target="_blank">
                            Forgot login password?</a>
                    </div>
                    <v-text-field :append-inner-icon="visible ? 'mdi-eye-off' : 'mdi-eye'"
                        :type="visible ? 'text' : 'password'" density="compact" placeholder="Enter your password"
                        prepend-inner-icon="mdi-lock-outline" variant="outlined"
                        @click:append-inner="visible = !visible" clearable></v-text-field>
​
                    <v-card class="mb-12" color="surface-variant" variant="tonal">
                        <v-card-text class="text-medium-emphasis text-caption">
                            Warning: After 3 consecutive failed login attempts, you account will
                            be temporarily locked for three hours. If you must login now, you can
                            also click "Forgot login password?" below to reset the login password.
                        </v-card-text>
                    </v-card>
​
                    <v-btn block class="mb-8" color="blue" size="large" variant="tonal">
                        Log In
                    </v-btn>
​
                    <v-card-text class="text-center">
                        <a class="text-blue text-decoration-none" href="#" rel="noopener noreferrer" target="_blank">
                            Sign up now <v-icon icon="mdi-chevron-right"></v-icon>
                        </a>
                    </v-card-text>
                </v-card>
            </v-container>
​
        </v-app>
    </div>
    <!-- Load Vue.js and Vuetify script -->
    <script src="https://unpkg.com/vue@3.2.21/dist/vue.global.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vuetify@3.1.11/dist/vuetify.min.js"></script>
    <!-- Create Vue.js and Vuetify app -->
    <script type="module">
        const { createApp } = Vue;
        const { createVuetify } = Vuetify;
        const vuetify = createVuetify();
        const app = createApp({
            data() {
                return {
                    visible: false,
                };
            },
        }).use(vuetify).mount('#app'); // Mount the app to the #app element
    </script>
</body>
​
</html>