How to build a portfolio section with Tailwind CSS and Flowbite
Tags: tailwindcss, flowbite, webdev, tutorial
Published: 2023-04-03 15:55:45

Every web developer or designer should have a portfolio section on their personal website so today I'm going to show you how you can build a simple list of websites and their clients that you've worked on using Tailwind CSS and Flowbite.

Here's a preview of the section that we'll build:

[![Tailwind CSS Portfolio](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3glc7fajmsoyxrxl0jvi.png)](https://flowbite.com/blocks/marketing/portfolio/)

The example will be responsive on mobile devices and it also supports [dark mode](https://flowbite.com/docs/customize/dark-mode/) with Tailwind CSS:

[![Tailwind CSS Portfolio Dark Mode](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gvoaha2qferb5l726n4d.png)](https://flowbite.com/blocks/marketing/portfolio/)

Before we get started, let me introduce you to the technologies that you will require to code this example:

[Tailwind CSS](https://tailwindcss.com) is a popular and utility-first CSS framework that you can use to quickly build user interfaces directly from your HTML using the utility classes.

[Flowbite](https://flowbite.com) is the most popular and open-source UI component library built on top of the Tailwind CSS framework featuring interactive components such as navbars, dropdowns, modals, and more.

Without further ado - let's get started!

## Tailwind CSS Portfolio

The first step that we need to do is create a basic `<section>` tag and set up a wrapper div element that we will use to set the maximum width of the container:

```
<section>
   <div>
      <!-- our content will go here -->
   <div>
</section>
```

Next, we need to add background classes and to correctly position the content inside the wrapper div using the utility classes from Tailwind CSS:

```
<section class="bg-white dark:bg-gray-900">
   <div class="max-w-screen-xl px-4 py-8 mx-auto lg:px-6 sm:py-16 lg:py-24">
      <!-- our content will go here -->
   <div>
</section>
```

Awesome! Now let's add a title and description for the section that we can use to let our users knows it's a list of websites that you've worked on previously:

```
<div class="max-w-screen-xl px-4 py-8 mx-auto lg:px-6 sm:py-16 lg:py-24">
    <div class="max-w-2xl mx-auto text-center">
      <h2 class="text-3xl font-extrabold leading-tight tracking-tight text-gray-900 sm:text-4xl dark:text-white">
        Our work
      </h2>
      <p class="mt-4 text-base font-normal text-gray-500 sm:text-xl dark:text-gray-400">
        Crafted with skill and care to help our clients grow their business!
      </p>
</div>
```

Great job! Now let's create the actual block that we will use to introduce the name of the client, name of the project, a short description and a link to the main case study page:

```
<div class="grid grid-cols-1 mt-12 text-center sm:mt-16 gap-x-20 gap-y-12 sm:grid-cols-2 lg:grid-cols-3">
      <div class="space-y-4">
        <span
          class="bg-gray-100 text-gray-900 text-xs font-medium inline-flex items-center px-2.5 py-0.5 rounded dark:bg-gray-700 dark:text-gray-300">
          Alphabet Inc.
        </span>
        <h3 class="text-2xl font-bold leading-tight text-gray-900 dark:text-white">
          Official website
        </h3>
        <p class="text-lg font-normal text-gray-500 dark:text-gray-400">
          Flowbite helps you connect with friends, family and communities of people who share your interests.
        </p>
        <a href="#" title=""
          class="text-white bg-primary-700 justify-center hover:bg-primary-800 inline-flex items-center  focus:ring-4 focus:outline-none focus:ring-primary-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800"
          role="button">
          View case study
          <svg aria-hidden="true" class="w-5 h-5 ml-2 -mr-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"
            fill="currentColor">
            <path fill-rule="evenodd"
              d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z"
              clip-rule="evenodd" />
          </svg>
        </a>
</div>
```

Great stuff! Now all we need to do is add some more clients and put together these examples into a single block of code:

```
<section class="bg-white dark:bg-gray-900 antialiased">
  <div class="max-w-screen-xl px-4 py-8 mx-auto lg:px-6 sm:py-16 lg:py-24">
    <div class="max-w-2xl mx-auto text-center">
      <h2 class="text-3xl font-extrabold leading-tight tracking-tight text-gray-900 sm:text-4xl dark:text-white">
        Our work
      </h2>
      <p class="mt-4 text-base font-normal text-gray-500 sm:text-xl dark:text-gray-400">
        Crafted with skill and care to help our clients grow their business!
      </p>
    </div>

    <div class="grid grid-cols-1 mt-12 text-center sm:mt-16 gap-x-20 gap-y-12 sm:grid-cols-2 lg:grid-cols-3">
      <div class="space-y-4">
        <span
          class="bg-gray-100 text-gray-900 text-xs font-medium inline-flex items-center px-2.5 py-0.5 rounded dark:bg-gray-700 dark:text-gray-300">
          Alphabet Inc.
        </span>
        <h3 class="text-2xl font-bold leading-tight text-gray-900 dark:text-white">
          Official website
        </h3>
        <p class="text-lg font-normal text-gray-500 dark:text-gray-400">
          Flowbite helps you connect with friends, family and communities of people who share your interests.
        </p>
        <a href="#" title=""
          class="text-white bg-primary-700 justify-center hover:bg-primary-800 inline-flex items-center  focus:ring-4 focus:outline-none focus:ring-primary-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800"
          role="button">
          View case study
          <svg aria-hidden="true" class="w-5 h-5 ml-2 -mr-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"
            fill="currentColor">
            <path fill-rule="evenodd"
              d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z"
              clip-rule="evenodd" />
          </svg>
        </a>
      </div>

      <div class="space-y-4">
        <span
          class="bg-gray-100 text-gray-900 text-xs font-medium inline-flex items-center px-2.5 py-0.5 rounded dark:bg-gray-700 dark:text-gray-300">
          Microsoft Corp.
        </span>
        <h3 class="text-2xl font-bold leading-tight text-gray-900 dark:text-white">
          Management system
        </h3>
        <p class="text-lg font-normal text-gray-500 dark:text-gray-400">
          Flowbite helps you connect with friends, family and communities of people who share your interests.
        </p>
        <a href="#" title=""
          class="text-white bg-primary-700 justify-center hover:bg-primary-800 inline-flex items-center  focus:ring-4 focus:outline-none focus:ring-primary-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800"
          role="button">
          View case study
          <svg aria-hidden="true" class="w-5 h-5 ml-2 -mr-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"
            fill="currentColor">
            <path fill-rule="evenodd"
              d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z"
              clip-rule="evenodd" />
          </svg>
        </a>
      </div>

      <div class="space-y-4">
        <span
          class="bg-gray-100 text-gray-900 text-xs font-medium inline-flex items-center px-2.5 py-0.5 rounded dark:bg-gray-700 dark:text-gray-300">
          Adobe Inc.
        </span>
        <h3 class="text-2xl font-bold leading-tight text-gray-900 dark:text-white">
          Logo design
        </h3>
        <p class="text-lg font-normal text-gray-500 dark:text-gray-400">
          Flowbite helps you connect with friends, family and communities of people who share your interests.
        </p>
        <a href="#" title=""
          class="text-white bg-primary-700 justify-center hover:bg-primary-800 inline-flex items-center  focus:ring-4 focus:outline-none focus:ring-primary-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800"
          role="button">
          View case study
          <svg aria-hidden="true" class="w-5 h-5 ml-2 -mr-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"
            fill="currentColor">
            <path fill-rule="evenodd"
              d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z"
              clip-rule="evenodd" />
          </svg>
        </a>
      </div>
    </div>
  </div>
</section>
```

Make sure that you set the `primary` color inside your `tailwind.config.js` file or use something else such as `text-blue-600` instead of primary to make this work.

Here's the final result:

[![Tailwind CSS Portfolio](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/t1r76msqk07r20rkni9k.png)](https://flowbite.com/blocks/marketing/portfolio/)

You can check more examples with images and other layout by checking out the [Tailwind CSS Portolio components](https://flowbite.com/blocks/marketing/portfolio/) from the Flowbite Blocks collection.

## Credits

- [Tailwind CSS](https://tailwindcss.com/)
- [Flowbite](https://flowbite.com/)
- [Hero Icons](https://heroicons.dev/)