Footer

Para no tener que meter el Footer dentro de la etiqueta de Section (Mala Practica), solo modifica la altura del section por:

section class="w-full h-auto"

en lugar de usar:

section class="w-full h-screen"

la propiedad text-gray-300 es mejor agregarla a todo el footer en vez de repetirla 6 veces en todos los elementos p.

Hay que evitar repetir código.

Si pueden poner el footer esos enlaces con un UL sería mejor, esto ayuda al posicionamiento SEO.

Para los que andan buscando el repositorio de este curso:

https://github.com/platzi/PlatziTravel

Para agregar los iconos pueden agregar la siguiente CDN en la cabezera del nuestro index.html:

<link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css"
      integrity="sha512-9usAa10IRO0HhonpyAIVpjrylPvoDwiPUiKdWk5t3PyolY1cOd4DSE0Ga+ri4AuTroPR5aQvXU9xC6qOPnzFeg=="
      crossorigin="anonymous"
      referrerpolicy="no-referrer"
 />

Luego pueden agregar los iconos de twitter y instagram:

<i class="fa-brands fa-twitter"></i>
<i class="fa-brands fa-instagram"></i>

Clases de Tailwind y sus equivalentes en propiedad CSS vistas en esta clase:

• w-full → width: 100%;
• h-auto → height: auto;
• bg-gray-50 → background-color: #f9fafb;
• p-6 → padding: 1.5rem;
• space-y-2 → margin-top: 0.5rem;
• text-lg → font-size: 1.125rem; line-height: 1.75rem;
• text-sm → font-size: 0.875rem; line-height: 1.25rem;
• text-gray-300 → color: #6b7280;

–
Sección Footer en archivo index.html:

    <footer class="w-full h-auto bg-gray-50 px-6 space-y-2 mt-6 pt-4">
        <p class="text-lg">Acerca De</p>
        <p class="text-sm text-gray-300">Inversionistas</p>
        <p class="text-sm text-gray-300">Empleos</p>
        <p class="text-sm text-gray-300">Términos y condiciones</p>
        <p class="text-sm text-gray-300">Platzi Travel, Inc.</p>
    </footer>

ASI YA LES SALDRA EL FOOTER CON LOS ICONOS
En la parte del Head pongan

<link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css"
      integrity="sha512-9usAa10IRO0HhonpyAIVpjrylPvoDwiPUiKdWk5t3PyolY1cOd4DSE0Ga+ri4AuTroPR5aQvXU9xC6qOPnzFeg=="
      crossorigin="anonymous"
      referrerpolicy="no-referrer"
 />

Esto va en el footer

    <footer class="w-full h-auto bg-gray-50 p-6 space-y-2">
        <p class="text-lg">Acerca de</p>
        <p class="text-sm text-gray-400">Investing</p>
        <p class="text-sm text-gray-400">Work with us</p>
        <p class="text-sm text-gray-400">Terms and conditions</p>
        <p class="text-sm text-gray-400">Platzi Travel Inc.</p>
        <i class="fa-brands fa-twitter text-cyan-400"></i>
        <i class="fa-brands fa-instagram text-purple-400"></i>
    </footer>

Para no poner el footer dentro de la section, solamente se cambia el valor de la propiedad de altura en el section, de h-screen a h-auto.

Al final así hice mi footer jeje fuera del section principal, usando listas y poniendo los iconos como el figma. Use un cdn de fontawesome para agregar los iconos de twitter e instagram

<footer class="w-full h-auto bg-gray-50 p-6 space-y-2">
        <h2 class="text-lg">
            About us
        </h2>
        <ul>
            <li class="text-sm text-gray-300">
                Investors
            </li>
            <li class="text-sm text-gray-300">
                Jobs
            </li>
            <li class="text-sm text-gray-300">
                Terms and Conditions
            </li>
            <li class="text-sm text-gray-300">
                Platzi Travel, Inc.
            </li>
            <li class="text-sm text-gray-300">
                Follow Us
                <ul class="text-xl text-gray-300 flex space-x-2">
                    <li>
                        <a href="#">
                            <i class="fa-brands fa-twitter"></i>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <i class="fa-brands fa-instagram"></i>
                        </a>
                    </li>
                </ul>
            </li>
        </ul>
    </footer>

Mejor puse un text-gray-500, el 300 es muy díficl de leer en fondo blanco

Para los que deseen añadir iconos al proyecto, pueden hacerlo con HeroIcons, hecho por los mismos creadores de Tailwind.

Solo tienen que copiar el codigo SVG y ponerlo donde deseen.

Ejemplo 💙

Resultado 🚀