Can I use this for complex SaaS pricing pages?

Absolutely. It includes specific patterns for multi-tier pricing, highlighted 'most popular' plans, and feature comparison matrices.

What kind of UI components are included?

It covers hero sections, feature grids, bento layouts, testimonials, logo clouds, FAQ accordions, and advanced navigation components.

Does this skill support mobile-first responsive design?

Yes, all patterns utilize Tailwind's responsive utility classes to ensure layouts look perfect on mobile, tablet, and desktop viewports.

Are these patterns compatible with React or Vue?

The patterns are provided as HTML and Tailwind classes, making them easily adaptable to any framework like React, Vue, or Next.js.

Does it follow web accessibility standards?

Yes, the generated patterns focus on semantic HTML and include necessary ARIA attributes for components like mobile menus and buttons.

Tailwind Marketing UI Patterns

Name: Tailwind Marketing UI Patterns
Author: peixotorms

bypeixotorms

0•

Design Tools

Generates high-converting marketing page components and layouts using production-grade responsive Tailwind CSS patterns.

This skill provides a comprehensive library of production-ready Tailwind CSS patterns specifically optimized for marketing contexts like landing pages, SaaS homepages, and promotional sites. It enables Claude to implement complex layouts—including bento grids, pricing tables with toggles, and multi-column footers—using industry-standard responsive design principles and accessible HTML structures. Whether you are building a simple hero section or a detailed feature comparison matrix, this skill ensures visual consistency in typography, spacing, and hierarchy across the entire marketing funnel to drive user engagement and conversion.

Key Features

01Modern Feature layouts featuring icon grids, alternating rows, and asymmetric bento grids

02Social proof components including testimonial grids, grayscale logo clouds, and stats sections

03Responsive Hero section variants including split-image, app screenshots, and phone mockups

04Full-page navigation patterns with sticky headers, flyout menus, and announcement banners

050 GitHub stars

06High-conversion Pricing tables with emphasized tiers, feature lists, and billing toggles

Use Cases

01Developing high-performance SaaS landing pages with clear value propositions and CTAs

02Designing responsive corporate homepages with integrated social proof and blog sections

03Creating professional pricing pages with complex feature comparisons and subscription tiers

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add peixotorms/odinlayer-skills tailwind-marketing

For use in Claude.ai and ChatGPT

Download Skill