<template>
  <div class="tp-postbox-details-comment-wrapper">
    <h3 class="tp-postbox-details-comment-title">Comments (2)</h3>
    <div class="tp-postbox-details-comment-inner">
      <ul>
        <li>
          <div class="tp-postbox-details-comment-box d-sm-flex align-items-start">
            <div class="tp-postbox-details-comment-thumb">
              <img src="/images/users/user-2.jpg" alt="">
            </div>
            <div class="tp-postbox-details-comment-content">
              <div class="tp-postbox-details-comment-top d-flex justify-content-between align-items-start">
                <div class="tp-postbox-details-comment-avater">
                  <h4 class="tp-postbox-details-comment-avater-title">Lance Bogrol</h4>
                  <span class="tp-postbox-details-avater-meta">12 April, 2023 at 3.50pm</span>
                </div>
                <div class="tp-postbox-details-comment-reply">
                  <a href="#">Reply</a>
                </div>
              </div>
              <p>By defining and following internal and external processes, your team will have clarity on resources to
                <br> attract and retain customers for your business.</p>
            </div>
          </div>
          <ul class="children">
            <li>
              <div class="tp-postbox-details-comment-box d-sm-flex align-items-start">
                <div class="tp-postbox-details-comment-thumb">
                  <img src="/images/users/user-3.jpg" alt="">
                </div>
                <div class="tp-postbox-details-comment-content">
                  <div class="tp-postbox-details-comment-top d-flex justify-content-between align-items-start">
                    <div class="tp-postbox-details-comment-avater">
                      <h4 class="tp-postbox-details-comment-avater-title">Dasy Lily</h4>
                      <span class="tp-postbox-details-avater-meta">12 April, 2023 at 3.50pm</span>
                    </div>
                    <div class="tp-postbox-details-comment-reply">
                      <a href="#">Reply</a>
                    </div>
                  </div>
                  <p>By defining and following internal and external processes, your team will have clarity on resources
                    to <br> attract and retain customers for your business.</p>
                </div>
              </div>
            </li>
          </ul>
        </li>
        <li>
          <div class="tp-postbox-details-comment-box d-sm-flex align-items-start">
            <div class="tp-postbox-details-comment-thumb">
              <img src="/images/users/user-4.jpg" alt="">
            </div>
            <div class="tp-postbox-details-comment-content">
              <div class="tp-postbox-details-comment-top d-flex justify-content-between align-items-start">
                <div class="tp-postbox-details-comment-avater">
                  <h4 class="tp-postbox-details-comment-avater-title">Shahnewaz Sakil</h4>
                  <span class="tp-postbox-details-avater-meta">12 April, 2023 at 3.50pm</span>
                </div>
                <div class="tp-postbox-details-comment-reply">
                  <a href="#">Reply</a>
                </div>
              </div>
              <p>By defining and following internal and external processes, your team will have clarity on resources to
                <br> attract and retain customers for your business.</p>
            </div>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script setup lang="ts">

</script>
