DEV Community

Cover image for How to build a blockquote component in Tailwind CSS
Zoltán Szőgyényi for Themesberg

Posted on • Originally published at flowbite.com

How to build a blockquote component in Tailwind CSS

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:

Tailwind CSS Blockquote

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

The result should look like this (with dark mode enabled):

Tailwind CSS Blockquote

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:

Tailwind CSS Blockquote Icon

Here's an example of a blockquote with a paragraph:

Tailwind CSS Blockquote Paragraph

One more example of a blockquote as a user review:

Tailwind CSS Blockquote User Review

Credits

This tutorial would not be possible without the awesome open-source projects such as Tailwind CSS and Flowbite:

Top comments (2)

Collapse
 
sm0ke profile image
Sm0ke

niceee

Collapse
 
admindashboards profile image
admin-dashboards

cool