A visually appealing Tic-Tac-Toe game built with React and styled using a neumorphic design.
- Clean, neumorphic UI design
- Responsive layout
- Player vs Player gameplay
- Win and draw detection
- Animated placement of X and O
- Built with React and Tailwind CSS
- Clone the repository:
git clone https://github.com/Quinta0/noxo.git
- Navigate to the project directory:
cd noxo
- Install dependencies:
npm install
- Start the development server:
npm run dev
- Open your browser and visit
http://localhost:3000
- The game starts with an empty 3x3 grid.
- Two players take turns: one plays as "X" and the other as "O".
- Click on an empty cell to place your symbol.
- The first player to get three of their symbols in a row (horizontally, vertically, or diagonally) wins.
- If all cells are filled and no player has won, the game is a draw.
You can customize the neumorphic design by modifying the shadow values in the Tailwind classes. The current design uses a light gray background (#bebebe) for shadows.
To change the animation of symbol placement, modify the animate-rise
keyframes in your tailwind.config.js
file.
- React
- Next.js
- Tailwind CSS
Contributions are welcome! Please feel free to submit a Pull Request.
This project is open source and available under the MIT License.