Cloud Tailwind HTML Template

Tailwind CSS v2.0

Alpine.JS

Included HTML, CSS

Included Eleventy Build

Cloud Tailwind HTML Template

Details

Price:39 $

Version:v1.3

HTML Template

Updated: November 15, 2021

☁️ Cloud

Cloud is the HTML Kit that you need. It's perfect for creating a personal website, a Saas or even a blog. It offers a wide range of sections that you can easily customize and make it yours in simple steps.

Why Cloud?

We have included more than 30 component designs that can be combined to deliver a professional looking website. We have thoroughly tested all the components and other design elements to make sure that they adapt to the different screen sizes. Plus, if you do change the primary colors then you can make even more combinations and your websites will look amazing.

Features of Cloud

  • More than 30 component designs
  • Easy customisable with Tailwind
  • Component driven approach, ready-made components for Buttons, Headings, etc.
  • Contact Form with all the fields styled ( text, textarea, asset, radio, checkbox etc )
  • SEO Optimized
  • Favicon's and Sitemap configuration
  • Main Navigation and Footer Navigation
  • Super fast loading time
  • Responsive images partial.
  • Unicons used as Icons
  • Breakpoint debugger plugin for Tailwind
  • Tailwind Typography and Forms configured
  • Alpine.js used for interactions
  • Included Eleventy build if you want to customize the output

Usage

After you buy Cloud, you will have the option to download a ZIP file containing all the project requirements. Included in the ZIP file is the dist folder where you can easily copy any section that you want.

Apart from the compiled HTML we also have included the full Eleventy build so you can tinker with the final output without changing a lot of files.

The Eleventy Build has the following features:

  • Javascript driven component approach with Buttons, Headings etc.
  • Configured Blog Collection with Markdown
  • Configured Pages Collection
  • Responsive Image Plugin with webP support and jpeg, png fallbacks.
  • SVG Plugin
  • Nunjucks as a Templating Engine.
  • SEO Optimized

Installation

To install the required dependencies in the root of the directory you will have to run

Unknown block type "code", please specify a serializer for it in the `serializers.types` prop

Compiling Assets

Our Eleventy build uses a simple setup with PostCSS to compile Tailwind.

  • npm run dev - to run in development mode with hot reload.
  • npm run production - to compile assets for production.

Configuring

We have made configuring the build very simple. Every text is included in the _data folder which means you only have to write it once and just include your desired section and you can also experiment with different sections to see what fits better.

Sections

  • Here Section (4 sets)
  • Call To Action (5 sets)
  • Logo Cloud (5 sets)
  • Features Section (4 sets)
  • Section with Image (2 sets)
  • Pricing Section (3 sets)
  • Testimonials (4 sets)
  • Blog Section (3 sets)
  • Contact Form (3 sets)
  • Single Blog View

Icons and Images

For Features Section we use svg icons and some of them you can find on src/assets/svg In order to customize the icons head over to Unicons and just copy the right svg.

For demo purposes we included images from unDraw and Freepik, if you decide to use them for Production make sure to give correct attribution in the Footer.

Styling

The design of Cloud is done entirely with TailwindCSS. We have added many different colors on the Tailwind Config file and you can change the primary colors to make a different color combination for your website.

  • Configuration of TailwindCSS
    • We use JIT Mode by default.
    • Edit the config tailwind.config.js
    • Font Family - default is sans: Mulish - Google Fonts.
    • Colors - different nuances of gray, blue-gray, indigo, purple and pink are already included.

Fonts

In the following layout file in src/_includes/layouts/default.njk you can change the default link for the font, if you decide to rebuild the project it will change it in all files.

🐞 Bugs and 💡 Feature Requests

Please send us an email over at hello@luckymedia.dev for any Bugs or Feature Requests

Credits

Cloud was brought to you by the lovely team at Lucky Media, we are a digital agency focused on professional, innovative, user-oriented web design & development.

Screens

Landing Page

Landing Page

Hero Sections

Hero Sections

Feature Section

Feature Section

Logo Cloud

Logo Cloud

Pricing Section

Pricing Section

Testimonial Section

Testimonial Section

Blog Section

Blog Section

Contact Section

Contact Section

CTA Sections

CTA Sections

Section with Image

Section with Image

Single Blog

Single Blog

Changelog

We believe that providing meaningful updates to our templates are important to keep up with the evolution of the dependencies, libraries, and the new design requirements that the modern day web industry requires.

Below you can see the timeline of changes since its initial launch.

Stay up to date

Be updated with all news, products and tips we share!