<script>
  let nombre = "Manuel";
  let apellido = "Riquelme";
</script>

<div class="body w-25 p-6 flex mx-auto">
  <form>
    <div class="form-group mb-3">
      <label
        for="nombre"
        class="text-danger"
        on:mouseover={() => document.getElementById("nombre").focus()}
        on:focus={() => document.getElementById("nombre").focus()}>Nombre</label
      >
      <input
        type="text"
        class="form-control"
        id="nombre"
        placeholder="Introduzca su nombre"
        bind:value={nombre}
      />
    </div>
    <div class="form-group mb-3">
      <label
        for="apellido"
        class="text-danger"
        on:mouseover={() => document.getElementById("apellido").focus()}
        on:focus={() => document.getElementById("apellido").focus()}
        >Apellido</label
      >
      <input
        type="apellido"
        class="form-control"
        placeholder="Introduzca su apellido"
        bind:value={apellido}
        id="apellido"
      />
    </div>

    <button type="submit" class="btn btn-primary mb-3">Submit</button>
    <p class="soy label"><strong>Tu eres: </strong>{nombre} {apellido}</p>
  </form>
</div>
<div class="flex mx-auto">Cojón</div>

<style scoped>
  .body {
    margin: 0;
    display: flex;
    place-items: center;
    min-width: 320px;
    min-height: 100vh;
  }
  input:hover {
    border: 1px solid red;
  }
  .soy:hover {
    color: green;
    text-decoration: underline;
  }
</style>
