Browse 5 ready-made Tailwind CSS content components from the Nigodo UI library. Every variant is fully responsive – copy the code or customize it in the visual editor and export clean code.
<section class="py-26 bg-white">
<div class="container px-4 mx-auto">
<div class="max-w-4xl mx-auto mb-12 text-center">
<p class="text-xl font-bold text-gray-400 mb-2">John Doe • 19 Jan 2022</p>
<h1 class="text-3xl md:text-4xl font-extrabold font-heading mb-4">Lorem ipsum dolor sit amet</h1>
<p class="text-xl font-extrabold leading-8 mb-6">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<span class="inline-flex h-6 items-center justify-center text-xs font-extrabold px-2 text-indigo-900 rounded border border-indigo-900 bg-green-200 uppercase">Technology</span>
</div>
<img class="block w-full mb-12 h-112 lg:h-140 object-cover border-3 border-indigo-900 rounded-2xl shadow-lg" src="https://images.unsplash.com/photo-1486312338219-ce68d2c6f44d?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2072&q=80" alt="">
<div class="max-w-4xl mx-auto">
<p class="text-xl font-extrabold leading-7 pb-12 mb-12 border-b-3 border-indigo-900">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ullamcorper mattis lorem non. Ultrices praesent amet ipsum justo massa. Eu dolor aliquet risus gravida nunc at feugiat consequat purus. Non massa enim vitae duis mattis. Vel in ultricies vel fringilla.</p>
<h3 class="text-2xl font-extrabold mb-4">Header 1</h3>
<p class="text-xl font-extrabold leading-7 mb-10">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ullamcorper mattis lorem non. Ultrices praesent amet ipsum justo massa. Eu dolor aliquet risus gravida nunc at feugiat consequat purus. Non massa enim vitae duis mattis. Vel in ultricies vel fringilla.</p>
<div class="mb-10 p-8 border-l-3 border-indigo-500">
<p class="text-2xl font-extrabold leading-8 mb-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ullamcorper mattis lorem non. Ultrices praesent amet ipsum justo massa. Eu dolor aliquet risus gravida nunc at feugiat consequat purus.</p>
<span class="text-xl text-gray-400 font-extrabold leading-7">— John Doe, CEO & Founder</span>
</div>
<p class="text-xl font-extrabold leading-7 mb-12">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ullamcorper mattis lorem non. Ultrices praesent amet ipsum justo massa. Eu dolor aliquet risus gravida nunc at feugiat consequat purus. Non massa enim vitae duis mattis. Vel in ultricies vel fringilla.</p>
<img class="block mb-6 w-full h-112 object-cover border-3 border-indigo-900 rounded-2xl shadow-lg" src="https://images.unsplash.com/photo-1486312338219-ce68d2c6f44d?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2072&q=80" alt="">
<p class="text-xl font-extrabold text-gray-400 mb-8">Non massa enim vitae duis mattis. Vel in ultricies vel fringilla.</p>
<h3 class="text-2xl font-extrabold mb-4">Header 1</h3>
<p class="text-xl font-extrabold leading-7 mb-10">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ullamcorper mattis lorem non. Ultrices praesent amet ipsum justo massa. Eu dolor aliquet risus gravida nunc at feugiat consequat purus. Non massa enim vitae duis mattis. Vel in ultricies vel fringilla.</p>
<p class="text-xl font-extrabold leading-7 mb-10">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ullamcorper mattis lorem non. Ultrices praesent amet ipsum justo massa. Eu dolor aliquet risus gravida nunc at feugiat consequat purus. Non massa enim vitae duis mattis. Vel in ultricies vel fringilla.</p>
<p class="text-xl font-extrabold leading-7 mb-10">Sagittis et eu at elementum, quis in. Proin praesent volutpat egestas sociis sit lorem nunc nunc sit. Eget diam curabitur mi ac. Auctor rutrum lacus malesuada massa ornare et. Vulputate consectetur ac ultrices at diam dui eget fringilla tincidunt. Arcu sit dignissim massa erat cursus vulputate gravida id. Sed quis auctor vulputate hac elementum gravida cursus dis.</p>
Get the code for 13,400+ components
Create a free account to copy production-ready code from every component in the library.
Free account · No credit card · No password needed
Blog Article Layout with Hero Image, Pull Quote, and Share Footer
A long-form article template showing a centered header with date, title, subtitle, and category tag, followed by full-width and inline images, body paragraphs, section headers, a blockquote with attribution, a numbered list, and a Copy Link button with social icons at the bottom.
Blog article layout with hero image, pull quote, and share footer
A long-form blog article page showing a centered header with date, title, subtitle, and category tag, followed by a hero photo, body text sections, a blockquote attributed to an author, a repeated image with caption, and a footer with a Copy Link button and social icons. Content is arranged in a single centered column with a dark navy and pink accent palette.
Switch the editor to Grid and every page of your project appears side by side on one canvas. Arrange them freely, zoom in and out, and add as many new pages as you need in a few clicks.
The AI Agent just got a lot more powerful
Describe what you need in one chat and the Agent does the rest: it adds new sections, edits copy and styles, moves blocks around or removes them across your whole page. No modes, no switching, just tell it what to change.
Multi-AI Designer can now regenerate designs
Not quite there yet? Ask for tweaks like missing assets, your logo or other details, and regenerate the design without starting from scratch.