Border-radius Previewer

Overview

The Border-radius Previewer is a web application built with Vue.js and Tailwind CSS that allows users to preview and generate CSS code for border-radius values. Users can input different border-radius values for each corner of a box and see the live preview of the shape.

Features

• Input fields for adjusting border-radius values for each corner (top-left, top-right, bottom-left, bottom-right).
• Real-time preview of the shape with dynamically applied border-radius values.
• Copy button to copy the generated CSS code for the border-radius to the clipboard.
• Links to the GitHub repository and more project ideas.

Project Structure

• src/App.vue: Vue Page containing the main functionality and UI elements of the Border-radius Previewer.
• src/styles/main.css: Tailwind CSS file for styling the components.
• src/main.ts: Main entry point for the Vue.js application setup.
• index.html: HTML file containing the app's main structure and dependencies.

Installation

1. Clone the GitHub repository:

   git clone https://github.com/ekunemmanuel/border-radius-previewer.git
   

2. Navigate to the project directory:

   cd border-radius-previewer
   

3. Install dependencies:

   npm install
   

4. Run the development server:

   npm run serve
   

5. Open your browser and visit http://localhost:8080 to view the app.

Usage

1. Adjust the border-radius values for each corner using the input fields.
2. See the live preview of the shape with the updated border-radius values.
3. Click the "Copy CSS" button to copy the generated CSS code to the clipboard.

Links

• GitHub Repository: Border-radius Previewer Repository
• More Project Ideas: Explore More Ideas

Contributing

Contributions are welcome! Feel free to open issues or pull requests for any enhancements or bug fixes.

License

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