Estoy tratando de crear un div con una sección izquierda fija y una sección derecha desplazable y otros divs debajo de ellos. Revisé muchas publicaciones de blog y no puedo descifrar cómo crear esta página en particular en reaccionar JS usando Tailwind CSS. Estoy usando reaccionar JS y Tailwind CSS. Agregué la estructura de mi página y también agregué una página similar como referencia.

Estructura de mi página:

 <div className="mainDiv"> <div className="rowDiv"> <div className="staticDiv"> <ProductImages images={productData.mediaUrls} /> </div> <div className="scrollableDiv"> <ProductInfo productData={productData} /> </div> </div> <div className="relatedProductsDiv"> <RelatedProducts sectionHeading="Related products" /> </div> <div className="recentlyViewedProductsDiv"> <RecentlyViewedProducts sectionHeading="Recently viewed products" /> </div> </div>

Página similar: Haga clic aquí para ver una página similar

1. div con className staticDiv debe desplazarse solo después de que scrollableDiv complete su desplazamiento completo.
2. una vez que scrollableDiv finaliza su desplazamiento completo, ambos divs (staticDiv y scrollableDiv) deben desplazarse normalmente para mostrar los productos relacionadosDiv y los productos vistos recientementeDiv.
3. Haga clic aquí para ver una página similar para obtener mi pregunta con más detalle.
4. Estoy tratando de crear una página similar a la del enlace.