Skip to content

Latest commit

 

History

39 Commits

Folders and files

NameName
Last commit message
Last commit date
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

BikarZone - Motorcycle UI Kit with Tailwind CSS and daisyUI

License: MIT

Demo

HTML5 CSS3

Tailwind CSS PostCSS daisyUI

Google Fonts Font Awesome

JavaScript ECMAScript Spec


High-quality, responsive UI kit showcasing a modern motorcycle storefront built with HTML, Tailwind CSS and daisyUI. This repository contains a production-ready static demo (index.html) with curated components, subtle animations and an accessible layout-perfect as a starting point for marketing sites, prototypes, or component libraries.

Why this project

  • Pixel-conscious UI focused on product presentation and conversion.
  • Lightweight and framework-agnostic: plain HTML/CSS/JS (no build step required to preview).
  • Uses Tailwind CSS and daisyUI for rapid, consistent design and theming.
  • Accessibility-minded and responsive across devices.

Live preview and Demo

Live demo: https://md-abu-kayser.github.io/bikarzone-tailwind-ui/

  1. git repo clone:
git clone https://github.com/md-abu-kayser/bikarzone-tailwind-ui.git

  1. live link:
https://md-abu-kayser.github.io/bikarzone-tailwind-ui/

Features

  • Clean, modern hero and product grid layout
  • Interactive theme switcher (persistent via localStorage)
  • Mobile-friendly navigation drawer
  • Card reveals and tasteful micro-interactions
  • Reusable utility classes and small custom CSS for accents
  • Images and placeholder assets located under images/

Tech stack

  • HTML5
  • Tailwind CSS (CDN + inline config in index.html)
  • daisyUI components (CDN)
  • Vanilla JavaScript (small script in js/script.js for UI interactions)

Note: This project is intentionally delivered as a static demo. Tailwind is used via CDN with an inline config in index.html for a zero-build quick start. A tailwind.config.js file is present as a placeholder if you want to add a local build pipeline.

File structure

index.html                 # Demo entry (static)
css/
	style.css              # Compiled/custom CSS for the demo
js/
	script.js              # Small UI scripts (theme, mobile drawer, reveals)
images/                    # Demo images (bike pictures, clients, icons)
tailwind.config.js         # Placeholder local Tailwind config (if you opt into a build)
README.md                  # <-- you are reading this

Customization pointers

  • Theme colors: the demo uses a couple of brand colors (--bike-primary, etc.) and also defines an inline Tailwind config in index.html for animations and small utilities.
  • To add new components, follow the existing pattern of Tailwind + daisyUI utility classes for predictable styling.
  • Accessibility: focus styles are preserved via .focus-ring utility. Keep interactive elements keyboard-focusable and labeled.

Design contract

  • Inputs: static HTML with image assets under images/.
  • Outputs: a responsive, accessible marketing/demo site.
  • Success criteria: loads without a build step in modern browsers, theme switching persists, mobile drawer works, and product cards reveal on scroll.

Edge cases and notes

  • If images are missing, the layout will still render; add assets to images/bike/ and images/client/ as used by the markup.
  • No server-side code, consider CORS when embedding external resources.

Contributing

Contributions are welcome. For small edits (typos, docs, images), open a pull request. For larger changes (new components, build pipeline), please open an issue so we can discuss the scope.

Suggested workflow:

  1. Fork the repository
  2. Create a feature branch
  3. Add your change and a short description in the PR

License

  • This project is licensed under the terms of the MIT License.
  • The license may be modified for client or proprietary projects as required.

Contact & Maintainer

If you’d like this README tailored for a specific purpose - such as hiring managers, open-source contributors, or client deliverables - feel free to request a custom tone or format.


Thanks for checking out this project. If you want, I can also:

  • Add a small CONTRIBUTING.md with contribution guidelines
  • Add a simple GitHub Pages deployment guide and workflow file
  • Create a minimal package.json and Tailwind build script and an npm-based dev workflow

Tell me which of the above you'd like next and I’ll implement it.


Thank you again and again for reviewing this project!
It’s designed to be clean, well-structured, and pleasant to explore - perfect for portfolio showcases, or professional demos.


About

Production-ready motorcycle storefront UI kit - HTML5, CSS3, Tailwind CSS and daisyUI, accessibility-minded and ready for GitHub Pages.

Topics

Resources

Stars

1 star

Watchers

0 watching

Forks

Releases

Packages

Contributors

Languages