⚡ Improve Blogger Iframe Embed Generator – Styling & Usability Enhancements

The Blogger Iframe Embed Generator is working well functionally, but we need to **improve styling, usability, and customization options** to make it more user-friendly for creators.

### **Objectives**

* Refactor styling with **TailwindCSS utility classes** for consistency.
* Ensure generated iframes are **responsive by default** (mobile-friendly, flexible widths).
* Add options for users to customize:

* Width & height presets (e.g., 100%, 800px, etc.)
* Border & shadow toggle
* Rounded corners toggle
* Improve the **UI form layout** for better clarity.
* Provide a **live preview window** that updates in real time as users adjust inputs.

### **Acceptance Criteria**

* [ ] Generator UI uses clean TailwindCSS styling.
* [ ] Embed outputs are responsive and tested across devices.
* [ ] Users can customize iframe appearance (size, borders, rounded).
* [ ] Live preview is functional and matches generated embed code.
* [ ] Code is documented and easy to maintain.

### **Tech Stack**

* **HTML5**
* **TailwindCSS**
* **Vanilla JavaScript**

### **Impact**

This update will make the generator more **professional, modern, and practical** for bloggers, educators, and creators who want to embed external content seamlessly into their posts.