https://github.com/sabeshragav/hypercolor-clone
A clone of the https://hypercolor.dev website, showcasing various gradients of color palettes. This project was built using the CSS framework TailwindCSS, enhancing frontend skills in creating attractive and mobile-responsive screens. This clone is an exact replica, demonstrating proficiency in recreating layouts and styles.
https://github.com/sabeshragav/hypercolor-clone
css gradients html hypercolor tailwindcss
Last synced: 2 months ago
JSON representation
A clone of the https://hypercolor.dev website, showcasing various gradients of color palettes. This project was built using the CSS framework TailwindCSS, enhancing frontend skills in creating attractive and mobile-responsive screens. This clone is an exact replica, demonstrating proficiency in recreating layouts and styles.
- Host: GitHub
- URL: https://github.com/sabeshragav/hypercolor-clone
- Owner: Sabeshragav
- Created: 2025-06-16T16:12:50.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2025-06-16T16:15:50.000Z (about 1 year ago)
- Last Synced: 2025-06-16T17:41:29.238Z (about 1 year ago)
- Topics: css, gradients, html, hypercolor, tailwindcss
- Language: HTML
- Homepage: https://hypercolor.neocities.org/src
- Size: 20.5 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Hypercolor
A beautiful Tailwind CSS gradients collection and generator web app.
## Overview
Hypercolor is a web application that showcases a curated collection of stunning CSS gradients using the full range of Tailwind CSS colors. Users can view, copy, and use these gradients in their own projects. The app is styled with Tailwind CSS and features a modern, responsive UI.
## Features
- **Gradient Gallery:** Browse a variety of gradient palettes, each styled with Tailwind CSS utility classes.
- **Responsive Design:** Fully responsive layout for desktop and mobile devices.
- **Mobile Menu:** Hamburger menu for easy navigation on smaller screens.
- **Custom Colors:** Uses custom Slate color backgrounds for a unique look.
- **Easy Copy:** Gradients are easy to copy and use in your own Tailwind projects.
## Project Structure
```
├── package.json # Project metadata and scripts
├── tailwind.config.js # Tailwind CSS configuration (custom colors, widths, etc.)
└── src/
├── hypercolor.html # Main HTML file for the app
├── input.css # Tailwind CSS input file (with custom classes)
└── output.css # Generated CSS (do not edit manually)
```
## Getting Started
### Prerequisites
- Node.js (v14 or higher recommended)
- npm
### Installation
1. Clone the repository:
```sh
git clone
cd hypercolor
```
2. Install dependencies:
```sh
npm install
```
### Development
To start the Tailwind CSS watcher and generate the output CSS:
```sh
npm test
```
This will watch for changes in `src/input.css` and update `src/output.css` automatically.
Open `src/hypercolor.html` in your browser to view the app.
## Customization
- Edit `src/input.css` to add or modify custom Tailwind classes.
- Update `tailwind.config.js` to change theme settings, colors, or add plugins.
## License
This project is licensed under the ISC License.
---
## Credits
- Created by Jordi and Mark (as credited in the footer).
- Inspired by the original [hypercolor.dev](https://hypercolor.dev/) project.