ctasBeginner

CTA — Dark Inline

Dark-mode inline CTA with headline + button.

Live preview

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 CTA with Tailwind: gray-900 background, headline on the left and primary button on the right.

Code

html

<!--
  Source: Mert Cukuren (Tailblocks)
  https://github.com/mertJF/tailblocks/blob/master/src/blocks/cta/dark/a.js
  License: MIT
  Surfaced via https://vibedex.io/components/tailblocks-cta-dark-a
-->
<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">
        <div class="lg:w-2/3 flex flex-col sm:flex-row sm:items-center items-start mx-auto">
          <h1 class="flex-grow sm:pr-16 text-2xl font-medium title-font text-white">Honest writing, honest design. We pasted in a draft of our roadmap and it felt like the components were already part of the plan.</h1>
          <button class="flex-shrink-0 text-white bg-indigo-500 border-0 py-2 px-8 focus:outline-none hover:bg-indigo-600 rounded text-lg mt-10 sm:mt-0">
            Button
          </button>
        </div>
      </div>
    </section>
  </div>
</div>