This content originally appeared on DEV Community and was authored by Haris#
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.
Let's start things off with a hero section. I'll be using Center Aligned with Image for this.
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.
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
We’ll close things off with a CTA and I think Right Aligned Avatars with Gradient will look perfect for this.
And just like that, we’re done with the first draft of the SaaS Landing Page. Here’s how the end product looks.
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!
This content originally appeared on DEV Community and was authored by Haris#
Haris# | Sciencx (2021-11-12T15:38:11+00:00) How to make a TailwindCSS SaaS Landing Page in record time. Retrieved from https://www.scien.cx/2021/11/12/how-to-make-a-tailwindcss-saas-landing-page-in-record-time/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.