Tailwind CSS Blockquote

<blockquote class="relative p-4">
  <span class="icon-[tabler--quote] text-base-300/20 absolute -start-3 -top-3 size-16 rotate-180 rtl:rotate-0"></span>

  <div class="relative z-1">
    <p class="text-base-content text-lg">
      <em>
        The blockquote element is ideal for showcasing well-known quotes within content. It's commonly used for
        testimonials, reviews, and notable quotes in articles.
      </em>
    </p>
  </div>
</blockquote>

<blockquote class="relative mx-auto p-4 text-center">
  <span class="icon-[tabler--quote] text-base-300/20 absolute -top-3 start-2 size-16 rotate-180 rtl:rotate-0"></span>

  <div class="relative z-1">
    <p class="text-base-content text-lg">
      <em>
        The blockquote element is ideal for showcasing well-known quotes within content. It's commonly used for
        testimonials, reviews, and notable quotes in articles.
      </em>
    </p>
  </div>
</blockquote>

<blockquote class="relative ms-auto p-4 text-end">
  <span class="icon-[tabler--quote] text-base-300/20 absolute -top-3 start-6 size-16 rotate-180 rtl:rotate-0"></span>

  <div class="relative z-1">
    <p class="text-base-content text-lg">
      <em>
        The blockquote element is ideal for showcasing well-known quotes within content. It's commonly used for
        testimonials, reviews, and notable quotes in articles.
      </em>
    </p>
  </div>
</blockquote>

<blockquote class="relative p-4">
  <span class="icon-[tabler--quote] text-base-300/20 absolute -start-3 -top-3 size-16 rotate-180 rtl:rotate-0"></span>

  <div class="relative z-1">
    <p class="text-base-content text-lg">
      <em>
        The blockquote element is ideal for showcasing well-known quotes within content. It's commonly used for
        testimonials, reviews, and notable quotes in articles.
      </em>
    </p>
  </div>
  <footer class="mt-4">
    <div class="text-base-content/50 text-base font-semibold">~ Shamus Tuttle</div>
  </footer>
</blockquote>

<blockquote class="relative p-4">
  <span class="icon-[tabler--quote] text-base-300/20 absolute -start-3 -top-3 size-16 rotate-180 rtl:rotate-0"></span>

  <div class="relative z-1">
    <p class="text-base-content text-lg">
      <em>
        The blockquote element is ideal for showcasing well-known quotes within content. It's commonly used for
        testimonials, reviews, and notable quotes in articles.
      </em>
    </p>
  </div>
  <footer class="mt-4 flex items-center">
    <div class="avatar">
      <div class="size-10 rounded-full">
        <img src="https://cdn.flyonui.com/fy-assets/avatar/avatar-1.png" alt="avatar" />
      </div>
    </div>
    <div class="ms-4">
      <div class="text-base-content text-base font-semibold">Shamus Tuttle</div>
      <div class="text-base-content/50 text-xs">Source title</div>
    </div>
  </footer>
</blockquote>