10 Tailwind CSS portfolio templates, both free and paid
Tags: tailwindcss, css, html, webdev
Published: 2022-02-04 18:29:00

*This post was originally posted on [Red Pixel Themes](https://redpixelthemes.com/blog/tailwindcss-portfolio-templates/).*

---

_Note: Some of these links are affiliate links, which means we get compensated in some way if you buy through them._

## Free templates


![Atom template](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/96b8bkbuhcxynkeolqkb.jpg)

### Atom

[Demo](https://atom.redpixelthemes.com/) | [Get it here](https://redpixelthemes.com/templates/atom/)

**Important bits**

- HTML/CSS template, includes homepage and blog post pages
- Has code syntax highlighting

**Description**

Atom is a Portfolio HTML Template made with the latest technologies like TailwindCSS, Alpine.JS, among others, and based on a vibrant and creative design.


![Gradientti template](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/eb20kmi0gj7qfhjncofe.jpg)

### Gradientti

[Demo](https://www.wickedtemplates.com/viewports/gradientti) | [Get it here](https://www.wickedtemplates.com/viewports/gradientti)

**Important bits**

- One page design
- HTML/CSS and Next.js versions are available
- Uses Gulp for local development, including imagemin for automatically compressing images and posthtml for reusing partials


![Marfil template](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/13zgusg9v4mpagyukrlt.jpg)

### Marfil

[Demo](https://www.wickedtemplates.com/viewports/marfil) | [Get it here](https://www.wickedtemplates.com/viewports/marfil)

**Important bits**

- One page design
- HTML/CSS version only
- Uses Gulp for local development, including imagemin for automatically compressing images and posthtml for reusing partials


![Universal Résumé Template](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2fa7moso9eorpq0fdxll.jpg)

### Universal Résumé Template

[Demo](https://thomashighbaugh.github.io/resume/) | [Get it here](https://github.com/Thomashighbaugh/resume)

**Important bits**

- One page design
- Has a print version available (via the **`print`** modifier)

**Description**

This was inspired by, and parts adapted from, WebPraktikos' **`universal resume template`**, which tries harder to be supported across use cases so in case you need A4 sizing or anything else like that, I would check out his repo.

## Paid templates


![bostami](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yvhqlurp0xdzigmpq0tt.png)

### Bostami - Tailwind CSS Personal Portfolio Template

[Demo](https://preview.themeforest.net/item/bostami-tailwind-css-personal-portfolio-html5-template/full_screen_preview/38989944) | Price: $9 | [Get it here](https://themeforest.net/item/bostami-tailwind-css-personal-portfolio-html5-template/38989944)

**Important bits**

* HTML/CSS template
* Includes Light and Dark Mode
* Comes with working contact form and sticky navigation
* Fully Responsive for all devices

**Description**

Bostami – Tailwind CSS Personal Portfolio Template can be used for many purposes. It’s a creative, minimal and clean design. It’s 100% responsive and Ultra Super Fast because it’s made with Latest Tailwind CSS.


![bostamireact](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tsv89mj8xtubqluba56g.png)

### Bostami - Tailwind CSS Personal Portfolio React Template

[Demo](https://preview.themeforest.net/item/bostami-tailwind-css-personal-portfolio-react-template/full_screen_preview/38598542) | Price: $9 | [Get it here](https://themeforest.net/item/bostami-tailwind-css-personal-portfolio-react-template/38598542)

**Important bits**

* Made with React
* Comes with working contact form and sticky navigation
* Includes Light and Dark Mode

**Description**

Bostami – Personal Portfolio Tailwind CSS React Template can be used for many purposes. It’s a creative, minimal and clean design. It’s 100% responsive and Ultra Super Fast because it’s made with Latest React + Tailwind CSS.

![Portfolio website template](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lzw5ksk27bch6ge1tr1a.png)

### Portfolio website

[Demo](https://tailwinduikit.com/templates/portfolio-website) | Price: $13 | [Get it here](https://tailwinduikit.com/templates/portfolio-website)

**Important bits**

- One page design
- Meets WCAG accessibility guidelines
- Retina ready

**Description**

Portfolio website is ideal for people looking to build a portfolio for any field. A visualizing stunning design and an extraordinary interface ensure the portfolio website to be a proven winner.


![Reels template](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xj8m3j8as2f3k6oxxnig.jpg)

### Reels

[Demo](https://tailwinduikit.com/templates/reels-photography-template) | Price: $13 | [Get it here](https://tailwinduikit.com/templates/reels-photography-template)

**Important bits**

- HTML/CSS template, includes homepage, gallery and contact pages
- Retina ready
- Meets WCAG accessibility guidelines

**Description**

Reels is a cutting edge, stylish website which can be best used to display a photography portfolio. With an aesthetic design and clean visuals reels will elevate your portfolio to the next level.


![Crator Studio template](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8dw6xpmwyi9xu40q7vx2.jpg)

### Crator Studio

[Demo](https://www.tailwindawesome.com/resources/crator-studio/demo) | Price: $29 | [Get it here](https://www.tailwindawesome.com/resources/crator-studio)

**Important bits**

- HTML/CSS template, includes 6 responsive pages
- Dark and modern design
- Includes **`netlify.toml`** file to easily deploy with Netlify

**Description**

Crator is a modern & dark Agency HTML theme built on top of the latest Tailwind CSS 3.0 framework. It includes all of the needed features to create a beautiful and incredibly fast and responsive creative agency & portfolio website.


![Portfolio template](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ifs68j41j0mbmfz3fia0.jpg)

### Portfolio

[Demo](https://portfolio-tailwind.preview.uideck.com/) | Price: $19 | [Get it here](https://uideck.com/templates/portfolio-tailwind/)

**Important bits**

- HTML/CSS template, includes 4 pages
- 2 Unique Template Variations (Agency & Personal portfolio)

**Description**

Portfolio Tailwind is a multi-purpose portfolio web template that comes with 2 unique variations for - Personal Portfolio and Agency portfolio site. This Tailwind CSS portfolio template is packaged with all essential UI components you might need to create almost all sorts of portfolio sites.