Split With Mockup
Headline and copy on the left with a product mockup panel on the right.
Headline and copy on the left with a product mockup panel on the right.
The source for every block is part of All Access. One purchase unlocks the entire library, today and in the future.
The source for every block is part of All Access. One purchase unlocks the entire library, today and in the future.
A two column hero for daisyUI and Tailwind CSS that puts your message and a product visual side by side. Copy sits on the left with a headline, paragraph, a primary button and an outline button, while a framed mockup panel fills the right half.
The right side uses the shared Placeholder component inside a rounded-box border border-base-300 frame. Replace it with your own screenshot or an <img> tag and the aspect ratio holds the layout steady. The grid keeps the columns vertically centered, so a taller image stays balanced against the text.
On smaller viewports the mockup drops below the copy and both columns go full width, keeping the headline first in reading order on every device.