How to build a blockquote component in Tailwind CSS
Tags: tailwindcss, tutorial, opensource, flowbite
Published: 2022-08-22 10:16:33

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](https://flowbite.com/docs/typography/blockquote/) 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](https://tailwindcss.com/) 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](https://flowbite.com/) 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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yk045cxfy3cj5l0eo6nr.png)](https://flowbite.com/docs/typography/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](https://tailwindcss.com/docs/installation).

Additionally, in order to use other advanced components from the Flowbite library you can also install it via NPM using the [quickstart guide](https://flowbite.com/docs/getting-started/quickstart/).

After having both projects installed, let's first set up the HTML of the blockquote:

```html
<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:

```html
<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:

```html
<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:

```html
<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):

[![Tailwind CSS Blockquote](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gnx944d7gixuezpio5x4.png)](https://flowbite.com/docs/typography/blockquote/)

Learn how to enable a [dark mode switcher with Tailwind CSS](https://flowbite.com/docs/customize/dark-mode/).

You can check out more examples of a [Tailwind CSS blockquote](https://flowbite.com/docs/typography/blockquote/) by browsing the Flowbite documentation.

### Blockquote with icon

Here's an example of a [blockquote with icon](https://flowbite.com/docs/typography/blockquote/#blockquote-icon):

[![Tailwind CSS Blockquote Icon](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/li9cq8cug4i8rnojxs5j.png)](https://flowbite.com/docs/typography/blockquote/#blockquote-icon)

Here's an example of a [blockquote with a paragraph](https://flowbite.com/docs/typography/blockquote/#paragraph-context):

[![Tailwind CSS Blockquote Paragraph](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ioztltlemmkrgly1shra.png)](https://flowbite.com/docs/typography/blockquote/#paragraph-context)

One more example of a [blockquote as a user review](https://flowbite.com/docs/typography/blockquote/#user-testimonial):

[![Tailwind CSS Blockquote User Review](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bueq3q3wmgudbuy2lqsy.png)](https://flowbite.com/docs/typography/blockquote/#user-testimonial)

## Credits

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

- [Tailwind CSS](https://tailwindcss.com/)
- [Flowbite](https://flowbite.com/)