No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Maquetando formularios con Tailwind

4/24
Recursos

Aportes 5

Preguntas 3

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

npm install -D @tailwindcss/forms
require(’@tailwindcss/forms’),

Plugin form tailwind

npm install -D @tailwindcss/forms
require(’@tailwindcss/forms

Fuente: https://github.com/tailwindlabs/tailwindcss-forms

Para hacer la línea divisoria, se puede utilizar la clase divide-y, en el contenedor padre

<div class="divide-y">
  <button
    class="w-full rounded text-sm font-medium text-white bg-green-600 px-5 py-2"
    type="submit">
    Log IN
  </button>
  <div class="flex justify-center items-center space-x-4 pt-4 mt-4">
    <a class="text-sky-600" href="#">Can't log in?</a>
    <a class="text-sky-600" href="#">Sign up for an account</a>
  </div>
</div>

Para más detalle, pueden revisar la documentación …

Divide Line

Aca tengo mi maquetado, saqué algunas imagenes del propio trello y coloqué colores personalizados. Me costó un montón poner el fixed botton-0 y que me quedara bien, tengo que repasar CSS

dejo mi código

<div class="w-screen h-screen bg-white sm:bg-gray-100 relative">
  <div class="absolute w-full h-full bg-gray-100 hidden sm:block">
    <img
      class="absolute w-60 lg:w-80 left-0 bottom-0"
      src="/assets/svg/login-bg-left.svg"
      alt="bg left"
    />
    <img
      class="absolute w-60 lg:w-80 right-0 bottom-0"
      src="/assets/svg/login-bg-rigth.svg"
      alt="bg rigth"
    />
  </div>

  <!-- Contenido de Inicio -->
  <div class="relative w-full sm:w-96 m-auto">
    <!-- Logo -->
    <header class="py-10 flex justify-center">
      <img
        class="w-48"
        src="/assets/svg/trello-logo-blue.svg"
        alt=""
      />
    </header>
    <!-- FIN Logo -->

    <!-- Caja blanca de formulario -->
    <div class="bg-white rounded shadow-none sm:shadow-lg p-8">
      <div class="mb-4">
        <h1 class="font-bold text-blue-p text-base text-center pb-7">
          Iniciar sesión en Trello
        </h1>
        <form novalidate class="space-y-4">
          <div class="relative">
            <input
              class="w-full bg-gray-50 rounded border-2 border-gray-300"
              type="text"
              placeholder="Introduzca el correo electrónico"
            />
          </div>
          <div class="relative">
            <button
              class="w-full bg-green-apple hover:bg-green-apple-light text-white rounded p-2 text-base font-bold"
            >
              Continuar
            </button>
          </div>
        </form>

        <!-- Iniciar sesión de otro modo -->
        <div class="py-2">
          <p class="font-light text-center text-gray-600">O</p>

          <div class="relative my-4">
            <button
              class="w-full flex align-center justify-center shadow-md rounded p-2 text-sm font-bold text-blue-p text-center hover:bg-gray-50"
            >
              <img class="w-4 mr-2" src="/assets/icon/google.png" alt="">
              Continuar con Google
            </button>
          </div>

          <div class="relative my-4">
            <button
              class="w-full flex align-center justify-center shadow-md rounded p-2 text-sm font-bold text-blue-p text-center"
            >
              <img class="w-4 mr-2" src="/assets/icon/microsoft.png" alt="">
              Continuar con Microsoft
            </button>
          </div>

          <div class="relative my-4">
            <button
              class="w-full flex align-center justify-center shadow-md rounded p-2 text-sm font-bold text-blue-p text-center"
            >
              <img class="w-4 mr-2" src="/assets/icon/apple.png" alt="">
              Continuar con Apple
            </button>
          </div>

          <div class="relative my-4">
            <button
              class="w-full flex align-center justify-center shadow-md rounded p-2 text-sm font-bold text-blue-p text-center"
            >
              <img class="w-4 mr-2" src="/assets/icon/slack.png" alt="">
              Continuar con Slack
            </button>
          </div>
        </div>
        <!-- FIN Iniciar sesión de otro modo -->

        <hr class="my-4 border-b-1 border-r-gray-300" />

        <div class="flex justify-center items-center space-x-0 space-y-2 md:space-x-2 md:space-y-0 flex-col md:flex-row">
          <ul class=" flex flex-col justify-center">
            <li class="text-blue-600 font-light text-sm text-center pb-2 after:content-['•']">
              <a href="" >
                  ¿No puede iniciar sesión?
              </a>
            </li>
            <li class="text-blue-600 font-light text-sm text-center">
              <a href="">
                Regístrese para crear una cuenta
              </a>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <!-- Caja blanca de formulario -->


    <div class="flex justify-center items-center space-x-0 space-y-2 md:space-x-2 md:space-y-0 flex-col md:flex-row py-6">
          <a href="" class="text-blue-600 font-light text-xs" >
              Política de Privacidad
          </a>
          <span class="text-gray-500 hidden md:block">•</span>
          <a href="" class="text-blue-600 font-light text-xs text-center">
            Condiciones de servicio
          </a>
    </div>

    <div class="flex justify-center flex-col w-96 fixed bottom-0 pb-10">
      <hr class="border-b-2 border-r-gray-500">
      <div class="flex justify-center">
        <img class="w-40 my-4" src="/assets/svg/atlassian-logo-blue-small.svg" alt="">
      </div>
      <div>
        <ul class="flex justify-center gap-2">
          <li class="font-light text-gray-500 text-xs">
            <a href="">Templates</a>
          </li>
          <li class="font-light text-gray-500 text-xs">
            <a href="">Pricing</a>
          </li>
          <li class="font-light text-gray-500 text-xs">
            <a href="">Apps</a>
          </li>
          <li class="font-light text-gray-500 text-xs">
            <a href="">Jobs</a>
          </li>
          <li class="font-light text-gray-500 text-xs">
            <a href="">Blog</a>
          </li>
          <li class="font-light text-gray-500 text-xs">
            <a href="">Developers</a>
          </li>
          <li class="font-light text-gray-500 text-xs">
            <a href="">About</a>
          </li>
          <li class="font-light text-gray-500 text-xs">
            <a href="">Help</a>
          </li>
        </ul>
      </div>
    </div>

  </div>
  <!-- FIN Contenido de Inicio -->
</div>

Si utilizan yarn deben colocar:
yarn add -D @tailwindcss/forms