Generate UI components with simple prompts

Ready to copy and paste with Tailwind CSS. Any design system, any framework.

Tip: describe in detail the component such as colours, texts and sizes.







Featured components generated

Latest creations by the community

### Website Design Prompt **Objective:** Create a fully functional and aesthetically pleasing front-end website that includes a navigation bar, footer, hero section, slider, carousel, and multiple linked pages (Home, About, Contact). Additionally, implement a login page that links back to the home page, incorporating a login button in the navbar. Focus on color combinations, animations, and overall user experience. #### Components Breakdown: 1. **Navbar:** - Design a responsive navigation bar at the top with the following links: - Home - About - Contact - Login (button styled for a prominent appearance) - Implement a dropdown menu feature for mobile view. - Position the login button on the right side of the navbar. - Use a visually appealing color combination (suggested: primary color for the background, contrasting text colors for readability). - Utilize CSS for hover effects (e.g., changing color or background). 2. **Hero Section:** - Create a full-width hero section below the navbar with: - A captivating background image or video. - A catchy headline and subheadline, centered in the middle of the section. - A call-to-action button (e.g., "Get Started", "Learn More"). - Ensure the text is legible against the background, possibly by applying a semi-transparent overlay. 3. **Slider:** - Integrate a slider section to showcase featured content or products. - Use JavaScript or a library (like Slick or Swiper) for smooth transitions between slides. - Each slide should include an image, short description, and a button linking to more details. 4. **Carousel:** - Implement a carousel in a dedicated section (for testimonials, featured articles, etc.). - Ensure that navigation arrows and dots are clearly visible for easy use. 5. **Footer:** - Design a footer that includes: - Links to social media. - Quick access links (similar to the navbar). - Copyright information and additional useful links (Privacy Policy, Terms of Service). - Use a contrasting color to distinguish the footer from the main content. 6. **Linked Pages:** - **Home Page:** - Summary of main content, featuring the Hero, Slider, Carousel, and a brief introduction. - **About Page:** - A detailed overview of the website or company, mission statement, and team profiles. - Include images or icons to enhance visual appeal. - **Contact Page:** - A contact form with fields for name, email, message, and a button to submit. - Include additional contact information (address, phone number, etc.). 7. **Login Page:** - Create a dedicated login page that includes: - Fields for username/email and password. - A 'remember me' checkbox. - A submit button styled for visibility. - Link back to the Home page and possibly a "Forgot Password?" link. - Ensure error messages are displayed clearly if login fails. 8. **Scroll Animation:** - Implement smooth scroll animations for transitions between sections on the Home page. - Use CSS animations to fade in elements as they come into the viewport. - Consider adding unique animations (e.g., bounce or slide) for elements in the Hero, Slider, and Carousel sections. #### Styles: - Choose a color palette that enhances usability and brand identity (suggestions: a primary color, a secondary color, and complementary accent colors). - Use web-safe fonts or Google Fonts for typography, maintaining readability. - Ensure consistency in style across all components (margins, paddings, button styles, etc.). #### Technical Specifications: - Use HTML5 and CSS3 for structure and styling. - JavaScript (or a JS framework/library) for interactivity (e.g., sliders, carousels). - Ensure the website is responsive and works well on both desktop and mobile devices. - Optimize images and assets for fast loading times. This prompt should guide you in developing a comprehensive, user-friendly website that not only looks great but also functions smoothly across all devices.4 seconds ago

calculator app using python4 seconds ago

create a web page in which user could create their profile(investor, inventor, developer) like about,name,company(optional),investment focus, type of project you are looking for, Track record, skills,portfolio,experience, idea showcase, idea uploading,market , problem solution, why invest in idea.7 seconds ago

a registration page 20 seconds ago

A page in which user can upload multiple documents, like Medsheet, facesheet, ID card, Insurance Card2 minutes ago

Calculator of ios3 minutes ago

simple calculator app for android3 minutes ago

tow boxes and outside box color is red and inside is white. inside box always be at the bottom of the parent boc4 minutes ago

dictionary app6 minutes ago

Login page looks like instagram 6 minutes ago

create a portfolio using html css and js8 minutes ago

Hero section like apple website 9 minutes ago