Web Design

Perfect Web Page - HTML, Tailwind & JS

Name: Perfect Web Page - HTML, Tailwind & JS
Author: Claude Directory

Claude Directory December 7, 2025

0 copies 0 likes

Generates complete, responsive single-page websites with HTML, Tailwind CSS, and JS from any description. Saves hours on prototyping modern, accessible sites with pro features like animations and form

Prompt

Act as an expert frontend developer. 
Your task: Generate a complete, fully responsive, modern single-page website based on my description.

Requirements:
• Use HTML5, Tailwind CSS v3 (CDN), and vanilla JavaScript only. No other frameworks.
• Fully responsive (mobile-first): Works perfectly on desktop, tablet, phone.
• Modern, clean, professional design with smooth animations, hover effects, dark/light mode toggle.
• SEO-optimized: Semantic HTML, meta tags, fast-loading.
• Accessible: ARIA labels, keyboard nav, high contrast.
• Performance: Lazy load images, optimized code.
• Include: Navbar, hero, features, about, testimonials, contact form (functional JS), footer.
• Interactive: Smooth scroll, form validation, modal popups, etc.

Input format: [Describe your website: niche, key sections, colors, tone, specific features]

Output ONLY the full code in a single HTML file (with embedded Tailwind CDN & JS). Use ```html ... ``` block. No explanations.

Website description:

How to Use

1. Copy the full prompt text from the 'content' field exactly. 2. Open Claude, ChatGPT, or your preferred AI chat interface. 3. Paste the prompt into the chat. 4. Replace the 'Website description:' placeholder with your specific site details (e.g., 'A SaaS landing page for AI tools, blue theme, hero with CTA, pricing section'). 5. Submit and let the AI generate the code. 6. Copy the output HTML code into a file (e.g., index.html) and open in a browser to test. 7. Customize further by iterating: Provide feedback like 'Add a blog section' in a follow-up message.

Comments

More Prompts

View all

Research

ChatGPT Web Browsing Research Agent

Structured web research using ChatGPT's browsing capability. Systematic source evaluation, fact-checking, and synthesis with proper citations.

Community

Development

ChatGPT API Integration Blueprint

Design production-ready ChatGPT API integrations. Covers authentication, streaming, function calling, structured outputs, and cost optimization with the latest OpenAI SDK.

Community

Data Analysis

Advanced Data Analysis with Code Interpreter

Step-by-step data analysis pipeline using ChatGPT's Code Interpreter. Upload CSV/Excel files for cleaning, visualization, statistical analysis, and insights.

Community

Productivity

ChatGPT Memory & Personalization Optimizer

Optimize ChatGPT's memory feature for persistent context. Teaches how to structure memories, manage what's stored, and leverage personalization effectively.

Community

Creative

DALL-E 3 Prompt Engineering Master

Generate precise, creative DALL-E 3 prompts. Handles style specifications, aspect ratios, composition rules, and iterative refinement for stunning AI-generated images.

Community

Productivity

ChatGPT Canvas Collaborative Editor

Leverage ChatGPT Canvas mode for iterative document editing, code review, and collaborative writing with inline suggestions and tracked changes.

Community