Headings (H1-H6)
Different heading sizes with semantic HTML
Preview
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
{ window.Prism.highlightElement($refs.codeEl) }) }"
class="w-full flex items-center justify-between px-6 py-4 text-left bg-gray-50 dark:bg-gray-900 hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors cursor-pointer">
View Code
<h1 class="text-4xl font-bold text-gray-900 dark:text-white">Heading 1</h1>
<h2 class="text-3xl font-bold text-gray-900 dark:text-white">Heading 2</h2>
<h3 class="text-2xl font-semibold text-gray-900 dark:text-white">Heading 3</h3>
<h4 class="text-xl font-semibold text-gray-900 dark:text-white">Heading 4</h4>
<h5 class="text-lg font-medium text-gray-900 dark:text-white">Heading 5</h5>
<h6 class="text-base font-medium text-gray-900 dark:text-white">Heading 6</h6>