HTML
Tailwind Two-Column Content Block
A responsive layout that stacks on mobile and splits into two columns on larger screens. Good for “feature + screenshot” sections.
Usage notes
Drop this into any page where you want copy on one side and an image or code block on the other.
Copy this snippet into your project
Use the full version for learning, or copy it without comments when you just want the bare code.
<section class="py-10">
<div class="mx-auto max-w-5xl px-4 sm:px-6 lg:px-8">
<div class="grid gap-8 md:grid-cols-2 md:items-center">
<div class="space-y-3">
<p class="text-xs uppercase tracking-wide text-slate-500">Feature</p>
<h2 class="text-2xl font-semibold text-slate-50">Explain the benefit, not just the feature.</h2>
<p class="text-sm text-slate-400">
Use this block to walk through a single idea with a clear headline, supporting copy and a visual alongside it.
</p>
<ul class="mt-2 list-disc list-inside text-xs text-slate-400 space-y-1">
<li>Short, readable bullet points.</li>
<li>Good for landing page sections.</li>
<li>Easy to duplicate for multiple features.</li>
</ul>
</div>
<div class="rounded-2xl border border-slate-800 bg-slate-950/80 p-4">
<!-- Replace this with an image, chart or screenshot -->
<div class="aspect-video rounded-xl bg-gradient-to-br from-sky-500/20 via-slate-900 to-emerald-500/20"></div>
</div>
</div>
</div>
</section>
Tags
#tailwind
#layout
#columns
#responsive