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

If you have any feedback please leave a comment below. Please clap for this article. Thanks for reading.