Códigos para maquetado

Estoy trabajando en la carga de contenidos en una plataforma Moodle, y muchos/as docentes me envían algunos cuadros en imágenes que podrían estar en texto. Por una cuestión de accesibilidad, siempre que el tiempo me alcanza, paso esos cuadros a código.

Voy a ir guardando en este posteo esos códigos, para volver a usarlos yo misma, y para compartir con quienes se encuentren en una situación similar.

Recuadrito a la derecha de un texto

<div style="float: right; width: 40%;background-color: #d5dfee; padding: 1.5em; margin: 2em; border: 1px #123872 solid; text-align: center;"><em>"He pasado una noche estupenda, pero no ha sido esta"</em></div>

Recuadrito con bordes redondeados

<div style="float: right; width: 40%;background-color: #d5dfee; padding: 1.5em; margin: 2em; border: 1px #123872 solid; text-align: center; border-radius: 25px;"><em>"He pasado una noche estupenda, pero no ha sido esta"</em></div>

Recuadro título de pestaña

<div style="width: 80%; border: 2px solid #012760; text-align: center; padding: 1em; margin-left: auto; margin-right: auto; background-color: #C6D2DD;">
    <h4 style="color: rgb(1, 39, 96); text-align: center;">Clase 1</h4>
</div>

Imagen con pie de imagen a la derecha del texto

<div style="clear: both;"><div style="float: right; width: 20%;"><img src="https://irisfernandez.com.ar/betaweblog/wp-content/uploads/2023/04/405px-Tux.png" alt="tux"><p style="font-size: 70%; font-style: italic; text-align: center;" >Fuente: Wikipedia</p></div><p>Tux es el nombre de la mascota oficial de Linux. Creado por Larry Ewing en 1996, es un pequeño pingüino de aspecto risueño y cómico basado en una imagen que Linus Torvalds encontró en un servidor FTP. </p></div>

Lista de ítems

<br>
<div style="clear: both;">
    <div style="float: left; border: 1px solid #000077; padding: 0.5%; margin: 0.9%; width: 5%; text-align: center; font-size: 300%; color: #000077;">1</div>
    <div style="float: left; border: 1px solid #000077; padding: 1em; margin: 1em; width: 60%; text-align: center; ">

        <p>Primer paso</p>
    </div>
</div>

<div style="clear: both;">
    <div style="float: left; border: 1px solid #000077; padding: 0.5%; margin: 0.9%; width: 5%; text-align: center; font-size: 300%; color: #000077;">2</div>
    <div style="float: left; border: 1px solid #000077; padding: 1em; margin: 1em; width: 60%; text-align: center; ">

        <p>Segundo paso</p>
    </div>
</div>

<div style="clear: both;">
    <div style="float: left; border: 1px solid #000077; padding: 0.5%; margin: 0.9%; width: 5%; text-align: center; font-size: 300%; color: #000077;">3</div>
    <div style="float: left; border: 1px solid #000077; padding: 1em; margin: 1em; width: 60%; text-align: center; ">

        <p>Tercer paso</p>
    </div>
</div>

<div style="clear: both;">
    <div style="float: left; border: 1px solid #000077; padding: 0.5%; margin: 0.9%; width: 5%; text-align: center; font-size: 300%; color: #000077;">4</div>
    <div style="float: left; border: 1px solid #000077; padding: 1em; margin: 1em; width: 60%; text-align: center; ">

        <p>Cuarto paso</p>
    </div>
</div>