DEV Community

Haris#
Haris#

Posted on

How to make a TailwindCSS SaaS Landing Page in record time

Hi everyone,
My name is Haris and today I’ll be showing you how to make a SaaS Landing Page with TailwindCSS within 5 minutes, and the best part is that it’ll be totally free! So, let’s jump right in!

To make this Landing Page, we’ll be using the blox extension for VS Code. You can grab it for free here on VS Code Marketplace.

blox VS code Marketplace

Let's start things off with a hero section. I'll be using Center Aligned with Image for this.

Hero Section

Next up we’ll add a Feature section. Here you can highlight the main features of your product. For that purpose Feature 7 will work just fine.

Feature Section

After the feature section, we can add a Pricing section to showcase the offerings of the product. We’ll go with 3 Cards with Yellow Hover

Pricing Section

We’ll close things off with a CTA and I think Right Aligned Avatars with Gradient will look perfect for this.

CTA Section

And just like that, we’re done with the first draft of the SaaS Landing Page. Here’s how the end product looks.

Final Preview GIF

Since blox offers support for other frameworks like React, Angular and Vue, the same page can be developed for those projects as well. So with just a couple of clicks, we can set up the structure for our TailwindCSS landing page and make modifications according to the project from that point onwards. Hope this helps you save your precious developer hours.

You can access the page that I made here at: https://github.com/vs-blox/examples

Happy Developing!

Top comments (0)