<ul class="g-message-container">
<li class="message" id="message-1">
<img src="https://picsum.photos/40/40" alt="User 1" class="avatar"/>
<div class="message-content">Lorem ipsum dolor sit amet, consectetur Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores earum expedita explicabo fuga harum quibusdam repellat sint sit. Alias distinctio harum illo incidunt, ipsum iusto natus quas voluptate. Ad amet assumenda cumque cupiditate deleniti doloremque facilis nobis omnis voluptate voluptates. Consequatur dignissimos dolor, doloremque earum excepturi explicabo fuga inventore ipsa laborum maxime nostrum pariatur quam quo quod quos, recusandae sed sequi tenetur unde velit? Animi aspernatur consectetur eum fugiat iste, libero molestias nemo reiciendis sequi? Consequuntur dolorem ducimus, eos et illum impedit incidunt magni nobis officiis provident, quam quia quibusdam quidem vero voluptas! Deserunt harum nemo odio placeat quo quos!
<small class="g-date-time">12-20-2024 | 10:10am </small>
</div>
<ul class="replies">
<li class="message reply" id="reply-1-1">
<img src="https://picsum.photos/40/40" alt="User 2"
class="avatar"/>
<div class="message-content">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam iure, minima quam quo sit tenetur unde voluptas. Aut cum facilis iste quam sint! Ab asperiores dicta, distinctio, doloribus ea eum fugiat itaque laboriosam laborum mollitia omnis optio, tempore! A animi architecto at cumque debitis dignissimos ducimus exercitationem expedita fugit incidunt ipsum iusto labore laudantium minima mollitia nemo nulla praesentium quas rerum sapiente sit sunt, tempora tenetur. Ab delectus distinctio dolorum explicabo impedit, neque nihil non nostrum perspiciatis voluptatem. Blanditiis culpa est eveniet, expedita nam odio omnis quisquam quos reprehenderit saepe sint, sunt tempore voluptate? Consectetur corporis debitis deleniti doloribus esse ipsum laboriosam maxime mollitia necessitatibus officiis omnis qui quod recusandae rem sed sit soluta, vel voluptas voluptatibus voluptatum! Eligendi in magnam natus optio placeat possimus repellat reprehenderit, sequi, sit unde ut vel voluptates! Cum dolores iste libero nihil nostrum quaerat. Accusantium blanditiis deleniti dolor error facilis itaque nostrum odio possimus qui voluptate? Aspernatur aut eos est fugiat magnam natus numquam saepe. Ad commodi consequuntur debitis fugit officiis optio quos sed temporibus voluptas voluptatem. Amet asperiores assumenda eum ex iste laudantium maxime optio provident quo voluptatum. A aspernatur atque, debitis esse est nihil numquam praesentium provident? Beatae cumque debitis eos exercitationem hic incidunt iste mollitia quo rerum velit. Ad culpa delectus doloremque eligendi facilis labore possimus quam, recusandae soluta! At cum delectus esse excepturi facilis impedit in inventore, modi mollitia nihil perspiciatis quae quas sapiente totam ut voluptates voluptatibus. Adipisci alias consequuntur cumque deserunt doloremque dolores dolorum ducimus est explicabo, fugit harum impedit ipsam laboriosam laborum libero, molestiae, nihil nobis provident quia quos ratione soluta suscipit velit. Consequatur cum incidunt nemo odio voluptas? Amet animi asperiores aspernatur consequuntur delectus distinctio dolorum eaque eius, explicabo harum illo, iusto laboriosam molestiae mollitia, nam nesciunt nisi perferendis possimus praesentium quas reiciendis rem vero voluptatem.
<small class="g-date-time">12-20-2024 | 10:10am </small>
</div>
<ul class="replies">
<li class="message reply" id="reply-1-1-1">
<img src="https://picsum.photos/40/40" alt="User 3"
class="avatar"/>
<div class="message-content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium corporis culpa eos minima natus praesentium ut! Animi architecto dolor, ducimus facere, iusto maiores nemo optio quisquam quos saepe ullam, velit.
<small class="g-date-time">12-20-2024 |
10:10am </small>
</div>
</li>
</ul>
</li>
<li class="message reply" id="reply-1-2">
<img src="https://picsum.photos/40/40" alt="User 4"
class="avatar"/>
<div class="message-content">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos eaque enim similique! Ab architecto consectetur dignissimos ipsam nobis quasi qui quisquam quos sint voluptatibus. Cum iure maxime nobis quas recusandae.
<small class="g-date-time">12-20-2024 | 10:10am </small>
</div>
</li>
</ul>
</li>
</ul>
.g-message-container {
list-style-type: none;
margin: 0 auto;
background-color: #fff;
border-radius: 10px;
}
.message {
position: relative;
padding: 0 20px 10px 60px;
border-radius: 5px;
margin-bottom: 10px;
font-size: 14px;
}
.message .g-date-time {
font-size: 11px;
display: block;
font-weight: bold;
}
.avatar {
position: absolute;
top: 0;
left: 10px;
width: 40px;
height: 40px;
border-radius: 50%;
border: 2px solid #ccc;
}
.message-content {
position: relative;
z-index: 2;
}
.replies {
list-style-type: none;
margin-top: 25px;
margin-left: 25px;
padding-left: 0;
}
.message::before {
content: '';
position: absolute;
left: 30px;
top: 55px;
bottom: 108px;
width: 1px;
background: #ddd;
}
.message.reply::before {
background: #ddd;
bottom: 108px;
top: 45px;
}
ul.replies > .message.reply::after {
content: '';
position: absolute;
left: -55px;
top: 0;
width: 60px;
bottom: 55px;
height: 20px;
border-color: #ddd;
border-width: 0 0 1px 1px;
border-style: solid;
border-bottom-left-radius: 25px;
}
