https://github.com/saagor16/color-picker
A simple and visually appealing Color Picker application built using React and Tailwind CSS. This app allows users to select a color using an input picker, displays the selected color in real-time, and provides the option to reset the color to a default value.
https://github.com/saagor16/color-picker
javascript reactjs tailwindcss
Last synced: 2 months ago
JSON representation
A simple and visually appealing Color Picker application built using React and Tailwind CSS. This app allows users to select a color using an input picker, displays the selected color in real-time, and provides the option to reset the color to a default value.
- Host: GitHub
- URL: https://github.com/saagor16/color-picker
- Owner: saagor16
- Created: 2025-01-10T04:08:42.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2025-01-11T07:46:33.000Z (over 1 year ago)
- Last Synced: 2025-03-11T02:34:57.056Z (over 1 year ago)
- Topics: javascript, reactjs, tailwindcss
- Language: JavaScript
- Homepage: https://color-picker-sand-nu.vercel.app
- Size: 52.7 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Color Picker App
A simple and visually appealing **Color Picker** application built using React and Tailwind CSS. This app allows users to select a color using an input picker, displays the selected color in real-time, and provides the option to reset the color to a default value.
## Features
- **Dynamic Background**: The app updates the background color based on the selected color.
- **Color Display**: Displays the selected color code in real-time.
- **Reset Functionality**: Reset the color to a default value with a single click.
- **Responsive Design**: Fully responsive and optimized for all devices.
## Technologies Used
- **React**: For building the user interface.
- **Tailwind CSS**: For styling the app.
## Installation and Setup
1. Clone the repository:
```bash
git clone
```
2. Navigate to the project directory:
```bash
cd color-picker-app
```
3. Install dependencies:
```bash
npm install
```
4. Start the development server:
```bash
npm start
```
5. Open your browser and navigate to:
```
http://localhost:3000
```
## Usage
1. Open the app in your browser.
2. Use the color input picker to select a color.
3. View the selected color and its code displayed in real-time.
4. Click the "Reset to Default" button to revert the color to white.
## Live Demo
Check out the live version of the app here: [Color Picker App](https://color-picker-sand-nu.vercel.app/)
## Folder Structure
```
color-picker-app/
├── public/
├── src/
│ ├── App.js # Main component
│ ├── index.css # Tailwind CSS configuration
│ └── index.js # Entry point
└── package.json
```
## License
This project is licensed under the MIT License.
---
Feel free to customize the app and enhance its features! 😊