heroBeginner
Hero — Centered Content
Centered text-heavy content section that doubles as a hero.
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 centered hero with Tailwind: a heading, a paragraph, and a CTA — pure typography, no imagery. Used as an alternative hero for editorial sites.
Code
html
<!--
Source: Mert Cukuren (Tailblocks)
https://github.com/mertJF/tailblocks/blob/master/src/blocks/content/light/a.js
License: MIT
Surfaced via https://vibedex-ryan-staxs-projects-fb4e0931.vercel.app/components/tailblocks-content-light-a-hero
-->
<div class="bg-white text-gray-900 min-h-screen flex items-center justify-center">
<div class="w-full">
<section class="text-gray-600 body-font">
<div class="container px-5 py-24 mx-auto">
<div class="flex flex-col text-center w-full mb-20">
<h2 class="text-xs text-indigo-500 tracking-widest font-medium title-font mb-1">
ROOF PARTY POLAROID
</h2>
<h1 class="sm:text-3xl text-2xl font-medium title-font mb-4 text-gray-900">
Master Cleanse Reliac Heirloom
</h1>
<p class="lg:w-2/3 mx-auto leading-relaxed text-base">
Whatever cardigan tote bag tumblr hexagon brooklyn asymmetrical
gentrify, subway tile poke farm-to-table. Franzen you probably
haven't heard of them man bun deep jianbing selfies heirloom
prism food truck ugh squid celiac humblebrag.
</p>
</div>
<div class="flex flex-wrap">
<div class="xl:w-1/4 lg:w-1/2 md:w-full px-8 py-6 border-l-2 border-gray-200 border-opacity-60">
<h2 class="text-lg sm:text-xl text-gray-900 font-medium title-font mb-2">
Shooting Stars
</h2>
<p class="leading-relaxed text-base mb-4">
Fingerstache flexitarian street art 8-bit waistcoat. Distillery
hexagon disrupt edison bulbche.
</p>
<a class="text-indigo-500 inline-flex items-center">
Learn More
<svg
fill="none"
stroke="currentColor"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2"
class="w-4 h-4 ml-2"
viewBox="0 0 24 24"
>
<path d="M5 12h14M12 5l7 7-7 7" />
</svg>
</a>
</div>
<div class="xl:w-1/4 lg:w-1/2 md:w-full px-8 py-6 border-l-2 border-gray-200 border-opacity-60">
<h2 class="text-lg sm:text-xl text-gray-900 font-medium title-font mb-2">
The Catalyzer
</h2>
<p class="leading-relaxed text-base mb-4">
Fingerstache flexitarian street art 8-bit waistcoat. Distillery
hexagon disrupt edison bulbche.
</p>
<a class="text-indigo-500 inline-flex items-center">
Learn More
<svg
fill="none"
stroke="currentColor"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2"
class="w-4 h-4 ml-2"
viewBox="0 0 24 24"
>
<path d="M5 12h14M12 5l7 7-7 7" />
</svg>
</a>
</div>
<div class="xl:w-1/4 lg:w-1/2 md:w-full px-8 py-6 border-l-2 border-gray-200 border-opacity-60">
<h2 class="text-lg sm:text-xl text-gray-900 font-medium title-font mb-2">
Neptune
</h2>
<p class="leading-relaxed text-base mb-4">
Fingerstache flexitarian street art 8-bit waistcoat. Distillery
hexagon disrupt edison bulbche.
</p>
<a class="text-indigo-500 inline-flex items-center">
Learn More
<svg
fill="none"
stroke="currentColor"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2"
class="w-4 h-4 ml-2"
viewBox="0 0 24 24"
>
<path d="M5 12h14M12 5l7 7-7 7" />
</svg>
</a>
</div>
<div class="xl:w-1/4 lg:w-1/2 md:w-full px-8 py-6 border-l-2 border-gray-200 border-opacity-60">
<h2 class="text-lg sm:text-xl text-gray-900 font-medium title-font mb-2">
Melanchole
</h2>
<p class="leading-relaxed text-base mb-4">
Fingerstache flexitarian street art 8-bit waistcoat. Distillery
hexagon disrupt edison bulbche.
</p>
<a class="text-indigo-500 inline-flex items-center">
Learn More
<svg
fill="none"
stroke="currentColor"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2"
class="w-4 h-4 ml-2"
viewBox="0 0 24 24"
>
<path d="M5 12h14M12 5l7 7-7 7" />
</svg>
</a>
</div>
</div>
<button class="flex mx-auto mt-16 text-white bg-indigo-500 border-0 py-2 px-8 focus:outline-none hover:bg-indigo-600 rounded text-lg">
Button
</button>
</div>
</section>
</div>
</div>