DEV Community

Cover image for Show dev: I built an open-source landing page for Tailwind CSS
Zoltán Szőgyényi for Themesberg

Posted on • Originally published at themesberg.com

30 7

Show dev: I built an open-source landing page for Tailwind CSS

Hey devs đź‘‹

Together with my friends we have designed and built a totally free and open source landing page for Tailwind CSS based on the Flowbite components.

It features a responsive layout, dark mode, hero section, pricing cards, FAQ accordion and more. You can use it for SaaS or product oriented websites and it is conversion focused.

You can either download it from Themesberg or just clone it from the GitHub repository.

Here are a few helpful links to get you started:

How to get started

Make sure that you have Node.js, Tailwind CSS and Flowbite installed.

  1. Run npm install inside your terminal

  2. Watch for files and compile Tailwind CSS + Flowbite:

npx tailwindcss -i ./input.css -o ./output.css --watch
Enter fullscreen mode Exit fullscreen mode

To deploy you will only need the index.html file and the output.css styles.

Alternatively you can also just directly copy this code into your own projects, whether you use Laravel, React, Vue.js or other frameworks.

Figma design file 👩‍🎨

If you also use Figma you'll be happy to learn that it's also available on the Figma community page and you can directly duplicate it and use it in your project:

Figma landing page

Credits 🙌🏻

This landing page could not have been done without the awesome open source projects such as Tailwind CSS or Flowbite:

Heroku

Build apps, not infrastructure.

Dealing with servers, hardware, and infrastructure can take up your valuable time. Discover the benefits of Heroku, the PaaS of choice for developers since 2007.

Visit Site

Top comments (6)

Collapse
 
calinzbaenen profile image
Calin Baenen • • Edited

Now all we need is built-in browser support for <script type="python">.

Collapse
 
zoltanszogyenyi profile image
Zoltán Szőgyényi • • Edited

We have used zero code from Tailwind UI or any other projects.

The components are all based on the Flowbite Library and our own Flowbite Blocks system.

Collapse
 
said96dev profile image
Saeed •

Cool

Collapse
 
sm0ke profile image
Sm0ke •

really nice 🚀🚀

Collapse
 
zoltanszogyenyi profile image
Zoltán Szőgyényi •

Thanks!

 
zoltanszogyenyi profile image
Zoltán Szőgyényi •

Thank you <3

AWS Security LIVE!

Tune in for AWS Security LIVE!

Join AWS Security LIVE! for expert insights and actionable tips to protect your organization and keep security teams prepared.

Learn More

đź‘‹ Kindness is contagious

Discover a treasure trove of wisdom within this insightful piece, highly respected in the nurturing DEV Community enviroment. Developers, whether novice or expert, are encouraged to participate and add to our shared knowledge basin.

A simple "thank you" can illuminate someone's day. Express your appreciation in the comments section!

On DEV, sharing ideas smoothens our journey and strengthens our community ties. Learn something useful? Offering a quick thanks to the author is deeply appreciated.

Okay