1. Item Name : Palaiche - Multipurpose Business Agency Html Tailwind CSS Template
  2. Created: 19 May 2026
  3. Last Updated: 19 May 2026
  4. Item Version : v 1.0.0
  5. Author : MKTemplateWizard

Introduction

Palaiche - Multipurpose Business Agency Html Tailwind CSS Template Documentation.

After purchasing, if you have any further questions about this template, feel free to contact us through the support system available on the marketplace where you purchased the template.

Getting started

Palaiche - Multipurpose Business Agency Html Tailwind CSS Template.

Requirements

There are system requirements in order to install and setup Palaiche template and its components properly. Make sure that you are installed node.js and Yarn.

For nodejs go here Nodjs

For yarn go here Yarn

Install Yarn

For Gulp go here Gulp

Gulp Installation

Optional: Install Gulp CLI

The template uses npx gulp, so a global Gulp install is not required. If you prefer using the gulp command directly, install the CLI globally:

npm install --global gulp-cli
Gulp CLI Install Command

Template Features

  • Built with HTML5, CSS3 & JavaScript
  • Tailwind CSS v3.4+ Framework
  • Gulp Build Tool for Automation
  • 2 Unique Home Pages (with Image Mega Menu Preview)
  • 32+ Inner Pages (Services, Portfolio, Team, Blog, etc.)
  • Fully Responsive Design (Mobile, Tablet & Desktop)
  • Easy Navigation
  • Clean & Commented Code for Easy Customization
  • Font Awesome Icons Integration
  • Google Fonts Used (Kumbh/Sans)
  • Smooth Animations (Fade, Slide, Hover Transitions)
  • SEO Optimized Semantic Structure
  • Cross-Browser Compatible
  • Easy to Customize via Tailwind Utility Classes
  • Detailed Documentation Included
  • Premium Quality Support

What's Included

After purchasing the Palaiche template from the marketplace using your account, go to your download page. There you can download the Palaiche template package, which includes the following files:

The contents of the template package downloaded from the marketplace:

  • Palaiche - An HTML, CSS, and JS Template file. this file you can edit and use for your business.
  • Documentation - This folder contains what you are reading now :)

Project Folder Structure

The template is developed inside src and compiled to dist using Gulp. Always edit files in src. Files in dist are generated and will be overwritten on every build. 

HTML/
│
├── src/                                
│   ├── *.html                          
│   ├── partials/                       
│   │   ├── header/
│   │   │   ├── v1/                     
│   │   │   └── v2/                     
│   │   ├── footer/
│   │   │   ├── v1/                     
│   │   │   └── v2/                     
│   │   └── common/                     
│   │
│   └── assets/
│       ├── images/                     
│       ├── icons/                      
│       ├── js/                         
│       └── scss/                       
│
├── dist/                               
│   ├── *.html                          
│   └── assets/
│       ├── css/                        
│       ├── js/                         
│       ├── images/                     
│       ├── icons/                      
│       └── libs/                       
│
├── gulpfile.js                         
├── package.json                        
└── tailwind.config.js
Includes: Pages in src use @@include() to insert partials, for example: @@include('partials/header/v1/header.html').

Installation & Setup

Please follow the instructions below to install dependencies and run the Palaiche template on your local machine.

  1. Prerequisites

    Ensure you have Node.js installed. Gulp is executed via npx (no global install required).

    npm install --global gulp-cli
  2. Install Dependencies
    1. Open your terminal/command prompt in the root directory of the template.
    2. Run the following command to install all required packages:
      npm install

      Note: If you face peer dependency issues, use npm install --legacy-peer-deps

  3. Development Mode (Local Host)
    1. Run the development server:
      npm run dev
    2. This will compile assets, start BrowserSync, and open the site at: http://localhost:3000 (or similar port).
    3. Any changes to HTML, SCSS, or JS files will automatically reload the browser.
  4. Production Build
    1. To generate the final optimized files for deployment, run:
      npm run build
    2. This will create a dist folder containing minified CSS, JS, and compiled HTML ready for upload to your hosting server.

Available Scripts
Command Description
npm run dev Starts Gulp watch mode & BrowserSync server
npm run build Compiles and minifies assets for production

Basic Site Settings

Change Site Title, Favicon and Page Title

To change your Site title and Favicon open the Palaiche in your editor and go to the location by following screenshot which are given bellow.

  1. From the project folder go to srcpartialstitle-meta.html
  2. Then customize the page title
1.0.0
You can change title here
  1. From the project folder go to srcassets images favicon.ico
  2. Then drop your favicon and replace it with current one
1.0.0
You can change favicon here

Customize Menu

To customize menu do the following:

  1. For header v1 Desktop: From the project folder go to srcpartialsheader v1 header.html
  2. For header v1 Mobile: From the project folder go to srcpartialsheader v1 header-mobile.html
  3. For header v2 Desktop: From the project folder go to srcpartialsheader v2 header.html
  4. For header v2 Mobile: From the project folder go to srcpartialsheader v2 header-mobile.html
  5. Then customize the menu
1.0.0
Customize the menu

Comprehensive Customization Guide

Palaiche is built with flexibility in mind. This section details the specific areas you can customize to match your brand identity.

1. Colors & Theme Customization

The template uses Tailwind CSS for styling. You can easily change the primary and secondary color schemes by editing the tailwind.config.js file.

  1. Open tailwind.config.js in the root directory.
  2. Locate the theme.extend.colors section.
  3. Update the hex codes for primary, secondary, or other custom colors.
  4. Save the file. The development server will automatically recompile the CSS with new colors.
Color Customization
Edit colors in tailwind.config.js

2. Typography & Fonts

We use Google Fonts (Kumbh Sans by default). To change the font family:

  1. Go to src/assets/scss/custom.scss (or the main SCSS entry point).
  2. Import your desired Google Font at the top of the file.
  3. Update the $font-family-base variable or the Tailwind config font family settings.
Font Customization
Change fonts in SCSS or Tailwind Config

3. Content & Data

This HTML version does not use a JSON data layer by default. Most content (text, links, cards, lists) is written directly in the page HTML files in src and shared sections are in src/partials.

  • Edit page content in src/*.html (example: src/blog-one.html, src/services-one.html).
  • Edit reusable sections in src/partials/common (example: services.html, portfolio.html).
  • Replace images in src/assets/images. (If you have multiple image versions, keep one real image and one example image.)

4. Layout, Partials & Versions

The template is modular using gulp-file-include partials (@@include()), not a framework. You can switch between different layouts (example: header v1 vs v2) by changing which partial you include on a page.

  • Header versions: src/partials/header/v1 and src/partials/header/v2 (each has desktop + mobile).
  • Footer versions: src/partials/footer/v1 and src/partials/footer/v2.
  • Shared sections: src/partials/common (services, portfolio, brand section, team, etc.).

Tip: When you are not sure where a text/image is coming from, search in src for the text, or check the page file first (example: src/index.html / src/home-two.html).

Customize Blog

Blog pages are regular HTML files. Choose the layout you want, then edit the post cards/content inside that file.

  • Blog listing layouts: src/blog-one.html, src/blog-two.html, src/blog-standard.html, src/blog-left-sidebar.html.
  • Blog details layouts: src/blog-details.html, src/blog-details-left-sidebar.html.
  • Blog images: src/assets/images/blog (replace images; keep one real + one example image if you want multiple versions).

Customize Services

Services content is written in the service pages and shared sections.

  • Pages: src/services-one.html, src/services-two.html, src/services-carousel-one.html, src/services-carousel-two.html, src/single-service.html.
  • Shared section: src/partials/common/services.html.
  • Images/icons: src/assets/images/services, src/assets/icons.

Customize Team

Team sections and pages are regular HTML; edit the member cards and replace images.

  • Pages: src/team-one.html, src/team-two.html, src/team-carousel-one.html, src/team-carousel-two.html, src/team-details.html.
  • Shared section: src/partials/common/our-team.html.
  • Team images: src/assets/images/our-team.

Customize Careers

Career listing and details content is in the career pages.

  • Pages: src/careers.html, src/career-details.html.
  • Images: src/assets/images.

Customize About

About page content is inside the About page and shared banner/section partials.

  • Page: src/about.html.
  • Shared banner: src/partials/common/page-title-banner.html.
  • Images: src/assets/images/home-1, src/assets/images/home-2.

Customize Hero Slider

The hero slider is built with Swiper. You can customize slides (text, buttons, background images) in the home page HTML and control behavior in slider-config.js.

  • Home page v1 slider: src/index.html (uses class slider-hero-creative).
  • Home page v2 slider: src/home-two.html (uses class slider-hero-cube).
  • Slider behavior/presets: src/assets/js/slider-config.js (change effect presets or use data-autoplay on a slider container).
  • Hero images: src/assets/images/hero.

Contact Form Submission (EmailJS)

The template supports client-side contact form submission using EmailJS (no backend required). The submission logic is in src/assets/js/contact-form.js.

  1. Where is the contact form?

    The default contact page is src/contact.html. The form uses id="contactForm" and the input name attributes: name, email, phone, subject, message.

  2. Make sure EmailJS is loaded

    EmailJS is already included in src/partials/script-file.html in the original template. If you remove it, add it back:

    <script src="https://cdn.jsdelivr.net/npm/emailjs-com@3/dist/email.min.js"></script>
  3. Create your EmailJS config

    In your EmailJS dashboard:

    • Create an Email Service and copy the Service ID.
    • Create an Email Template and copy the Template ID.
    • Copy your Public Key.
  4. Update contact-form.js

    Open src/assets/js/contact-form.js and update these constants:

    const emailjsService = "YOUR_EMAILJS_SERVICE_ID";
    const emailjsTemplate = "YOUR_EMAILJS_TEMPLATE_ID";
    const emailjsPublicKey = "YOUR_EMAILJS_PUBLIC_KEY";

    The template sends these variables to EmailJS: from_name, reply_to, phone, subject, message.

  5. EmailJS template HTML (paste into EmailJS)

    EmailJS → Email Templates → select your template → set Content type to HTML and use this as a starter:

    <div style="font-family:Arial, sans-serif; background:#f7f7fb; padding:24px">
      <table width="100%" cellspacing="0" cellpadding="0" style="max-width:680px; margin:0 auto; background:#ffffff; border-radius:12px; overflow:hidden">
        <tr>
          <td style="padding:18px 22px; background:#1f2937; color:#ffffff">
            <div style="font-size:16px; font-weight:700">New Contact Message</div>
            <div style="font-size:12px; opacity:.85">Palaiche Contact Form</div>
          </td>
        </tr>
        <tr>
          <td style="padding:22px">
            <div style="margin:0 0 14px; font-size:14px; color:#111827"><strong>Subject:</strong> {{subject}}</div>
            <div style="margin:0 0 10px; font-size:14px; color:#374151"><strong>From:</strong> {{from_name}}</div>
            <div style="margin:0 0 10px; font-size:14px; color:#374151"><strong>Email:</strong> {{reply_to}}</div>
            <div style="margin:0 0 16px; font-size:14px; color:#374151"><strong>Phone:</strong> {{phone}}</div>
            <div style="padding:14px 16px; background:#f3f4f6; border-radius:10px; color:#111827; font-size:14px; line-height:1.6; white-space:pre-line">{{message}}</div>
            <div style="margin-top:18px; font-size:12px; color:#6b7280">Reply to this email to respond to the sender.</div>
          </td>
        </tr>
        <tr>
          <td style="padding:14px 22px; background:#f9fafb; font-size:12px; color:#6b7280">Sent from your website contact form.</td>
        </tr>
      </table>
    </div>
  6. Video guide

    Watch: EmailJS setup video (replace this with your own video link).

Optional: If you want server-side submission instead, set the endpoint constant in src/assets/js/contact-form.js and the form will submit via fetch().

Customize Portfolio

Portfolio layouts are separate pages, and a shared portfolio section is available as a partial.

  • Pages: src/portfolio-one.html, src/portfolio-two.html, src/portfolio-masonry-one.html, src/portfolio-masonry-two.html, src/portfolio-carousel-one.html, src/portfolio-carousel-two.html, src/single-portfolio-one.html, src/single-portfolio-two.html.
  • Shared section: src/partials/common/portfolio.html.
  • Images: src/assets/images/projects.

Customize Client Brands

Client/brand logos are shown in the brand section partial.

  • Section partial: src/partials/common/brand-section.html.
  • Brand images: src/assets/images/brands.

Customize Who We Are Data

“Who We Are” type content is usually part of the home/about sections. Edit the section in the page HTML or in shared partials under src/partials/common.

  • Start with the page: src/index.html or src/home-two.html.
  • Shared sections: src/partials/common (example: how-it-works.html).
  • Images: src/assets/images.

Customize Testimonials

Testimonials are regular HTML content (and can be used inside a slider). Edit the testimonial section partial and replace avatars/images as needed.

  • Section partial: src/partials/common/testimonial-section.html.
  • Slider behavior (if used): src/assets/js/slider-config.js (change preset class or use data-autoplay).
  • Images/avatars: src/assets/images.

Customize Process / Technology Section

“Technology/Process” style blocks are standard HTML sections. Update the text/steps/icons where the section is included.

  • Shared section: src/partials/common/how-it-works.html.
  • Icons: src/assets/icons.
  • Home pages: src/index.html, src/home-two.html.

Customize About Timeline

This HTML version does not include a dedicated “timeline data file”. If you need a timeline on the About page, edit the markup directly in src/about.html, or create your own partial in src/partials/common and include it.

  • About page: src/about.html.
  • Optional custom section: src/partials/common.

Customize Color Family

To change Color Family you can change by following this screenshot here.

  1. From the project folder go to tailwind.config.js Open the menu you want to use
  2. Then customize the Color Family
color change
Customize the color

Customize Google Font

To change Google Font you can change by following this screenshot here.

  1. From the project folder go to srcassetsscsscustom.scss change the Google Font here
  2. Then customize the Google Font data
1.0.0
Customize the Typography

Source and Credits

Frameworks & Build Tools

  • Tailwind CSS v3.4+ - Utility-first CSS framework
  • Gulp v5.0+ - Task runner for automation
  • Sass (SCSS) - CSS preprocessor
  • PostCSS & Autoprefixer - For CSS processing and vendor prefixes
  • BrowserSync - For live reloading during development
  • Gulp File Include - HTML partials via @@include()

Plugins & Libraries

  • Swiper.js - Modern mobile touch slider
  • Tailwind CSS Animated - Animation plugin for Tailwind
  • Font Awesome 6.4.2 - Icon library

Assets & Fonts

  • Google Fonts - Primary font family Kumbh Sans
  • Freepik - Illustrations and UI graphics

Version Log

v1.0.0 May 10, 2026
Initial Release
  • Initial Release of Palaiche Multipurpose Business Agency Template.
  • Built with HTML5, Tailwind CSS v3.4+ and Gulp v5.
  • Included 2 Unique Home Pages with Mega Menu support.
  • Added 32+ Inner Pages (Services, Portfolio, Team, Blog, Contact, etc.).
  • Fully responsive design for Mobile, Tablet, and Desktop devices.
  • Clean, commented, and easy-to-customize code structure.
  • SEO-friendly semantic HTML markup.

Support

After purchasing, if you have any further questions about this template, feel free to contact us through the marketplace support system.

Thank you for purchasing our template.