VibeCoderzVibeCoderz
Telegram
All Prompts
Responsive Hero Section with Dual CTA Buttons preview
herobannerctatailwindresponsivelanding-pageheading

Responsive Hero Section with Dual CTA Buttons

Адаптивный Hero-баннер с заголовком, подзаголовком и двумя CTA-кнопками на Tailwind CSS. Идеален для лендингов и запусков продуктов.

Prompt

<div class="max-w-7xl md:px-8 md:pt-12 md:pb-40 mt-[50px] mr-auto mb-20 ml-auto pt-6 pr-6 pb-28 pl-6">
          <div class="relative grid place-items-center">
            <!-- Central visual -->
            

            <!-- Brand title -->
            <h1 class="md:mt-10 text-[14vw] leading-none md:text-[8rem] select-none font-semibold text-white/95 tracking-tight mt-8">
              EXO<span class="text-cyan-400">9</span>
            </h1>
            <p class="mt-4 max-w-xl text-center text-base md:text-lg text-white/70">
              A next‑gen science hall where deep space meets design. Explore, learn, and experience the cosmos in immersive ways.
            </p>

            <!-- CTA -->
            <div class="mt-6 flex items-center gap-3">
              <a href="#" class="inline-flex items-center gap-2 rounded-xl px-5 py-3 bg-white text-slate-900 hover:bg-white/90 transition font-medium">
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="ticket" class="lucide lucide-ticket w-5 h-5"><path d="M2 9a3 3 0 0 1 0 6v2a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-2a3 3 0 0 1 0-6V7a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2Z" class=""></path><path d="M13 5v2" class=""></path><path d="M13 17v2" class=""></path><path d="M13 11v2" class=""></path></svg>
                <span class="">Plan your visit</span>
              </a>
              <a href="#" class="inline-flex items-center gap-2 hover:bg-white/10 transition font-medium text-white bg-white/5 border-white/10 border rounded-xl pt-3 pr-5 pb-3 pl-5 backdrop-blur-lg">
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="play-circle" class="lucide lucide-play-circle w-5 h-5 text-white/80"><path d="M9 9.003a1 1 0 0 1 1.517-.859l4.997 2.997a1 1 0 0 1 0 1.718l-4.997 2.997A1 1 0 0 1 9 14.996z" class=""></path><circle cx="12" cy="12" r="10" class=""></circle></svg>
                <span class="">Preview the Dome</span>
              </a>
            </div>
          </div>
        </div>
All Prompts