VibeCoderzVibeCoderz
Telegram
All Prompts
Responsive FAQ Grid Section with Tailwind CSS preview
faqsectiontailwindresponsivegridcontentsaas

Responsive FAQ Grid Section with Tailwind CSS

Адаптивная FAQ секция с Tailwind CSS. Двухколоночная сетка вопросов и ответов в карточках. Темная тема. Идеально для лендингов SaaS.

Prompt

<div class="text-center mt-16">
      <h3 class="text-2xl font-medium text-white mb-8">Frequently Asked Questions</h3>
      <div class="grid md:grid-cols-2 gap-8 max-w-4xl mx-auto">
        <div class="text-left p-6 bg-zinc-900/30 rounded-xl border border-white/10">
          <h4 class="text-lg font-medium text-white mb-3">Can I change plans anytime?</h4>
          <p class="text-gray-400">Yes, you can upgrade or downgrade your plan at any time. Changes take effect immediately with prorated billing.</p>
        </div>
        <div class="text-left p-6 bg-zinc-900/30 rounded-xl border border-white/10">
          <h4 class="text-lg font-medium text-white mb-3">Is there a free trial?</h4>
          <p class="text-gray-400">We offer a 14-day free trial for the Professional plan with full access to all features.</p>
        </div>
        <div class="text-left p-6 bg-zinc-900/30 rounded-xl border border-white/10">
          <h4 class="text-lg font-medium text-white mb-3">What's included in support?</h4>
          <p class="text-gray-400">All plans include comprehensive documentation, community forums, and our knowledge base. Higher tiers include priority support.</p>
        </div>
        <div class="text-left p-6 bg-zinc-900/30 rounded-xl border border-white/10">
          <h4 class="text-lg font-medium text-white mb-3">Do you offer custom pricing?</h4>
          <p class="text-gray-400">Yes, we work with large organizations to create custom pricing plans that fit specific needs and usage patterns.</p>
        </div>
      </div>
    </div>
All Prompts