tailwind-patterns
starsforks
How to install tailwind-patterns?
nguyenphp/antigravity-marketing/tailwind-patterns
$npx -y skills add nguyenphp/antigravity-marketing --skill tailwind-patternsTailwind CSS patterns for marketing websites and landing pages.
SKILL.md
| 1 | # Tailwind Patterns for Marketing |
| 2 | |
| 3 | > Essential Tailwind CSS patterns for marketing sites. |
| 4 | |
| 5 | --- |
| 6 | |
| 7 | ## 1. Hero Section Patterns |
| 8 | |
| 9 | ### Centered Hero |
| 10 | |
| 11 | ```html |
| 12 | <section class="relative min-h-screen flex items-center justify-center bg-gradient-to-br from-purple-900 to-indigo-900"> |
| 13 | <div class="text-center max-w-4xl px-6"> |
| 14 | <h1 class="text-5xl md:text-7xl font-bold text-white mb-6">Your Headline</h1> |
| 15 | <p class="text-xl text-gray-300 mb-8 max-w-2xl mx-auto">Supporting text here</p> |
| 16 | <div class="flex flex-col sm:flex-row gap-4 justify-center"> |
| 17 | <a href="#" class="px-8 py-4 bg-white text-purple-900 font-semibold rounded-full hover:bg-gray-100 transition">Get Started</a> |
| 18 | <a href="#" class="px-8 py-4 border border-white text-white rounded-full hover:bg-white/10 transition">Learn More</a> |
| 19 | </div> |
| 20 | </div> |
| 21 | </section> |
| 22 | ``` |
| 23 | |
| 24 | --- |
| 25 | |
| 26 | ## 2. CTA Button Patterns |
| 27 | |
| 28 | ### Primary Button |
| 29 | |
| 30 | ```html |
| 31 | <button class="px-8 py-4 bg-gradient-to-r from-purple-600 to-indigo-600 text-white font-semibold rounded-lg shadow-lg hover:shadow-xl hover:scale-105 transition-all duration-200"> |
| 32 | Get Started Free |
| 33 | </button> |
| 34 | ``` |
| 35 | |
| 36 | ### Ghost Button |
| 37 | |
| 38 | ```html |
| 39 | <button class="px-8 py-4 border-2 border-gray-800 text-gray-800 font-semibold rounded-lg hover:bg-gray-800 hover:text-white transition-all duration-200"> |
| 40 | Learn More |
| 41 | </button> |
| 42 | ``` |
| 43 | |
| 44 | --- |
| 45 | |
| 46 | ## 3. Feature Grid |
| 47 | |
| 48 | ```html |
| 49 | <div class="grid md:grid-cols-3 gap-8"> |
| 50 | <div class="p-8 bg-white rounded-2xl shadow-lg hover:shadow-xl transition"> |
| 51 | <div class="w-12 h-12 bg-purple-100 rounded-lg flex items-center justify-center mb-6"> |
| 52 | <!-- Icon --> |
| 53 | </div> |
| 54 | <h3 class="text-xl font-bold mb-3">Feature Title</h3> |
| 55 | <p class="text-gray-600">Feature description goes here.</p> |
| 56 | </div> |
| 57 | </div> |
| 58 | ``` |
| 59 | |
| 60 | --- |
| 61 | |
| 62 | ## 4. Testimonial Card |
| 63 | |
| 64 | ```html |
| 65 | <div class="p-8 bg-white rounded-2xl shadow-lg"> |
| 66 | <div class="flex items-center gap-1 mb-4"> |
| 67 | <!-- 5 stars --> |
| 68 | <span class="text-yellow-400">★★★★★</span> |
| 69 | </div> |
| 70 | <p class="text-gray-700 mb-6 italic">"Testimonial quote here..."</p> |
| 71 | <div class="flex items-center gap-4"> |
| 72 | <img src="avatar.jpg" class="w-12 h-12 rounded-full" alt=""> |
| 73 | <div> |
| 74 | <p class="font-semibold">John Doe</p> |
| 75 | <p class="text-sm text-gray-500">CEO, Company</p> |
| 76 | </div> |
| 77 | </div> |
| 78 | </div> |
| 79 | ``` |
| 80 | |
| 81 | --- |
| 82 | |
| 83 | ## 5. Pricing Card |
| 84 | |
| 85 | ```html |
| 86 | <div class="p-8 bg-white rounded-2xl shadow-lg border-2 border-purple-600 relative"> |
| 87 | <span class="absolute -top-3 left-1/2 -translate-x-1/2 px-4 py-1 bg-purple-600 text-white text-sm rounded-full"> |
| 88 | Popular |
| 89 | </span> |
| 90 | <h3 class="text-2xl font-bold mb-2">Pro Plan</h3> |
| 91 | <p class="text-gray-600 mb-6">For growing teams</p> |
| 92 | <div class="mb-6"> |
| 93 | <span class="text-5xl font-bold">$49</span> |
| 94 | <span class="text-gray-500">/month</span> |
| 95 | </div> |
| 96 | <ul class="space-y-3 mb-8"> |
| 97 | <li class="flex items-center gap-2"> |
| 98 | <span class="text-green-500">✓</span> Feature one |
| 99 | </li> |
| 100 | </ul> |
| 101 | <button class="w-full py-4 bg-purple-600 text-white rounded-lg font-semibold hover:bg-purple-700 transition"> |
| 102 | Get Started |
| 103 | </button> |
| 104 | </div> |
| 105 | ``` |
| 106 | |
| 107 | --- |
| 108 | |
| 109 | ## 6. FAQ Accordion |
| 110 | |
| 111 | ```html |
| 112 | <div class="border-b border-gray-200"> |
| 113 | <button class="w-full py-6 flex justify-between items-center text-left"> |
| 114 | <span class="font-semibold text-lg">Question here?</span> |
| 115 | <span class="text-2xl">+</span> |
| 116 | </button> |
| 117 | <div class="pb-6 text-gray-600"> |
| 118 | Answer content here. |
| 119 | </div> |
| 120 | </div> |
| 121 | ``` |
| 122 | |
| 123 | --- |
| 124 | |
| 125 | ## 7. Social Proof Bar |
| 126 | |
| 127 | ```html |
| 128 | <div class="py-12 bg-gray-50"> |
| 129 | <p class="text-center text-gray-500 mb-8">Trusted by 1,000+ companies</p> |
| 130 | <div class="flex flex-wrap justify-center items-center gap-12 opacity-50"> |
| 131 | <!-- Logo images --> |
| 132 | </div> |
| 133 | </div> |
| 134 | ``` |
| 135 | |
| 136 | --- |
| 137 | |
| 138 | ## 8. Newsletter Form |
| 139 | |
| 140 | ```html |
| 141 | <div class="max-w-md mx-auto"> |
| 142 | <form class="flex gap-2"> |
| 143 | <input |
| 144 | type="email" |
| 145 | placeholder="Enter your email" |
| 146 | class="flex-1 px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-600 focus:border-transparent outline-none" |
| 147 | > |
| 148 | <button class="px-6 py-3 bg-purple-600 text-white rounded-lg font-semibold hover:bg-purple-700 transition"> |
| 149 | Subscribe |
| 150 | </button> |
| 151 | </form> |
| 152 | </div> |
| 153 | ``` |
| 154 | |
| 155 | --- |
| 156 | |
| 157 | ## 9. Responsive Navigation |
| 158 | |
| 159 | ```html |
| 160 | <nav class="fixed top-0 w-full bg-white/80 backdrop-blur-lg z-50 border-b border-gray-200"> |
| 161 | <div class="max-w-7xl mx-auto px-6 py-4 flex justify-between items-center"> |
| 162 | <a href="#" class="text-2xl font-bold">Logo</a> |
| 163 | <div class="hidden md:flex items-center gap-8"> |
| 164 | <a href="#" class="text-gray-600 hover:text-gray-900 transition">Features</a> |
| 165 | <a href="#" class="text-gray-600 hover:text-gray-900 transition">Pricing</a> |
| 166 | <a href="#" class="px-6 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700 transition">Get Started</a> |
| 167 | </div> |
| 168 | </div> |
| 169 | </nav> |
| 170 | ``` |
| 171 | |
| 172 | --- |
| 173 | |
| 174 | ## 10. Animation Classes |
| 175 | |
| 176 | ### Subtle Hover |
| 177 | |
| 178 | ```html |
| 179 | class="hover:scale-105 transition-transfo |
People who liked this also viewed
6 picksType
- find-skillsHelps users discover and install agent skills when they ask questions like "how do I do X", "find a skill for X", "is there a skill that can...", or express interest in extending capabilities. This skSkillsJul 2026
- grill-meA relentless interview to sharpen a plan or design.SkillsJul 2026
- vercel-react-best-practicesVercel's official collection of agent skillsSkillsJul 2026
- improve-codebase-architectureScan a codebase for deepening opportunities, present them as a visual HTML report, then grill through whichever one you pick.SkillsJul 2026
- setup-matt-pocock-skillsConfigure this repo for the engineering skills — set up its issue tracker, triage label vocabulary, and domain doc layout. Run once before first use of the other engineering skills.SkillsJul 2026
- triageMove issues and external PRs through a state machine of triage roles — categorise, verify, grill if needed, and write agent-ready briefs.SkillsJul 2026
