content
Tailwind CSS Blockquote
The blockquote component serves as a tool to incorporate quoted text from an external source, ideal for testimonials, reviews, and quotes within an article.
Basic blockquote example.
The blockquote element is ideal for showcasing well-known quotes within content. It's commonly used for testimonials, reviews, and notable quotes in articles.
<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>An example of a centered blockquote.
The blockquote element is ideal for showcasing well-known quotes within content. It's commonly used for testimonials, reviews, and notable quotes in articles.
<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>An example of a end blockquote.
The blockquote element is ideal for showcasing well-known quotes within content. It's commonly used for testimonials, reviews, and notable quotes in articles.
<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>Labeling a source with a name.
The blockquote element is ideal for showcasing well-known quotes within content. It's commonly used for testimonials, reviews, and notable quotes in articles.
<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>Labeling a source with an avatar.
The blockquote element is ideal for showcasing well-known quotes within content. It's commonly used for testimonials, reviews, and notable quotes in articles.
<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>