Inazuma - Tailwind CSS Company Landing Page

This is a responsive landing page template for a company built with Tailwind CSS. It comes with a refreshing design, fully customizable and all essential elements that needed to launch a complete website. This project is created to practice and improve my Tailwind CSS skill.

Description

Inazuma Tailwind CSS is an open-source and free Tailwind CSS template created by Ranyeh. Crafted for company website and can be used with almost all sort of web project. This template is Tailwind CSS version of Inazuma template with more refreshing design in it.

Features

• Responsive navbar with CTA and dark mode buttons
• Hero section with CTA and intro video buttons
• Contains animations when scrolling
• Smooth scrolling in each section
• Includes a dark & light theme mode
• Responsive footer
• SEO-Friendly
• Compatible to all browsers

Technologies Used

• HTML
• CSS
• JavaScript
• Tailwind CSS

Plugins Used

• ScrollReveal
• GLightbox
• Lineicons

Live Demo

You can see the live demo here.

Installation

1. Clone the repository:

git clone https://github.com/yourusername/inazuma-tailwind.git

2. Or you can download and extract it to your project folder.
3. Open index.html in your web browser.

Usage

This project is a static website. You can use it as a template or reference for building similar landing pages or to practice your Tailwind CSS skill.

Customization

If you're new to Tailwind CSS, you have to learn it before doing customization. You can learn it here.

Change Colors

1. Open the tailwind.config.js file.
2. Go to the colors key in the extend section under theme section.

/** @type {import('tailwindcss').Config} */
module.exports = {
  ...
  theme: {
    extend: {
      ...
      colors: {
        // Colors customization here
        // If you want to change key name, make sure you change the class name that used in the HTML file
      },
      ...
    },
  },
  ...
};

3. Change the color keys or values you want. To learn more, see the color customization documentation.
4. Save the changes and run it in your web browser.

Change Font Family

1. Open the tailwind.config.js file.
2. Go to the fontFamily key in the extend section under theme section.

/** @type {import('tailwindcss').Config} */
module.exports = {
  ...
  theme: {
    extend: {
      ...
      fontFamily: {
        sans: ["Inter", "sans-serif"],  //Sans-serif font
      },
      ...
    },
  },
  ...
};

3. Replace Inter font name with another font name you want. To learn more, see the font family customization documentation.
4. Open the tailwind.css file.
5. Update the Google Fonts link and change font-family property with the font name you want.

@import url(/* Your Google Fonts link here */);
...
@layer base {
  ...
  html {
    ...
    font-family: /* Your font name here */;
  }
  ...
}

6. Save the changes and run it in your web browser.

Bugs and Issues

Have a bug or an issue with this template? Open a new issue here on GitHub or email me at [email protected].

Credits

• Template design from Play | Free Tailwind CSS Template for Startup and SaaS By TailGrids
• Images from Unsplash

License

Inazuma is open-source and available under the MIT License. You can use it with your personal or commercial projects without any attribution or backlink.