DS
Deep saha

Extension Modal - Copy this React, Tailwind Component to your project

Create a modern and professional modal box (banner) UI template for a browser based application. The modal should prompt the user to install a browser extension. The design must include the following elements: Modal Layout: A centered modal box with a clean, rounded corner design. A subtle overlay in the background with slight dimming to draw attention to the modal. Header Section: A bold title, such as: "Install our extension to get your cookies instantly." A subtitle or description below the header: "To automate actions on your behalf, [tool name] connects to your [platform name] account using your session cookie." Hyperlink: Include a clickable text link, styled in blue (or a primary accent color), labeled "session cookie." Action Button: A prominent button labeled "Install extension" placed at the bottom of the modal. The button should include a small external link icon to indicate it will open a new page. Visual Enhancements: Include small branding icons for platforms like Instagram, X (Twitter), LinkedIn, and Google. Place these icons neatly at the top right corner of the modal box for visual balance. Styling: Use a minimalist design: Background: Light neutral tones (e.g., white or beige with soft shadows). Font: Modern sans serif font for readability. Button: Primary accent color (e.g., blue or green) with hover effects. Icons: Subtle, colorful, and consistent in size, positioned cleanly. Close Icon: A small, unobtrusive close ("X") icon in the top right corner of the modal box. Ensure the design maintains a professional and user friendly tone, with a clear focus on the call to action. The modal should look visually appealing while providing clear instructions to the user.

Prompt
Component Preview

About

ExtensionModal - A sleek, rounded modal for browser extension prompts, featuring a clear title, action button, platform icons, and bu. Free code available!

Share

Last updated 1 month ago