Sección de FAQS

Contenido de FAQS en HTML

<div>
	<p class="">Política de Cancelación</p>
	<p class="">
		Para estancias menores a una semana es importante avisar con 3 días de
		anticipación, de caso contario será sancionado.
	</p>
</div>
<div>
	<p class="">Métodos de pago</p>
	<p class="">
		Aceptamos distintos métodos de pago: VISA, MasterCard, American Express,
		Paypal y Binance
	</p>
</div>
<div>
	<p class="">Mascotas</p>
	<p class="">El tema de las mascotas dependerá directamente del anfitrión.</p>
</div>
<div>
	<p class="">Información de Seguridad</p>
	<p class="">
		Todas nuestras estancias cuentan con seguro en caso de accidentes
	</p>
</div>
<div>
	<p class="">Estancias Largas</p>
	<p class="">
		Contamos con estancias de hasta 3 meses, en este caso es requerido un
		anticipo con un monto del 50% del valor de la renta
	</p>
</div>

Yo agregué otra card en “Rentas Destacadas” y cuándo empecé con FAQS me quedó así.
Lo resolví cambiando el “px-2 h-full w-full” por "px-2 h-auto w-full"
Así el largo se va ajustando automáticamente a medida que vayamos agregando cards (como en el width automático en la sección de “Recomendados”)

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

• w-full → width: 100%;
• h-full → height: 100%;
• px-6 → padding-left: 1.5rem; padding-right: 1.5rem;
• pt-2 → padding-top: 0.5rem;
• mt-6 → margin-top: 1.5rem;
• flex → display: flex;
• flex-col → flex-direction: column;
• space-y-4 → margin-top: 1rem;
• text-3xl → font-size: 1.875rem; line-height: 2.25rem;
• text-xl → font-size: 1.25rem; line-height: 1.75rem;
• font-semibold → font-weight: 600;
• font-medium → font-weight: 500;

Sección de FAQs en archivo index.html:

        <div class="w-full h-full px-6" id="faqs">
            <div class="w-full h-full flex flex-col space-y-4">
                <p class="text-3xl text-primary font-semibold mt-6">FAQs</p>
                <div>
                    <p class="text-xl font-semibold text-primary">Política de Cancelación</p>
                    <p class="font-medium pt-2">Para estancias menores a una semana es importante avisar con 3 días de anticipación, de caso contario será sancionado.</p>
                </div>
                <div>
                    <p class="text-xl font-semibold text-primary">Métodos de pago</p>
                    <p class="font-medium pt-2">Aceptamos distintos métodos de pago: VISA, MasterCard, American Express, Paypal y Binance.</p>
                </div>
                <div>
                    <p class="text-xl font-semibold text-primary">Mascotas</p>
                    <p class="font-medium pt-2">El tema de las mascotas dependerá directamente del anfitrión.</p>
                </div>
                <div>
                    <p class="text-xl font-semibold text-primary">Información de Seguridad</p>
                    <p class="font-medium pt-2">Todas nuestras estancias cuentan con seguro en caso de accidentes.</p>
                </div>
                <div>
                    <p class="text-xl font-semibold text-primary">Estancias Largas</p>
                    <p class="font-medium pt-2">Contamos con estancias de hasta 3 meses, en este caso es requerido un anticipo con un monto del 50% del valor de la renta.</p>
                </div>
            </div>
        </div>

–
Cabe mencionar que text-md no existe en Tailwind (al parecer es de Bootstrap), en su lugar se puede usar font-medium.

Los que usen tailwind v3.
Ya no existe text-md cambiar a text-base

Pequeño truco en visual estudio code si quieren generar todos los elementos rapidamente 😀:

(div>p{Payment Methods}+p{We accept VISA, MasterCard, American Express, paypal and Binance.})*4

Cuando quieres agregar más de un elemento HTML puedes ocupar los snippets. Por ejemplo si necesitas 2 párrafos, solo tecleas (al final enter)

p*2 

Y esto genera:

<p></p>
<p></p>

No puedo ver el resultado de lo que la profe programa 😡 primer curso que estoy cursando en el que esto sucede

Para no estar haciendo el comando de npm run tw:build cada que se hacen cambios en el archivo de configuración, se puede agregar --watch al final y esto estará escuchando los cambios que se hagan y recargará los archivos. Quedaría algo así:

 "tw:build": "tailwind -i ./src/css/tailwind.css -o ./public/css/tailwind.css --watch"

FAQS

<div id="faqs" class="py-10 px-5 h-auto w-full">
            <h2 class="text-2xl mb-5 text-primary font-extrabold">FAQs</h2>
            <div class="w-ful h-full flex flex-col space-y-5">
                <!-- question inits -->
                <div class="">
                    <p class="text-primary text-sm font-extrabold mb-2">Payment Methods</p>
                    <p class="font-semibold text-xs mr-10">We accept VISA, MasterCard, American Express, Paypal and Binance.</p>
                </div>
                <!-- question ends -->
                <!-- question inits -->
                <div>
                    <p class="text-primary text-sm font-extrabold mb-2">Cancellation Policy</p>
                    <p class="font-semibold text-xs mr-10">We accept VISA, MasterCard, American Express, Paypal and Binance.</p>
                </div>
                <!-- question ends -->
                <!-- question inits -->
                <div>
                    <p class="text-primary text-sm font-extrabold mb-2">Long Stays</p>
                    <p class="font-semibold text-xs mr-10">We accept VISA, MasterCard, American Express, Paypal and Binance. <br>We accept VISA, MasterCard, American Express, Paypal and Binance.</p>
                </div>
                <!-- question ends -->
                <!-- question inits -->
                <div>
                    <p class="text-primary text-sm font-extrabold mb-2">Long Stays</p>
                    <p class="font-semibold text-xs mr-10">We accept VISA, MasterCard, American Express, Paypal and Binance. <br>We accept VISA, MasterCard, American Express, Paypal and Binance.</p>
                </div>
                <!-- question ends -->
                <!-- question inits -->
                <div>
                    <p class="text-primary text-sm font-extrabold mb-2">Long Stays</p>
                    <p class="font-semibold text-xs mr-10">We accept VISA, MasterCard, American Express, Paypal and Binance. <br>We accept VISA, MasterCard, American Express, Paypal and Binance.</p>
                </div>
                <!-- question ends -->
            </div>
        </div>

para poder agilizar conla maquetacion de tus paginas, puedes usar el sistema emmet, que esta puesto en vscode, si por ejemplo necesitas poner:

<div class=“pb-5”>hola<div>

enves de hacerlo a mano puedes hacer:

.pb-3{hola}

talves el ejemplo se vea no muy necesario, pero si son muchas mas clases que hay que poner es muy util y agiliza el trabajo.

les paso el link a su pagina si quieren aprender mas sobre este programa!

https://emmet.io/