A
Anonymous

U R L Shortener - Copy this React, Tailwind Component to your project

Create a responsive and modern UI for a URL shortener website, including a Hero Section with the following details: Header: Place a logo on the left side of the header. Add a navigation menu with items like Home, Features, Pricing, and Contact. Include a GitHub link on the right side for users to view the project's repository. Hero Section: Design a large, visually appealing hero section below the header. Add a main heading (H1): Text: "Shorten URLs Effortlessly" Style: Bold and modern, placed prominently. Add a subheading (H2): Text: "Transform long URLs into simple, shareable links in seconds." Style: Light weight, below the main heading. Add a call to action (CTA) button: Text: "Start Shortening" Style: Large, colorful, and centered. Use a background image or gradient color for the hero section to create an engaging visual appeal. Include an illustration or icon related to URL shortening, like a link chain or a digital network. Body: Center a full page form with: An input field to enter the long URL. An input field for an optional custom alias. A button to generate the short URL. Add a link/button below the form to view previously generated short URLs. Footer: Divide into three columns: Column 1: Website logo and a short description. Column 2: List of important links (Privacy Policy, Terms of Service, etc.). Column 3: Social media icons with links (e.g., Twitter, LinkedIn, Instagram). Below the columns: Include copyright text: © 2024. All Rights Reserved. Credit: Developed and Designed by Aftab Ali Khan. Style: Maintain a modern, minimalistic look. Use smooth animations for buttons and interactive elements. Ensure responsive design optimized for all screen sizes.

Prompt
Component Preview

About

URLShortener - Create a modern, responsive URL shortener with a hero section, input fields, and social links, built with React and Tai. Download code free!

Share

Last updated 1 month ago