Free Tailwind & HTML Templates

All templates

• 3-Column Testimonial Grid — Three-up testimonial grid with star rating, quote, and reviewer attribution. Soft cards on neutral background.
• 3-Tier Pricing with Toggle — Three-plan pricing section with monthly/yearly toggle and 20% yearly discount. Highlighted middle plan with badge.
• 3D Push Button — A tactile press-down button with layered shadow that depresses on click. Three color variants — violet, emerald, and rose.
• 4-Column Site Footer — Dark-mode 4-column footer with brand block, social links, three navigation columns, and a bottom bar with legal links.
• 404 / Empty State Page Wireframe — Friendly 404 page (Lostling Co.) on soft-mint canvas with warm orange accent. Sticky pill nav with rotated logo + italic "co." badge +…
• About / Company Page Wireframe — An About / Company page for a small studio with a hero (italic serif headline + meta sidebar showing founded date, studios, team size), a…
• Adventure Carousel with Hover Cards — Editorial-style image carousel with mixed-color headline, supporting subtitle, edge-bleeding row of staggered (zigzag) portrait cards.…
• AI LLM Product Landing Page — A premium dark-mode landing page for an AI LLM/assistant product. Includes a minimal mono header, a hero with drifting acid-green blob…
• Alternating Image-Text Features — Three-row alternating layout — image and copy switch sides each row. Numbered eyebrow, headline, body, and link CTA.
• Animated Aurora Hero — Premium hero with three animated aurora blobs floating behind a frosted-glass card. Gradient text headline and dual CTAs.
• Animated Counter Strip — Dark-mode stats strip with four counters that ease in from zero when scrolled into view. Gradient-filled numbers.
• Animated Spinner Set — Six pure-CSS loading spinners — ring, dots, dual ring, pulse, bars, and orbit. No JavaScript required.
• Architecture Studio Index Landing Page — A premium editorial landing page for an architecture practice. Includes an unstyled top-link nav with search affordance, a serif headline +…
• Aroma Coffee Shop Landing Page — A landing page for a slow-roast neighbourhood coffee shop with a sticky top menu, a big hero showing the headline "more than coffee" over a…
• Art Gallery Exhibition Landing Page — A premium horizontal-scrolling exhibition landing page for a contemporary art gallery. Visitors walk through nine sideways stations — an…
• Article / Single Post Page Wireframe — Long-form article page (Folio brand) with sticky nav + reading progress bar, centered hero with serif italic headline and cover image, and…
• Atrio Fine-Dining Restaurant Landing Page — A premium dark-luxury landing for a high-end restaurant brand. Includes a sticky translucent top bar with mobile drawer, a hero with…
• Atrium Fitness Studio Landing Page — A premium full-page landing styled as an editorial magazine for a yoga / pilates / slow-strength studio. Features a vertical side-rail…
• Author / Profile Page Wireframe — Author/photographer portfolio page ("Juno Marchetti") with sticky pill nav, split hero (italic serif name + portrait card with stats), Now…
• Auto-Scrolling Logo Marquee — Two-row infinite-scroll logo marquee with edge-fade mask. Pauses on hover. Two rows scroll in opposite directions at different speeds.
• Backdrop-Blur Modal — Centered dialog with a 14px backdrop-blur overlay, gradient icon badge, headline, body copy, two-row form (email + role select), and Cancel…
• Bento-Grid Feature Showcase — Asymmetric bento-style grid with five unequal feature tiles on a dark theme. Modern, on-trend layout for SaaS landing pages.
• Blog / Magazine Home Wireframe — An editorial wireframe for blogs / online magazines with a top utility bar (date + weather), serif masthead, sticky section nav with search…
• Book / Author Landing Page Wireframe — Editorial book landing page (The Slow Frequency by Juno Marchetti) on warm paper canvas with oxblood + gold accents. Sticky serif nav with…
• Car Rental Landing Wireframe — Full-page low-fidelity wireframe for a car-rental landing page — nav with Logo + 5 links + Register/Log In, hero with right-side…
• Carbon Removal Portfolio Landing Page — A premium data-dense landing page for a carbon-removal research firm or climate fund. Includes a meta top bar, a counter hero with…
• Careers / Jobs Board Page Wireframe — A careers / jobs board page for a dev-tools brand with a hero showing company stats (team size, ARR, open roles), a horizontal meta strip…
• Casa Serena Wedding Venue Landing Page — A dark editorial full-page landing for a private wedding estate, organised as nine wheel-snap chapter pages. Includes a fixed centred…
• Case Study / Customer Story Page Wireframe — A B2B customer story / case study page with a hero showing industry tags, italic headline, customer meta (company, size, industry, etc.),…
• Centered Gradient Hero — Centered hero section with announcement pill, oversized headline, dual CTA buttons, social proof line, and animated gradient blobs in the…
• Changelog / Release Notes Page Wireframe — A long-form changelog / release notes page with a "What's new" hero, a search bar and category filter chips (New, Fixed, Performance, API,…
• Charity Campaign Landing Page — Editorial-newspaper styled charity match-funding landing page with live status topbar, 2x match countdown, big tabular-numerals donation…
• Coffee Roastery Landing Page — A landing page for a small-batch specialty coffee roastery with overlapping header, full-bleed hero, story split with head-roaster portrait…
• Coming Soon / Waitlist Page Wireframe — Coming-soon waitlist page (Halftime) on peach canvas with rose accents and olive highlight. Sticky pill nav with live countdown chip +…
• Comparison / Alternative Page Wireframe — A "Brand vs Competitor" comparison page with a big VS hero showing both logos and dueling metric bars, a 6-card "why we win" grid (faster,…
• Comparison Pricing Table — Feature-by-feature pricing comparison across Free, Pro, and Business plans. Highlighted middle column with bottom CTA row.
• Conference Event Landing Page — A landing page for a multi-track conference with sticky utility bar (dates and early-bird countdown), transparent header, hero with stacked…
• Confirmation Modal — Centered confirmation dialog with backdrop blur, warning icon, headline, body, and Cancel/Confirm buttons. Animated entry.
• Contact Form - Floating Labels — A clean contact form with animated floating labels on focus. Name, email, and message fields plus a submit button.
• Cookie Consent Banner — GDPR-style cookie consent banner anchored to the bottom of the page with cookie icon, body copy, and three-action button row.
• Dashboard Home Wireframe — Multi-screen admin dashboard (Apex brand) with collapsed icon sidebar, sticky topbar with tab switcher, and 6 switchable screens: Overview…
• Developer Portfolio Landing Page — A landing page / personal site for a senior software engineer or indie developer with monospace top bar showing availability, brand row…
• Documentation / Docs Home Page Wireframe — A developer docs home page with a search bar, 3-step "get started" guide, 8 browse categories (Quickstart, Guides, API reference, SDKs,…
• E-commerce Product Listing Wireframe — An e-commerce product listing page with a top promo bar, a nav with search and cart icons, breadcrumbs and page title, a two-column layout…
• Eco Hero with Image Gallery Strip — Centered eco/nature hero with pill badge, oversized two-line forest-green headline, subtitle, mint and outlined pill CTAs, and a full-bleed…
• Ember & Brew Coffee Shop Landing Page — A premium full-page landing for a neighbourhood specialty coffee shop. Features a sticky paper-cream header with side drawer, an oversized…
• Event / Conference Landing Wireframe — Tech conference landing page with sticky nav, dark hero with countdown timer, speakers grid, 3-day schedule tabs, venue section with map,…
• Featured Post + Grid — Blog index layout with one large featured post on the left and a 4-item compact list on the right.
• Film Documentary Deck Landing Page — A premium full-page landing-as-a-film-deck for an indie / arthouse / festival documentary release. Each section snaps to its own viewport…
• Filterable Portfolio Grid — Portfolio grid with category filter pill bar — All, Web, Brand, App. Six showcase items, fully filterable.
• Glassmorphism Info Card — Frosted-glass info card with backdrop blur over a vibrant gradient background. Includes icon badge, headline, body, and link.
• Golden Crumb Bakery Landing Page — A landing page for an artisan bakery with a top menu, a big intro showing star ratings and an order-online button, a story section with…
• Gradient Banner CTA — Full-width gradient CTA banner with bold headline, subhead, and a single primary call-to-action button.
• Gradient Button Pack — Six vibrant gradient button styles with hover shimmer effect — sunset, ocean, forest, candy, fire, and aurora variants.
• Help Center / Knowledge Base Page Wireframe — A friendly help center page with a search bar at the top, 8 category tiles (account, billing, security, etc.), a list of trending articles,…
• Hero with Video Background — Cinematic hero with looping muted video background, dark overlay, large headline, and a single rounded CTA. Perfect for agencies and…
• Hotel / Travel Booking Page Wireframe — Boutique forest-hotel landing page (Casa Verdana) on warm sand canvas with deep forest + terracotta + gold accents and real Unsplash…
• Icon Button Set — A clean set of icon buttons in solid, ghost, and outline variants — plus an icon-only square button. Built with inline SVG icons.
• Icon Grid Features (3x2) — Six-feature grid section with icon, headline, and short body in a 3x2 layout. Soft cards on hover, fully responsive.
• Integrations Directory Page Wireframe — An integrations marketplace page with a search bar at the top, filter chips by category (CRM, communication, analytics, etc.), a featured…
• Ironclad Auto Repair Landing Page — A premium, full-page landing wireframe for a full-service auto repair and maintenance shop.
• Job Listing Detail Page Wireframe — Biotech job listing detail page (Tincture Labs — Senior Computational Biologist) on cool stone canvas with deep teal accent. Sticky nav +…
• Lightbox Masonry Image Gallery — CSS columns masonry image gallery with category filter pill bar, hover-zoom + caption reveal, and a full-screen lightbox with arrow-key…
• Login / Sign-in Split-Screen Page Wireframe — Split-screen login page (Aperture) with deep cobalt left panel and white right panel. Left uses CSS grid to anchor three sections: top…
• Login Card with Social Auth — Login card with Google and GitHub social sign-in buttons, email/password fields, remember-me checkbox, and signup link.
• Magazine 3-Column Blog Grid — Three-column blog index card grid with cover image, colored category chip, title, excerpt, and author byline.
• Masonry Image Gallery with Lightbox — Pinterest-style masonry image gallery with click-to-open lightbox, ESC-to-close, and image hover zoom. Eight images, dark theme.
• Masonry Testimonial Wall — Pinterest-style varied-height testimonial wall with 8 quotes across 3 columns. Includes one featured dark-mode highlight card.
• Mega Menu Navbar — Premium navbar with multi-column mega menu dropdown — three link columns plus a featured promo card.
• Mercato Fintech Neobank Landing Page — A premium full-page landing for a neobank / fintech for finance teams. Features an underplayed top header with brand wordmark and 'open an…
• Minimal Centered Footer — Compact centered footer with logo, single row of nav links, social icon row, and copyright line. Light theme.
• Mobile App Landing Wireframe — A full-page wireframe template for mobile/finance app landing pages. Includes a sticky pill nav with mobile drawer, a phone mockup hero…
• Mobile Slide-out Drawer Nav — Mobile-first navigation: hamburger button opens a right-side slide-out drawer with nav links, sign-in, and primary CTA. Includes overlay…
• Multi-Step Accordion FAQ — Onboarding-style FAQ with three step tabs (Install · Configure · Ship). Switching tabs swaps the accordion list; a tiny progress bar fills…
• Multi-Step Signup Wizard — Three-step signup wizard with progress bar, animated step indicators, and back/forward navigation. Account → Profile → Confirm flow.
• Music Artist Album Landing Page — A bold black-and-orange landing page for a music artist and their LP, built around the tracklist as the homepage. Includes a tiny masthead…
• Newsletter + Links Footer — Light-theme footer with prominent newsletter signup at top and a 4-column link grid below. Bottom bar with copyright and stack credit.
• Newsletter CTA Footer — Dark-mode footer that leads with a prominent newsletter CTA card (gradient glow background, inline email + subscribe button, social proof…
• Newsletter Landing Page Wireframe — Editorial newsletter landing page (The Mainline) on pink-pale canvas with magenta accent and pink/gold/teal highlights. Sections: header…
• Newsletter Signup CTA — Dark-mode newsletter signup with inline email input, subscribe button, and a subscriber count proof line.
• Onboarding / Welcome Page Wireframe — Onboarding/welcome page (Mosaic) with sticky header showing brand mark, step indicator, draft-saved pill, help link, and exit button. Split…
• Online Course Landing Wireframe — An online course / cohort landing page with sticky nav, split hero (gradient headline + dual CTAs + star rating + student avatars + video…
• Online Magazine Landing Page — A print-style three-column landing page for an online literary magazine — centered italic masthead with issue meta, secondary nav row with…
• Pet Care & Vet Clinic Landing Page — A warm, illustrated landing page for a small neighbourhood vet clinic with a hand-drawn aesthetic. Includes a tiny header with wobbling…
• Podcast Home Page Wireframe — Premium editorial podcast home page (Atelier) on deep ink-black canvas with champagne-brass accents and real Unsplash photography.…
• Pricing Page Wireframe — A SaaS pricing page with an announcement banner, hero with italic accent headline, monthly/annual toggle (with "save 20%" badge), 3-tier…
• Product Card with Hover Reveal — E-commerce product card with image zoom on hover and a Quick Add overlay button. Includes "New" badge, price, and rating.
• Profile Card with Stats — Social profile card with gradient cover, avatar, role, follower/post stats row, and a follow button.
• Real Estate Listing Wireframe — A real estate landing page with a top nav bar, a hero section with two buttons and a savings card, a search bar to find homes by location,…
• Recipe / Article Card — A clean editorial card for recipes or articles — image header, meta row, title, excerpt, and tag chips.
• Recipe Cookbook Landing Page — An editorial cream-paper landing page for a small cookbook, structured like a real book. Includes a top utility row with mobile drawer, an…
• Restaurant Menu Landing Template — A restaurant landing page with a top nav (phone + reserve buttons), a hero section with a featured dish photo and two buttons, a menu…
• RoadReady Driving Academy Landing Page — A landing page for a driving school with a top menu, a big intro section showing star ratings and a sign-up form for $50 off, a stats bar…
• SaaS Product Landing Wireframe — Full-page low-fidelity wireframe for a SaaS product marketing landing page — sticky nav with mobile drawer, split hero with eyebrow badge +…
• Scoops & Dreams Ice Cream Shop Landing Page — A landing page for an artisan ice cream and gelato shop with a sticky top menu, a big intro section with the headline "Life Is Better with…
• Search Results Page Wireframe — Enterprise search results page (Sift) on paper canvas with indigo accent. Sticky header with rotated logo + live search field showing query…
• Search with Autocomplete — Search input with type-ahead dropdown showing categorized results — products, articles, people. Includes ⌘K shortcut hint.
• Settings / Account Page Wireframe — Settings/account page on porcelain canvas with deep wine accent. Sticky pill nav with breadcrumb + save indicator + search/notifications +…
• Single Featured Plan + Tiers — Premium pricing layout with a scaled, dark-mode middle plan flanked by two compact alternative tiers. RECOMMENDED ribbon and gradient CTA.
• Single-Column Accordion FAQ — Vertical accordion FAQ with 5 questions, smooth open/close, animated +/× icon, and a contact link in the header.
• Skeleton Loader Pack — Three skeleton loader variants — image card, profile card, and list — with smooth shimmer animation. Drop-in placeholders for any loading…
• Solar Hero with Overlay & Spotlight Card — Cinematic solar/energy hero with full-bleed background image, deep diagonal gradient overlay, rounded outer frame, oversized white…
• Split CTA with Illustration — Two-column CTA section with copy and primary action on the left, layered SVG illustration on the right.
• Split-Screen Hero with Image — 50/50 hero section with eyebrow, headline, subhead, dual action, and supporting feature list on the left; product mockup image on the right.
• Stats with Icon Cards — Three stat cards with colored icon, big number, label, and a delta line showing change vs prior quarter.
• Status Page Wireframe — A dark-mode status page with a big "all systems operational" pill at the top, uptime stats, and a list of 9 services each showing a 90-day…
• Sticky Glass Navbar — Sticky-positioned header with frosted-glass backdrop blur. Logo, 5 nav links, sign-in link, and primary CTA.
• Team Cards with Bio Hover — Photo-first team cards where the bio paragraph expands smoothly on hover under name and role.
• Team Grid with Social Links — Four-up team grid with avatar, name, role, and social icons that fade in on hover.
• Testimonial Carousel — Auto-rotating testimonial carousel with three slides, animated dots indicator, and a 5-second auto-advance.
• Tilt-on-Hover 3D Card — A premium card that tracks cursor position to apply a 3D tilt with a reactive radial gradient highlight. Pure CSS + a few lines of JS.
• Two-Column FAQ with Search — Help-center-style FAQ with a top search bar and a 2-column accordion list of common questions.
• Vella Health Telehealth Clinic Landing Page — A premium emerald-and-bone landing page for a virtual primary-care and mental-health clinic. Includes a tiny header with mobile drawer, a…