Prompt pack · 25 prompts
Build premium content and blog-style website features faster with AI.
Instant download after checkout. All sales are final — every prompt is listed below.
What's inside
Every one of these is in the download as a full, copy-paste prompt.
A minimalist article layout with a fixed-position gradient reading progress bar that updates in real time as readers scroll, paired with Tailwind's prose class and serif typography for premium editorial readability.
Best forLong-form articles, essays, editorial publications, magazine sites
An author profile card with a hover-triggered slide-up panel revealing recent posts, anchored by a circular ring-bordered avatar that scales gently on hover for tactile, premium feedback.
Best forAuthor bios, blog sidebars, creator landing pages
A dynamic pagination component that intelligently inserts ellipses when page counts exceed seven, with keyboard-navigable buttons, focus ring styling, and crisp indigo active-page indicators.
Best forBlog indexes, search result pages, archive navigation
A responsive masonry blog grid that loads additional posts via the Intersection Observer API as readers near the bottom, with newly inserted items gracefully fading in using staggered Tailwind transitions.
Best forVisual blogs, portfolio feeds, photo-heavy publications
A horizontal snap-scroll carousel of featured articles with parallax background shifts driven by scroll events, plus an auto-advance timer that rotates slides every five seconds for a cinematic homepage feel.
Best forMagazine homepages, editorial hero sections, featured stories
A sticky sidebar table of contents that highlights the active section using the Intersection Observer API, with smooth native CSS anchor scrolling between headings for a modern documentation feel.
Best forLong-form guides, documentation, deep-dive essays
A related posts grid where each card lifts and sharpens its shadow on hover, with a semi-transparent gradient overlay that intensifies on interaction to keep title text crisp against any thumbnail image.
Best forPost footers, recommendation sections, blog discovery
A fixed floating share toolbar docked to the bottom-right corner that expands horizontally on click, with brand-colored circular share buttons and accessible focus ring styling for keyboard users.
Best forArticle pages, editorial content, share-driven blogs
A polished code snippet block with an absolutely-positioned copy-to-clipboard button that triggers a success tooltip, paired with consistent syntax-highlighted monospaced styling for technical articles.
Best forDeveloper blogs, technical tutorials, documentation sites
A horizontally scrollable category filter bar with a distinctive active-state underline and pill-styled indigo highlights, letting readers switch topics with clear, immediate visual feedback.
Best forBlog homepages, topic navigation, content hubs
A search results page that wraps matched keywords in styled mark tags for instant scannability, with line-clamped snippets that expand inline via a Read More toggle for frictionless browsing.
Best forBlog search pages, knowledge bases, editorial archives
A responsive image gallery grid that launches a fade-in lightbox viewer on click, complete with keyboard-navigable arrow controls for smooth slideshow browsing through photo-rich editorial content.
Best forPhoto essays, visual journalism, portfolio galleries
A custom podcast audio player featuring a branded circular play/pause button with a pulse animation during playback, plus a real-time progress bar synced via the audio element's timeupdate event.
Best forPodcast shows, audio blogs, interview publications
A video player with fully custom controls below the frame — including a styled volume slider and a Fullscreen API toggle button that swaps icons to reflect its current state.
Best forVideo essays, tutorial sites, interview publications
A styled pull-quote block with italic type and a left accent border, featuring a floating tweet button that opens a pre-filled Twitter intent URL in a new tab for one-tap sharing.
Best forLong-form articles, editorial features, shareable quotes
A tag cloud where font sizes scale dynamically with tag frequency, with color-shift hover effects and group-hover tooltip popups revealing tag descriptions on interaction.
Best forBlog sidebars, topic discovery, archive pages
A newsletter subscription box with a side-by-side input and submit pair, live email validation that toggles the button's disabled state, and a pulsing thank-you message on successful subscription.
Best forBlog footers, sidebar CTAs, content upgrade blocks
A horizontally scrollable timeline with clickable event nodes that expand into detailed cards, plus automatic highlighting of the current event based on scroll position using Intersection Observer.
Best forHistorical features, brand timelines, retrospectives
An article rating system using SVG star icons with fractional-fill support via clipping, plus hover-preview state and a subtle checkmark animation confirming the submitted rating.
Best forReview sites, article feedback, rated content
Inline footnote markers rendered as clickable superscript numbers that expand tooltip cards on hover or tap, with smart viewport-aware repositioning to prevent clipping near screen edges.
Best forScholarly articles, research pieces, longform essays
A blog archive page with year and month filter dropdowns that update the archive list asynchronously without page reloads, plus collapsible month-grouped sections with slide animations.
Best forLong-running blogs, editorial archives, historical indexes
A glossary component with a sticky alphabetical index bar that scrolls readers to the corresponding terms, plus inline expansion of term definitions via animated max-height transitions.
Best forReference guides, educational content, documentation
A dedicated print view that strips all non-essential UI via Tailwind's print:hidden utilities and applies prose print:prose-lg typography, keeping semantic structure intact for accessible printed output.
Best forEditorial sites, reference articles, long-form publications
A reading time estimator that calculates and displays estimated minutes based on the article's word count, surrounded by a circular SVG progress indicator that tracks scroll position in real time.
Best forBlog posts, long reads, editorial articles
A previous/next series navigation bar with line-clamped post title previews and keyboard arrow-key support, giving readers a polished, accessible way to move through multi-part blog series.
Best forMulti-part series, course-style blogs, serialized content
Preview
Minimalist Article Layout with Reading Progress Bar
Act as a Senior Frontend Architect and UI/UX Expert. The Task: Write the complete, production-ready code for a [Minimalist Article Layout with Reading Progress Bar]. Tech Stack & Environment: - Strictly a SINGLE HTML file containing everything. - Use plain HTML5. - Use the Tailwind CSS CDN (<script src="https://cdn.tailwindcss.com"></script>) in the head for all styling. - Use plain Vanilla JavaScript enclosed in <script> tags for any interactivity. - Use inline SVG paths for any icons (do not use external icon libraries). Strict Requirements: - Visual Excellence: It must look like a premium, modern SaaS product (subtle shadows, rounded corners, clean borders, smooth hover/focus effects). - Responsive: Must look perfect on mobile, tablet, and desktop using Tailwind utility classes.
The feature-by-feature build steps continue in the pack — along with the other 24 prompts.
How to use it
Four steps. Zero setup. Every prompt in this pack is engineered to output a complete, single HTML file you can open directly in any browser.
Open any prompt page in this pack and copy the full prompt block to your clipboard.
Paste into Claude, ChatGPT, Gemini, Cursor, or any AI coding tool. No modifications required.
The AI returns a single complete HTML file. Copy the entire code block it produces.
Save it as index.html and double-click to open in your browser. Done.
What you get
Digital download from Gumroad, available right after checkout. Nothing ships.
Best for
Founders, affiliate marketers, creators, bloggers, publishers, freelancers, indie hackers, and anyone building article-driven websites, editorial layouts, or content-focused platforms.
All sales are final, per the Gumroad listing.
Questions
The pack’s own instructions name Claude, ChatGPT, Gemini, and Cursor. Paste a prompt into any of them, or a similar AI coding tool.
Each prompt asks the AI for one complete HTML file you can save and open in a browser. What comes back depends on the model you use — the pack recommends a strong one.
No build tools. Copy a prompt, paste it into your AI tool, save the HTML it returns, and open it in your browser.
The HTML version of the pack includes a customizer: enter your brand, colors, or feature goals and it generates a tailored version of any prompt.
No. All sales are final, as stated on the Gumroad listing. Every prompt in the pack is listed on this page so you can check it covers what you need first.
A prompt pack gives you single copy-paste prompts for individual UI features. The Mission Vault is a structured set of missions, safety rules, and build checklists for building complete dashboards with Claude Code.
More packs
Analytics dashboards, KPI grids, data tables, charts & kanban boards.
See the pack →Bold, high-converting hero sections that grab attention instantly.
See the pack →Navbars, mega-menus, sidebars & mobile navigation that just works.
See the pack →Login screens, account dashboards, settings & role-based UI.
See the pack →Product grids, carts, checkout flows & sales pages that convert.
See the pack →Landing pages, lead-gen funnels, popups & CTAs built to sell.
See the pack →Toasts, modals, slide-overs, loaders & animation that feels alive.
See the pack →Profiles, feeds, comments & community interface components.
See the pack →Footers, bottom bars, newsletter blocks & end-of-page sections.
See the pack →