Forms

Me gustó la clase y lo referente a Tailwind está excelente, pero:

• Aunque no sea funcional, si es un formulario debería tener su etiqueta <form>
• Los nombres de los campos en div??? para eso existe <label for="">
• Cuando miramos la paleta de colores le pasaron unos colores para call to action, entonces solo siguió los 2 principales y el resto inventando

JAJA perdón si soy fastidioso con este comentario, respecto a Tailwind está excelente el curso y excelente profesor. Pero lo anterior me parecierón unos pequeños errores jaja

Con diseño responsive:

    <div class="mt-8 mx-2 md:mx-auto w-full md:w-1/2">
      <div>
        <div>Nombre</div>
        <input class="w-full py-1 px-4 rounded border border-blue-300 bg-gray-300 text-gray-800 placeholder-secondary leading-snug hover:bg-white focus:outline-none focus:shadow-outline" type="text" placeholder="Nombre">
      </div>
      <div>
        <div>Email</div>
        <input class="w-full py-1 px-4 rounded border border-blue-300 bg-gray-300 text-gray-800 placeholder-secondary leading-snug hover:bg-white focus:outline-none focus:shadow-outline" type="text" placeholder="Email">
      </div>
      <div>
        <div>Comentarios</div>
        <textarea class="w-full py-1 px-4 rounded border border-blue-300 bg-gray-300 text-gray-800 placeholder-secondary leading-snug hover:bg-white focus:outline-none focus:shadow-outline" name="" id="" rows="3"></textarea>
      </div>
      <div>
        <button class="block mx-auto px-4 py-2 rounded shadow-xl bg-gray-500 hover:shadow-none hover:bg-gray-700 hover:text-white">Enviar</button>
      </div>
    </div>

el “focus:shadow-outline” cambio por “focus:ring-2”. 😃

¿A dónde se fueron todos?

Antes de pasar a la maquetación con Tailwind la pagina debe estar diseñada en un wireframe de preferencia para no gastar tiempo viendo que opciones quedarían mejor.

Sólo como comentario ya que no es clase de buenas prácticas de HTML, en el caso de los formularios en lugar de utilizar <div>Nombre</div> una buena práctica sería el utilizar la etiqueta <label> señalando el id al que corresponde ese elemento:

<div>
  <label for="fname">Nombre</label>
  <input class="…" type="text" id="fname" placeholder="Nombre" />
</div>

Esto para que en dispositivos móviles, cuando el usuario de click (touch) en el nombre, en automático también se active el input de formulario y comience a escribir. Esto puede suceder muy a menudo ya que dependerá de la habilidad motriz o visual del usuario o la calidad y el tamaño de su pantalla.

Chicos, yo llevo el proyecto así.

Aquí les dejo el código del formulario.

<section class="p-8 md:px-32 lg:px-80 bg-white" id="contact">
      <h3 class="text-3xl text-center font-semibold text-gray-900 capitalize">Contact us</h3>
      <form>
        <div class="mt-3">
          <label class="block text-lg text-gray-700" for="name">Name</label>
          <input placeholder="What's your name?" class="bg-gray-200 px-2 w-full h-10 rounded-md focus:outline-none focus:shadow-outline" type="text" id="name">
        </div>
        
        <div class="mt-3">
          <label class="block text-lg text-gray-700" for="email">Email</label>
          <input placeholder="What's your email address?" class="bg-gray-200 px-2 w-full h-10 rounded-md focus:outline-none focus:shadow-outline" type="text" id="email">
        </div>

        <div class="mt-3">
          <label class="block text-lg text-gray-700" for="comments">Comments</label>
          <textarea placeholder="Write a comment" class="bg-gray-200 p-2 w-full h-20 lg:h-24 rounded-md leading-snug focus:outline-none focus:shadow-outline" name="comments" id="comments"></textarea>
        </div>

        <button class="bg-primary md:px-20 px-10 py-3 text-lg m-auto block mt-3 text-gray-900 rounded-md font-medium">Enviar</button>
      </form>
    </section>

Si alguien tiene problemas con el footer (ya que no me aparecia hasta el final de la pagina. Lo que hice fue quitarle las lineas de absolute bottom-0 y con eso pude solucionar mi problema

Mobile:

Tablet:

Escritorio:

Será cuestión de acostumbrarse a usar muchas clases, pero en general lo veo útil en vez de estar escribiendo cientos de lineas de css…

colocar un div para colocar un texto es mala practica

tailwind rocks!

<!-- FORMS -->

 <!-- FORMS -->
        <form class="mx-2">
            <div>
                <div>Nombre</div>
                <input class="w-full leading-snug text-gray-500 py-1 px-4 rounded border border-blue-300 bg-gray-200 placeholder-secondary hover:bg-white focus:outline-none focus:shadow-outline" type="text" placeholder="Nombre"><!-- leading snug controla el espacio entre lineas -->
            </div>
            <div>
                <div>Email</div>
                <input class="w-full leading-snug text-gray-500 py-1 px-4 rounded border border-blue-300 bg-gray-200 placeholder-secondary hover:bg-white focus:outline-none focus:shadow-outline" type="email" placeholder="Email"><!-- leading snug controla el espacio entre lineas -->
            </div>
            <div>
                <div>Comentarios</div>
                <textarea class="w-full leading-snug text-gray-500 py-1 px-4 rounded border border-blue-300 bg-gray-200 placeholder-secondary hover:bg-white  focus:outline-none focus:shadow-outline" name="" id="" cols="30" rows="10">
                </textarea>
            </div>

            <div>
                <button class="rounded shadow-xl py-1 px-4 bg-gray-400 mx-auto block hover:shadow-none hover:bg-gray-700 hover:text-white">
                    Enviar 
                </button>
            </div>
        </form>

desktop ❤️

f