# Custom HTML

Use raw HTML with Tailwind classes for advanced card layouts. Add `dark:` variants for dark mode.

## Example

```html
<div class="p-4 bg-yellow-100 dark:bg-yellow-800
  rounded-lg border-l-4 border-yellow-500
  text-yellow-700 dark:text-yellow-100">
  <strong>Note:</strong> Something important.
</div>
```

Renders as a small yellow callout box that flips palette in dark mode.

## What's allowed

Most semantic HTML and Tailwind utility classes pass through the sanitizer. What gets stripped:

- `<script>` tags and event handlers (`onclick`, `onload`, …)
- `javascript:` URLs
- A handful of attributes that are common XSS vectors

If you need interactive behavior, use one of the supported [widgets](/resources/widgets) instead of raw scripts.