HTML Base para curso VueJS

card-list-entradas

<div class="container">
  <div class="card w-100 mb-3">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's
        content.</p>
    </div>
  </div>
</div>

header

  <header
    class="d-flex flex-wrap align-items-center justify-content-center justify-content-md-between py-3 mb-4 border-bottom">
    <div class="col-md-3 mb-2 mb-md-0 px-3">
      <a href="/" class="d-inline-flex link-body-emphasis text-decoration-none">
        <h4>Mini Blog</h4>
      </a>
    </div>

    <ul class="nav col-12 col-md-auto mb-2 justify-content-center mb-md-0">
      <li><a href="#" class="nav-link px-2">Inicio</a></li>
      <li><a href="#" class="nav-link px-2">Nueva entrada</a></li>
      <li><a href="#" class="nav-link px-2">Usuarios</a></li>
    </ul>

    <div class="col-md-3 text-end">
      <button type="button" class="btn btn-outline-primary me-2">Ingresar</button>
      <button type="button" class="btn btn-outline-danger me-2">Salir</button>
    </div>
  </header>

login

<script setup lang="ts">

</script>

<template>
  <div class="d-flex align-items-center py-5">
    <main class="form-signi m-auto mt-5">
      <form>
        <h1 class="h3 mb-3 fw-normal text-center">Bienvenidos</h1>

        <div class="form-floating mt-3">
          <input type="text" class="form-control" id="floatingName" placeholder="Nombre completo">
          <label for="floatingName">Nombre</label>
        </div>

        <div class="form-floating mt-3">
          <input type="email" class="form-control" id="floatingEmail" placeholder="[email protected]">
          <label for="floatingEmail">Email</label>
        </div>
        <div class="form-floating mt-3">
          <input type="password" class="form-control" id="floatingPassword" placeholder="Contraseña">
          <label for="floatingPassword">Contraseña</label>
        </div>

        <div class="form-check text-start my-3">
          <input class="form-check-input" type="checkbox" value="remember-me" id="flexCheckDefault">
          <label class="form-check-label" for="flexCheckDefault">
            Recordar usuario
          </label>
        </div>
        <button class="btn btn-primary w-100 py-2" type="submit">Registrarme</button>
      </form>
    </main>  
  </div>
  
</template>

<style scoped>
main {
  width: 350px;
}
</style>