<div class="card">
   <div class="card-header">
      <div class="card-title">Comments</div>
   </div>
   <div class="card-body">
      <div class="d-flex mb-5">
         <div class="mr-4">
            <span class="avatar" style="background-image: url(./static/avatars/000m.jpg)">
               <span class="badge bg-green"></span>
            </span>
         </div>
         <div class="flex-fill">
            <div class="d-flex mt-n1">
               <h5 class="m-0">
                  Paweł Kuna
               </h5>
               <div class="ml-auto small text-muted">1 week ago</div>
            </div>
            <p class="mb-2">
               This is PERFECT
            </p>
            <div class="small">
               <span class="text-success mr-1">+47</span>
               <a href="#" data-toggle="tooltip" data-placement="top" title="Vote Up"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polyline points="18 15 12 9 6 15"></polyline></svg>
               </a>
               <a href="#" class="mr-1" data-toggle="tooltip" data-placement="top" title="Vote Down">
                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polyline points="6 9 12 15 18 9"></polyline></svg>
               </a>
               <span class="mr-1">·</span>
               <a href="#" class="mr-1 text-muted">Reply</a>
               <span class="mr-1">·</span>
               <a href="#" class="text-muted">Edit</a>
            </div>
         </div>
      </div>
      <div class="d-flex mb-5">
         <div class="mr-4">
            <span class="avatar">
               <span class="badge bg-green"></span>
               JL</span>
         </div>
         <div class="flex-fill">
            <div class="d-flex mt-n1">
               <h5 class="m-0">
                  Jeffie Lewzey
               </h5>
               <div class="ml-auto small text-muted">1 week and 4 days ago</div>
            </div>
            <p class="mb-2">
               She is so damn beautiful OMG i love her!!! does somebody knows what kind of music is this? sorry xD
            </p>
            <div class="small">
               <span class="text-success mr-1">+45</span>
               <a href="#" data-toggle="tooltip" data-placement="top" title="Vote Up"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polyline points="18 15 12 9 6 15"></polyline></svg>
               </a>
               <a href="#" class="mr-1" data-toggle="tooltip" data-placement="top" title="Vote Down">
                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polyline points="6 9 12 15 18 9"></polyline></svg>
               </a>
               <span class="mr-1">·</span>
               <a href="#" class="mr-1 text-muted">Reply</a>
               <span class="mr-1">·</span>
               <a href="#" class="text-muted">Edit</a>
            </div>
         </div>
      </div>
      <div class="d-flex">
         <div class="mr-4">
            <span class="avatar" style="background-image: url(./static/avatars/002m.jpg)">
               <span class="badge bg-green"></span>
            </span>
         </div>
         <div class="flex-fill">
            <div class="d-flex mt-n1">
               <h5 class="m-0">
                  Mallory Hulme
               </h5>
               <div class="ml-auto small text-muted">2 days ago</div>
            </div>
            <p class="mb-2">
               Did anyone go camping in Oshkosh Wisconsin last month?
            </p>
            <div class="small">
               <span class="text-success mr-1">+32</span>
               <a href="#" data-toggle="tooltip" data-placement="top" title="Vote Up"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polyline points="18 15 12 9 6 15"></polyline></svg>
               </a>
               <a href="#" class="mr-1" data-toggle="tooltip" data-placement="top" title="Vote Down">
                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polyline points="6 9 12 15 18 9"></polyline></svg>
               </a>
               <span class="mr-1">·</span>
               <a href="#" class="mr-1 text-muted">Reply</a>
               <span class="mr-1">·</span>
               <a href="#" class="text-muted">Edit</a>
            </div>
         </div>
      </div>
   </div>
</div>