A few months ago I started a series of articles where I show you how to build commonly used UI components in Tailwind CSS such as navbars, modals, buttons, carousel sliders, and more.
Today I want to show you how you can build a blockquote component that is often used to quote third-party sources inside article, user testimonials, reviews, and more.
Let me tell you a little about the technologies that we will use to build this component.
Tailwind CSS is the most popular utility-first CSS framework that you can use to write the styles directly from your HTML without having to touch your CSS file.
Flowbite is the most popular and open-source component library built on top of Tailwind CSS featuring navbars, modals, buttons, dropdowns, and more.
Here's a preview of the blockquote component that we will build:
Without further ado, let's get started.
Tailwind CSS Blockquote
Before getting started, you will have to have Tailwind CSS installed in your project. You can check out their quickstart guide.
Additionally, in order to use other advanced components from the Flowbite library you can also install it via NPM using the quickstart guide.
After having both projects installed, let's first set up the HTML of the blockquote:
<blockquote>
<p>"Flowbite is just awesome. It contains tons of predesigned components and pages starting from login screen to complex dashboard. Perfect choice for your next SaaS application."</p>
</blockquote>
Great! Now let's add some styles to the paragraph:
<blockquote>
<p class="text-xl italic font-medium leading-relaxed text-gray-900">"Flowbite is just awesome. It contains tons of predesigned components and pages starting from login screen to complex dashboard. Perfect choice for your next SaaS application."</p>
</blockquote>
Looking better. Let's now add some background and styles to the blockquote element itself:
<blockquote class="p-4 my-4 bg-gray-50 border-l-4 border-gray-300">
<p class="text-xl italic font-medium leading-relaxed text-gray-900">"Flowbite is just awesome. It contains tons of predesigned components and pages starting from login screen to complex dashboard. Perfect choice for your next SaaS application."</p>
</blockquote>
Awesome! Now the blockquote should look like in the preview.
Let's now add some dark mode classes:
<blockquote class="p-4 my-4 bg-gray-50 border-l-4 border-gray-300 dark:border-gray-500 dark:bg-gray-800">
<p class="text-xl italic font-medium leading-relaxed text-gray-900 dark:text-white">"Flowbite is just awesome. It contains tons of predesigned components and pages starting from login screen to complex dashboard. Perfect choice for your next SaaS application."</p>
</blockquote>
The result should look like this (with dark mode enabled):
Learn how to enable a dark mode switcher with Tailwind CSS.
You can check out more examples of a Tailwind CSS blockquote by browsing the Flowbite documentation.
Blockquote with icon
Here's an example of a blockquote with icon:
Here's an example of a blockquote with a paragraph:
One more example of a blockquote as a user review:
Credits
This tutorial would not be possible without the awesome open-source projects such as Tailwind CSS and Flowbite:
Top comments (2)
niceee
cool