Entonces, estoy haciendo un proyecto en React y tengo esta etiqueta div que es un contenedor que consta de información representada en esta primera imagen . Entonces, lo que me gustaría hacer es dentro de ese div sin que la página se actualice, cambie la visualización a esta segunda imagen . Es como una tarjeta apilada una sobre la otra. No tengo idea de qué palabras clave buscar en Google, así que no pude encontrar ningún ejemplo para hacer esto.

Aquí está mi código html and css para mi div en la first image .

HTML

 <div className={styles.showTicketBox}> <div className={styles.showTicketBox1}> <div className={styles.userEligibleTickets}> <p>Your Eligible Tickets</p> <h3 style={tokenContent}>0 Ticket(s)</h3> </div> <div className={styles.userDepositedTickets}> <p>Your Deposited Tickets</p> <h3 style={tokenContent}>0 Ticket(s)</h3> </div> </div> <div className={styles.showTicketBox2}> <div className={styles.userWinningTickets}> <p>Your Winning Tickets</p> <h3 style={tokenContent}>0 Ticket(s)</h3> </div> <div className={styles.userTicketsAllo}> <p>Your Allocation</p> <h3 style={tokenContent}>0 SHI</h3> </div> </div> </div>

CSS

 .showTicketBox{ width: 100%; display: flex; justify-content: space-around; padding: 20px; margin-top: 2em; .showTicketBox1{ width: auto; height:auto; display: inline-block; } .showTicketBox2{ width: auto; height:auto; position: relative; display: inline-block; } }