ctasBeginner
CTA — Dark Centered
Dark-mode centered CTA with subhead and dual buttons.
Claude prompt
Drop this into Claude Code, claude.ai, or your AI tool of choice to regenerate or remix this component from scratch.
Build a dark centered CTA with Tailwind: gray-900 background, headline, supporting line, and two buttons (primary + outline).
Code
html
<!--
Source: Mert Cukuren (Tailblocks)
https://github.com/mertJF/tailblocks/blob/master/src/blocks/cta/dark/b.js
License: MIT
Surfaced via https://vibedex.io/components/tailblocks-cta-dark-b
-->
<div class="bg-gray-900 text-gray-300 min-h-screen flex items-center justify-center">
<div class="w-full">
<section class="text-gray-400 bg-gray-900 body-font">
<div class="container px-5 py-24 mx-auto flex flex-wrap items-center">
<div class="lg:w-3/5 md:w-1/2 md:pr-16 lg:pr-0 pr-0">
<h1 class="title-font font-medium text-3xl text-white">Not every component library is built for real product work — this one is. We've shipped to production with zero regrets.</h1>
<p class="leading-relaxed mt-4">
Poke slow-carb mixtape knausgaard, typewriter street art gentrify
hammock starladder roathse. Craies vegan tousled etsy austin.
</p>
</div>
<div class="lg:w-2/6 md:w-1/2 bg-gray-800 bg-opacity-50 rounded-lg p-8 flex flex-col md:ml-auto w-full mt-10 md:mt-0">
<h2 class="text-white text-lg font-medium title-font mb-5">
Sign Up
</h2>
<div class="relative mb-4">
<label
htmlFor="full-name"
class="leading-7 text-sm text-gray-400"
>
Full Name
</label>
<input
type="text"
id="full-name"
name="full-name"
class="w-full bg-gray-600 bg-opacity-20 focus:bg-transparent focus:ring-2 focus:ring-indigo-900 rounded border border-gray-600 focus:border-indigo-500 text-base outline-none text-gray-100 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out"
/>
</div>
<div class="relative mb-4">
<label
htmlFor="email"
class="leading-7 text-sm text-gray-400"
>
Email
</label>
<input
type="email"
id="email"
name="email"
class="w-full bg-gray-600 bg-opacity-20 focus:bg-transparent focus:ring-2 focus:ring-indigo-900 rounded border border-gray-600 focus:border-indigo-500 text-base outline-none text-gray-100 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out"
/>
</div>
<button class="text-white bg-indigo-500 border-0 py-2 px-8 focus:outline-none hover:bg-indigo-600 rounded text-lg">
Button
</button>
<p class="text-xs mt-3">
Literally you probably haven't heard of them jean shorts.
</p>
</div>
</div>
</section>
</div>
</div>