Creating Sign In page using Quasar

What's to create a beautiful Sign In page using the quasar framework? Don't worry I got your back.

<q-layout view="lHh Lpr lFf">
<q-page-container>
  <q-page class="flex flex-center bg-grey-2">
    <q-card class="q-pa-md shadow-2 my_card" bordered>
      <q-card-section class="text-center">
        <div class="text-grey-9 text-h5 text-weight-bold">Sign in</div>
        <div class="text-grey-8">Sign in below to access your account</div>
      </q-card-section>
      <q-card-section>
        <q-input dense outlined v-model="email" label="Email Address"></q-input>
        <q-input dense outlined class="q-mt-md" v-model="password" type="password" label="Password"></q-input>
      </q-card-section>
      <q-card-section>
        <q-btn style="
  border-radius: 8px;" color="dark" rounded size="md" label="Sign in" no-caps class="full-width"></q-btn>
      </q-card-section>
      <q-card-section class="text-center q-pt-none">
        <div class="text-grey-8">Don't have an account yet?
          <a href="#" class="text-dark text-weight-bold" style="text-decoration: none">Sign
            up.</a></div>
      </q-card-section>

    </q-card>
  </q-page>
</q-page-container>
</q-layout>

CSS

.my_card {
    width: 25rem;
    border-radius: 8px;
    box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
}

const {useQuasar} = Quasar
const {ref} = Vue

const app = Vue.createApp({
    setup() {
        return {
            email: ref(''),
            password: ref('')
        }
    }
})

app.use(Quasar, {config: {}})
app.mount('#q-app')

For Live preview

https://codepen.io/Pratik__007/pen/ZEjxPQx

If you have any feedback please leave a comment below. Thanks for reading.