Tailwind CSS Grid Layout Generator

Create responsive grid layouts effortlessly with this Tailwind CSS generator. Define the number of rows and columns, customize cell styles, and generate code snippets for your layout.

Features

  • Easy-to-use interface for generating grid layouts.
  • Customize the number of rows and columns.
  • Select individual cells to create patterns.
  • View and copy the generated Tailwind CSS code for your layout.

Getting Started

  1. Clone this repository to your local machine or download the ZIP file.

  2. Navigate to the project directory using your terminal.

  3. Install the project dependencies:

    npm install
  4. Start the development server:

    npm start
  5. Open your browser and navigate to http://localhost:3000 to use the application.

Usage

  1. Specify the number of rows and columns using the input fields.
  2. Click on cells in the grid to select them. Selected cells will have a different background color.
  3. Click the "View Code" button to generate the Tailwind CSS code for your layout.
  4. The generated code will be displayed in a modal. Click the "Copy Code" button to copy the code snippet to your clipboard.

Contributing

Contributions are welcome! If you find a bug or have an idea for improvement, please create an issue or submit a pull request.

License

This project is licensed under the MIT License - see the LICENSE file for details.


You can customize the sections as needed and add any additional information that would be relevant to users who want to use or contribute to your project. Don't forget to include a LICENSE file in your project directory if you choose to use the MIT License or any other license.