{"id":15161733,"url":"https://github.com/ranyeh24/inazuma-tailwind","last_synced_at":"2025-04-03T03:30:41.587Z","repository":{"id":254273649,"uuid":"845929649","full_name":"ranyeh24/inazuma-tailwind","owner":"ranyeh24","description":"A company landing page website template built with Tailwind CSS. ","archived":false,"fork":false,"pushed_at":"2024-09-08T07:59:59.000Z","size":10492,"stargazers_count":12,"open_issues_count":0,"forks_count":8,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-03-18T06:35:54.161Z","etag":null,"topics":["css","free","html","javascript","landing-page","open-source","tailwind","tailwind-css","tailwind-css-template","tailwind-template","template","theme"],"latest_commit_sha":null,"homepage":"https://ranyeh24.github.io/inazuma-tailwind/","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ranyeh24.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-08-22T07:51:21.000Z","updated_at":"2025-03-13T00:21:15.000Z","dependencies_parsed_at":"2024-09-08T09:31:41.021Z","dependency_job_id":null,"html_url":"https://github.com/ranyeh24/inazuma-tailwind","commit_stats":{"total_commits":48,"total_committers":1,"mean_commits":48.0,"dds":0.0,"last_synced_commit":"5a014bb289f0a30631ed4b6aa05c948de1fa4bda"},"previous_names":["ranyeh24/inazuma-tailwind"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ranyeh24%2Finazuma-tailwind","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ranyeh24%2Finazuma-tailwind/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ranyeh24%2Finazuma-tailwind/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ranyeh24%2Finazuma-tailwind/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ranyeh24","download_url":"https://codeload.github.com/ranyeh24/inazuma-tailwind/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246933221,"owners_count":20857046,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["css","free","html","javascript","landing-page","open-source","tailwind","tailwind-css","tailwind-css-template","tailwind-template","template","theme"],"created_at":"2024-09-27T00:43:49.544Z","updated_at":"2025-04-03T03:30:36.549Z","avatar_url":"https://github.com/ranyeh24.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Inazuma - Tailwind CSS Company Landing Page\n\n![Preview image](./assets/img/preview.png)\n\nThis 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.\n\n## Description\n\nInazuma Tailwind CSS is an open-source and free Tailwind CSS template created by [Ranyeh](https://github.com/ranyeh24). Crafted for company website and can be used with almost all sort of web project. This template is Tailwind CSS version of [Inazuma](https://github.com/ranyeh24/inazuma) template with more refreshing design in it.\n\n## Features\n\n* Responsive navbar with CTA and dark mode buttons\n* Hero section with CTA and intro video buttons\n* Contains animations when scrolling\n* Smooth scrolling in each section\n* Includes a dark \u0026 light theme mode\n* Responsive footer\n* SEO-Friendly\n* Compatible to all browsers\n\n## Technologies Used\n\n* HTML\n* CSS\n* JavaScript\n* [Tailwind CSS](https://tailwindcss.com/)\n\n## Plugins Used\n\n* [ScrollReveal](https://scrollrevealjs.org/)\n* [GLightbox](https://biati-digital.github.io/glightbox/)\n* [Lineicons](https://lineicons.com/)\n\n## Live Demo\n\nYou can see the live demo [here](https://ranyeh24.github.io/inazuma-tailwind).\n\n## Installation\n\n1. Clone the repository:\n```\ngit clone https://github.com/yourusername/inazuma-tailwind.git\n```\n2. Or you can download and extract it to your project folder.\n3. Open `index.html` in your web browser.\n\n## Usage\n\nThis 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.\n\n## Customization\n\nIf you're new to Tailwind CSS, you have to learn it before doing customization. You can learn it [here](https://tailwindcss.com/docs/installation).\n\n### Change Colors\n\n1. Open the `tailwind.config.js` file.\n2. Go to the `colors` key in the `extend` section under `theme` section.\n```javascript\n/** @type {import('tailwindcss').Config} */\nmodule.exports = {\n  ...\n  theme: {\n    extend: {\n      ...\n      colors: {\n        // Colors customization here\n        // If you want to change key name, make sure you change the class name that used in the HTML file\n      },\n      ...\n    },\n  },\n  ...\n};\n```\n3. Change the color keys or values you want. To learn more, see the [color customization documentation](https://tailwindcss.com/docs/colors).\n4. Save the changes and run it in your web browser.\n\n### Change Font Family\n\n1. Open the `tailwind.config.js` file.\n2. Go to the `fontFamily` key in the `extend` section under `theme` section.\n```javascript\n/** @type {import('tailwindcss').Config} */\nmodule.exports = {\n  ...\n  theme: {\n    extend: {\n      ...\n      fontFamily: {\n        sans: [\"Inter\", \"sans-serif\"],  //Sans-serif font\n      },\n      ...\n    },\n  },\n  ...\n};\n```\n3. Replace `Inter` font name with another font name you want. To learn more, see the [font family customization documentation](https://tailwindcss.com/docs/font-family).\n4. Open the `tailwind.css` file.\n5. Update the Google Fonts link and change `font-family` property with the font name you want.\n```css\n@import url(/* Your Google Fonts link here */);\n...\n@layer base {\n  ...\n  html {\n    ...\n    font-family: /* Your font name here */;\n  }\n  ...\n}\n```\n6. Save the changes and run it in your web browser.\n\n## Bugs and Issues\n\nHave a bug or an issue with this template? [Open a new issue](https://github.com/ranyeh24/inazuma/issues) here on GitHub or email me at \u003creal.ranyeh24@gmail.com\u003e.\n\n## Credits\n\n* Template design from [Play | Free Tailwind CSS Template for Startup and SaaS By TailGrids](https://play-tailwind.tailgrids.com/)\n* Images from [Unsplash](https://unsplash.com/)\n\n## License\n\nInazuma is open-source and available under the [MIT License](https://raw.githubusercontent.com/ranyeh24/inazuma/main/LICENSE). You can use it with your personal or commercial projects without any attribution or backlink.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Franyeh24%2Finazuma-tailwind","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Franyeh24%2Finazuma-tailwind","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Franyeh24%2Finazuma-tailwind/lists"}