Skip to main content
1 de 2

Intenta colocandole una clase que contenga un display flex a tu div que contiene el h1 de la siguiente forma..

<div class="text-center-test lg:px-16 px-6">

Observación: debes quitarle el mt-16 que le asignaste y el background podrias asignarselo al body en general..

css

.text-center-test {
align-items: center;
display: flex;
height: 100vh;
}

Aqui esta el resultado de tu codigo..

HTML

<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">

  <div class="bg">
    <header
      class="lg:px-16 px-6 bg-white flex flex-wrap items-center lg:py-0 py-2"
    >
      <div class="flex-1 flex justify-between items-center">
        <a href="#" class="flex items-center hover:text-green-600">
          <img src="https://randomuser.me/api/portraits/men/88.jpg" alt="logo" class="w-9" />
          <h2 class="ml-3 uppercase">Peluquería</h2>
        </a>
      </div>
      <label for="menu-toggle" class="cursor-pointer lg:hidden block">
        <svg
          xmlns="http://www.w3.org/2000/svg"
          width="20"
          height="20"
          viewBox="0 0 20 20"
        >
          <title>menu</title>
          <path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z"></path>
        </svg>
      </label>
      <input type="checkbox" class="hidden" id="menu-toggle" />
      <div class="hidden lg:flex lg:items-center lg:w-auto w-full" id="menu">
        <nav>
          <ul
            class="lg:flex items-center justify-between text-base text-gray-700 pt-4 lg:pt-0"
          >
            <li>
              <a href="#" class="lg:p-4 py-3 px-0 block border-b-2 border-transparent hover:border-green-500">Inicio</a>
            </li>
            <li>
              <a href="#" class="lg:p-4 py-3 px-0 block border-b-2 border-transparent hover:border-green-500">Citas</a>
            </li>
            <li>
              <a href="#" class="lg:p-4 py-3 px-0 block border-b-2 border-transparent hover:border-green-500">Login</a>
            </li>
            <li>
              <a href="#" class="lg:p-4 py-3 px-0 block border-b-2 border-transparent hover:border-green-500">Registrarse</a>
            </li>
          </ul>
        </nav>
        <a
          href="#"
          class="lg:ml-4 flex items-center justify-start lg:mb-0 mb-4 cursor-pointer"
        >
          <img
            src="https://randomuser.me/api/portraits/men/88.jpg"
            alt="user-img"
            class="rounded-full w-10 h-10 border-2 border-transparent hover:border-green-500"
          />
        </a>
      </div>
    </header>

    <div class="text-center-test lg:px-16 px-6" >
      <h1 class="text-7xl uppercase font-extrabold text-center text-white">
        Registrate o inicia <br />
        sesión para coger cita
      </h1>
    </div>
  </div>

css

@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');

body {
  background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),  url('https://pixabay.com/get/gf7622c0d4c53920496b6da3b5f755bc65d1c2d33233deb99759cdfcdec50bcc7baf7d8ddfc564cff1ac96fa99460ca4e_1920.jpg');
  background-size: cover;
}

#body {
  font-family: 'Roboto', sans-serif;
}

#menu-toggle:checked + #menu {
  display: block;
}
.bg {
  height: 100vh;
  width: 100%;
}

.text-center-test {
  align-items: center;
  display: flex;
  height: 100vh;
}