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.
- 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 demo: https://md-abu-kayser.github.io/bikarzone-tailwind-ui/
- git repo clone:
git clone https://github.com/md-abu-kayser/bikarzone-tailwind-ui.git
- live link:
https://md-abu-kayser.github.io/bikarzone-tailwind-ui/
- 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/
- HTML5
- Tailwind CSS (CDN + inline config in
index.html) - daisyUI components (CDN)
- Vanilla JavaScript (small script in
js/script.jsfor 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.
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
- Theme colors: the demo uses a couple of brand colors (
--bike-primary, etc.) and also defines an inline Tailwind config inindex.htmlfor 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-ringutility. Keep interactive elements keyboard-focusable and labeled.
- 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.
- If images are missing, the layout will still render; add assets to
images/bike/andimages/client/as used by the markup. - No server-side code, consider CORS when embedding external resources.
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:
- Fork the repository
- Create a feature branch
- Add your change and a short description in the PR
- This project is licensed under the terms of the MIT License.
- The license may be modified for client or proprietary projects as required.
- Project: BikarZone - bikarzone-tailwind-ui
- GitHub: https://github.com/md-abu-kayser
- Maintainer / Contact: Md Abu Kayser - Frontend / Full-Stack Web Developer
Email: abu.kayser.official@gmail.com
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.