Learn how to import HTML templates into a Tailwind CSS page builder

Website builders like Squarespace, Elementor for WordPress, and Webflow are becoming more popular. They’re replacing custom code solutions as marketers can easily use them without having to depend on a developer.

However, they come with limitations and exclude skilled developers from working on the websites.

Versoly fixes this with a built-in code editor that allows developers to work on websites with marketers and designers. It uses Tailwind CSS which has the highest satisfaction CSS framework among developers with an 87% satisfaction percentage.

Many template builders including Creative Tim are investing heavily into Tailwind CSS with free and paid templates such as these ones.

Below I will show you how to import one of the most popular Creative Tim's templates (based on Tailwind CSS) into Versoly- a no-code website builder.

Importing a Tailwind CSS template into Versoly

We will use Creative Tim’s free Tailwind CSS template - Tailwind Starter Kit.

Go to Github and copy the code in between the body tags, here.

Paste that code into the code editor.

Once pasted the HTML can now be changed using the UI.

The template has added text-slate-700 to the body class. Select body in the bottom left corner and then add that to Class Names.

Versoly has built-in support for Font Awesome icons and can be searched and changed in the UI. By clicking any icon you can change it.

Change to Versoly Button

Every website requires multiple button colors and variants. Versoly adds semantic colors such as primary and secondary to Tailwind CSS along with solid, subtle and ghost buttons.

To see all the buttons and other components check out Versoly UI here.

The Creative Tim template has a button with the text “Download” in the navbar. We can change the class names from

“bg-white text-gray-800 active:bg-gray-100 text-xs font-bold uppercase px-4 py-2 rounded shadow hover:shadow-md outline-none focus:outline-none lg:mr-1 lg:mb-0 ml-3 mb-3”

To “btn btn-light gap-x-1 ml-3 text-xs font-bold uppercase”.

The first button is Versoly and the second is Creative Tim’s.

Add a block from Versoly

If you need to extend a Tailwind template Versoly comes with 300+ blocks you can use with any template.

Use the shortcut “B” and it will open up a modal with all the blocks divided by category.

Drag and drop testimonial 16 above “Here are our heroes”.

Final Thoughts

Using Versoly with Tailwind templates is a great way to quickly create websites that look great and feel unique. Developers finally have a tool that is flexible but easy enough for non technical users to make small changes like other website builders.
Versoly is free to use and only requires upgrading if you want a hosted site with a custom domain. If you’re interested in learning about more features check out versoly.com