VibeCoderzVibeCoderz
Telegram
All Prompts
FAQ Section with Contact Support Button preview
faqsectiontailwindresponsivectasupportcardui

FAQ Section with Contact Support Button

Двухколоночный блок FAQ с кнопкой поддержки. Карточки с вопросами и ответами, адаптивный дизайн, Tailwind CSS. Для лендингов, сайтов продуктов, дашбордов.

Prompt

<div class="ring-1 ring-white/10 md:p-10 bg-slate-900 rounded-3xl px-6 py-6 w-full max-w-5xl">
  <div class="grid lg:grid-cols-2 gap-10">
    <div class="">
      <h2 class="text-3xl sm:text-4xl tracking-tight text-white font-instrument-serif font-normal">Frequently asked
        questions</h2>
      <p class="mt-4 text-slate-300 text-base font-sans">
        Can't find the answer you're looking for? Reach out to our support team.
      </p>
      <button class="mt-6 inline-flex items-center gap-2 text-sm text-slate-200 hover:text-white transition font-sans">
            Contact support
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="h-4 w-4"><path d="M5 12h14"></path><path d="m12 5 7 7-7 7"></path></svg>
          </button>
    </div>

    <!-- FAQ List -->
    <div class="space-y-6">
      <div class="rounded-2xl bg-slate-800 ring-1 ring-white/10 p-5">
        <h3 class="text-sm font-medium text-white font-sans mb-2">How does the free trial work?</h3>
        <p class="text-sm text-slate-400 font-sans">
          Start with our Pro plan free for 14 days. No credit card required. You can invite your team and access all Pro
          features during the trial period.
        </p>
      </div>

      <div class="rounded-2xl bg-slate-800 ring-1 ring-white/10 p-5">
        <h3 class="text-sm font-medium text-white font-sans mb-2">Can I change plans at any time?</h3>
        <p class="text-sm text-slate-400 font-sans">
          Yes, you can upgrade or downgrade your plan at any time. Changes take effect immediately, and we'll prorate
          your billing accordingly.
        </p>
      </div>

      <div class="rounded-2xl bg-slate-800 ring-1 ring-white/10 p-5">
        <h3 class="text-sm font-medium text-white font-sans mb-2">What integrations are available?</h3>
        <p class="text-sm text-slate-400 font-sans">
          We integrate with GitHub, GitLab, Slack, Figma, and 50+ other tools. Our API allows for custom integrations
          for Enterprise customers.
        </p>
      </div>






    </div>
  </div>
</div>
All Prompts