Back to the three free samples

A Hero in your existing page

This host page has its own Georgia typography, brown links and button styles. Tailwind is contained inside each iframe.

Before: your own page styles

These elements use the host stylesheet.

After: add the complete Hero file

The host button above keeps its styling. The fictional project board below is a static layout; its CTA is disabled.

Long heading and task-name example

Test your own text at your target widths. Iframe height is explicit: adjust it for your content. A smaller frame can scroll internally.

Files to upload

To use the standard Hero, upload split-hero.html alone. CSS and full MIT notices are inside. To reproduce both examples, upload split-hero.html, hero-long-text.html and hero-in-existing-page.html into the same folder.

<iframe src="./split-hero.html" title="Workspace Hero"
  style="display:block;width:100%;height:920px;border:0"></iframe>

For direct insertion into your own Tailwind 3.4 project, use the snippet and your existing CSS build instead. Adding the pack stylesheet directly includes global resets.