Desktop design

Active states

Modal design

Mobile design

Interactive comments section

<div class="userinfo flex">
                    <img src="images/avatars/image-amyrobson.png" alt="">
                    <strong class="username">amyrobson</strong>
                    
                </div>

<div class="another-user">
                        <a href="#formOfComment_1" class="reply flex">
                            <span class="icon-small"><img src="images/icon-reply.svg" alt=""></span> <strong>Reply</strong>
                        </a>
                    </div>

<p class="comment-content">
                <strong class="username">@roby </strong>Impressive! Though it seems the drag feature could be improved. But overall it looks incredible. You've nailed the design and the responsiveness at various breakpoints works really well.
            </p>

<div class="userinfo flex">
                    <img src="images/avatars/image-maxblagun.png" alt="">
                    <strong class="username">maxblagun</strong>
                    
                </div>

<div class="another-user">
                        <a href="#formOfComment_2" class="reply flex">
                            <span class="icon-small"><img src="images/icon-reply.svg" alt=""></span> <strong>Reply</strong>
                        </a>
                    </div>

<strong class="username">ramsesmiron</strong>

<p class="comment-content">
                        <strong>@maxblagun</strong> If you're still new, I'd recommend focusing on the fundamentals of HTML, CSS, and JS before considering React. It's very tempting to jump ahead but lay a solid foundation first.
                    </p>

<div class="userinfo flex">
                            <img src="images/avatars/image-juliusomo.png" alt="">
                            <strong class="username">juliusomo</strong>
                            <span class="you">You</span>
                        </div>

<p class="comment-content">
                        <strong>@ramsesmiron</strong> I couldn't agree more with this. Everything moves so fast and it always seems like everyone knows the newest library/framework. But the fundamentals are what stay constant.
                    </p>

userinfo"><img src="images/avatars/image-juliusomo.png" alt="" srcset=""></div>

userinfo"><img src="images/avatars/image-juliusomo.png" srcset=""></div>

>  <form action="" class="flex reply-form" data-comment-index="1" data-comment-author="amyrobson" state="reply">

>  <form action="" class="flex reply-form" data-comment-index="2" data-comment-author="maxblagun" state="reply">

Please log in to post a comment

Community feedback

Responsive Comment Section Design Using HTML, CSS & JS

Solution retrospective

Please log in to post a comment

Community feedback

Join our Discord community