Crear un listado de chats con Electron.js y Bootstrap 5 9

En este apartado, vamos a crear un listado de mensajes o chats, el cual, será una estructura similares a la de listado de contactos construida en la anterior entrada:

<div class="col-8" id="right">
    <div class="d-flex chat">
        <div class="w-25 d-flex align-items-end justify-content-end">
            <img class="rounded-pill me-3 avatar" width="60"
                src="https://randomuser.me/api/portraits/men/17.jpg">
        </div>
        <div class="w-75">
            <div class="card">
                <div class="card-body">
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloribus reprehenderit
                    voluptatibus cumque, deserunt deleniti consequatur adipisci nisi consequuntur sunt itaque?
                    Sunt aspernatur, ratione labore ipsam enim unde itaque dolorum magni?
                </div>
            </div>
            <p class="small text-muted">8:45 PM</p>
        </div>
    </div>
    <div class="d-flex chat">
        <div class="w-75 ">
            <div class="card bg-dark">
                <div class="card-body text-light">
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloribus reprehenderit
                    voluptatibus cumque, deserunt deleniti consequatur adipisci nisi consequuntur sunt itaque?
                    Sunt aspernatur, ratione labore ipsam enim unde itaque dolorum magni?
                </div>
            </div>
            <p class="small text-muted float-end">9:17 AM</p>
        </div>
        <div class="w-25 d-flex align-items-end">
            <img class="rounded-pill ms-3 avatar" src="https://randomuser.me/api/portraits/men/19.jpg">
        </div>
    </div>
</div>

Y usaremos el siguiente CSS:

css/style.css

#right {
    background-color: #333;
    ***
}
.chat {
    margin-top: 8px;
}
.chat img.avatar {
    width: 50px;
    height: 50px;
}

Con esto, quedará de la siguiente manera:

Lo siguiente que vamos a crear, es un listado de chats.

Recuerda que el material anterior forma parte sobre mi curso completo sobre Electron.js