How to build a portfolio section with Tailwind CSS and Flowbite
Zoltán Szőgyényi
Posted on April 3, 2023
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:
The example will be responsive on mobile devices and it also supports dark mode with Tailwind CSS:
Before we get started, let me introduce you to the technologies that you will require to code this example:
Tailwind CSS 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 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:
You can check more examples with images and other layout by checking out the Tailwind CSS Portolio components from the Flowbite Blocks collection.
Credits
Posted on April 3, 2023
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.
Related
December 29, 2022
