A煤n no tienes acceso a esta clase

Crea una cuenta y contin煤a viendo este curso

Curso B谩sico de Tailwind

Curso B谩sico de Tailwind

Ana Mar铆a D铆az Solorio

Ana Mar铆a D铆az Solorio

Haciendo responsivo nuestro proyecto: rentas destacadas

24/29
Recursos

Aportes 3

Preguntas 0

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesi贸n.

Yo siento que es mucho mejor usar Grid para este tipo de casos. No siempre todo se debe resolver con Flex.

Adjunto mi c贸digo de c贸mo organic茅 todo con grid tanto para la version mobile como desktop simplemente indicando que en mobile es 1 sola columna y en version lg 5 columnas y 2 filas.
Con la propiedad de span(row o col) por ejemplo le dices a un div que se expanda, como es el caso de Los Angeles que toma el alto de 2 filas.

<div id="trending-stays" class="p-6 h-full w-full">
        <p class="text-3xl text-primary font-semibold">Trending Stays</p>
        <div
          class="w-full h-full flex flex-col space-y-4 items-center justify-center mt-6"
        >
          <div
            class="w-full h-96 bg-chicago bg-cover rounded-xl lg:h-[38rem] lg:text-right lg:bg-center lg:pt-12"
          >
            <p class="card-title">Chicago</p>
            <p class="text-sm pl-8 text-white mr-24 lg:mr-8 lg:text-base">
              2 rooms, bathroom and kitchen.
            </p>
          </div>
          <div
            class="w-full h-full grid grid-cols-1 lg:grid-cols-5 lg:grid-rows-2 lg:place-items-center lg:place-content-stretch gap-4"
          >
            <div
              class="w-full h-96 bg-LA bg-cover rounded-xl lg:row-span-2 lg:col-span-2 lg:h-[49rem] lg:text-right lg:bg-center lg:pt-12"
            >
              <p class="card-title">Los Angeles</p>
              <p class="text-sm pl-8 text-white mr-24 lg:mr-8 lg:text-base">
                4 rooms, 3 bathrooms, kitchen and private pool.
              </p>
            </div>
            <div
              class="w-full h-96 bg-miami bg-cover rounded-xl lg:row-span-1 lg:col-span-3 lg:text-right lg:bg-center lg:pt-12"
            >
              <p class="card-title">Miami</p>
              <p class="text-sm pl-8 text-white mr-24 lg:mr-8 lg:text-base">
                3 rooms, 2 bathrooms, kitchen and amazing sea view.
              </p>
            </div>
            <div
              class="w-full h-96 bg-bali bg-cover rounded-xl lg:row-span-1 lg:col-span-3 lg:text-right lg:bg-center lg:pt-12"
            >
              <p class="card-title">Bali</p>
              <p class="text-sm pl-8 text-white mr-24 lg:mr-8 lg:text-base">
                2 rooms, 2 bathrooms, kitchen and private pool.
              </p>
            </div>
          </div>
        </div>
      </div>

La verdad fue que me enred茅 bastante haci茅ndolo con los <div>, as铆 que lo hice con grid.
Por si alguien le pasa igual, comparto mi c贸digo

<div id="rentas_destacadas" class="h-full w-full px-6">
    <p class="text-3xl text-primary font-semibold pb-6 mt-6">
        Rentas destacadas
    </p>
    <div
        class="w-ful h-full grid grid-cols-1 lg:grid-cols-2 lg:place-items-center gap-4 lg:place-content-stretch"
    >
        <div
            class="relative w-full h-96 rounded-lg overflow-hidden lg:col-span-2"
        >
            <img
                class="object-cover h-full w-full"
                src="./img/chicago.jpg"
                alt=""
            />
            <div class="absolute top-0 left-0">
                <p class="text-3xl px-8 pt-8 pb-2 font-semibold text-light">Chicago</p>
                <p class="text-sm pl-8 text-light mr-24">
                    2 habitaciones, ba帽o y cocina
                </p>
            </div>
        </div>
        <div
            class="relative w-full h-96 rounded-lg overflow-hidden lg:row-span-2 lg:h-[49rem]"
        >
            <img class="object-cover h-full w-full" src="./img/LA.jpg" alt="" />
            <div class="absolute top-0 left-0">
                <p class="text-3xl px-8 pt-8 pb-2 font-semibold text-light">Los Angeles</p>
                <p class="text-sm pl-8 text-light mr-24">
                    2 habitaciones, ba帽o y cocina
                </p>
            </div>
        </div>
        <div class="relative w-full h-96 rounded-lg overflow-hidden">
            <img
                class="object-cover h-full w-full"
                src="./img/miami.jpg"
                alt=""
            />
            <div class="absolute top-0 left-0">
                <p class="text-3xl px-8 pt-8 pb-2 font-semibold text-light">Miami</p>
                <p class="text-sm pl-8 text-light mr-24">
                    2 habitaciones, ba帽o y cocina
                </p>
            </div>
        </div>
        <div class="relative w-full h-96 rounded-lg overflow-hidden">
            <img
                class="object-cover h-full w-full"
                src="./img/bali.jpg"
                alt=""
            />
            <div class="absolute top-0 left-0">
                <p class="text-3xl px-8 pt-8 pb-2 font-semibold text-light">Bali</p>
                <p class="text-sm pl-8 text-light mr-24">
                    2 habitaciones, ba帽o y cocina
                </p>
            </div>
        </div>
    </div>
</div>

Y tambi茅n utilice etiquetas <img> para las im谩genes en lugar de clases bg-鈥渘ombre_imagen.jpg鈥.

Secci贸n rentas destacadas de archivo index.html:

<div class="px-6 w-auto lg:px-6" id="rentas_destacadas">
            <p class="text-3xl text-primary font-semibold pb-6 mt-2">Rentas destacadas</p>
            <div class="w-full h-full flex flex-col items-center justify-center">
                <div class="w-full h-96 bg-chicago bg-cover rounded-xl mb-6 lg:bg-center">
                    <p class="CardTitle lg:text-b">Chicago</p>
                    <p class="text-sm pl-8 text-white mr-24 lg:text-lg">2 habitaciones, ba帽o y cocina</p>
                </div>
                <div class="lg:flex lg:h-full lg:w-full lg:space-x-4">
                    <div class="w-full h-96 bg-LA bg-cover rounded-xl mb-6 lg:h-auto">
                        <p class="CardTitle">Los Angeles</p>
                        <p class="text-sm pl-8 text-white mr-24 lg:text-lg">3 habitaciones, 2 ba帽os, cocina y excelente vista al mar.</p>
                    </div>
                    <div class="h-full w-full">
                        <div class="w-full h-96 bg-miami bg-cover rounded-xl mb-6">
                            <p class="CardTitle">Miami</p>
                            <p class="text-sm pl-8 text-white mr-24 lg:text-lg">4 habitaciones, 3 ba帽os, cocina y piscina privada</p>
                        </div>
                        <div class="w-full h-96 bg-bali bg-cover rounded-xl mb-6">
                            <p class="CardTitle">Bali</p>
                            <p class="text-sm pl-8 text-white mr-24 lg:text-lg">2 habitaciones, ba帽o, cocina y piscina privada</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>