Buttons

<button class="btn text-black"> Basic Button </button> <button class="btn bg-yellow-500"> Primary Button </button> <button class="btn bg-red-700"> Destructive Button </button> <button disabled class="btn"> Inactive Button </button> <button class="btn text-black text-pretty"> Icon button <i><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon" class="size-6"> <path fill-rule="evenodd" d="M12.97 3.97a.75.75 0 0 1 1.06 0l7.5 7.5a.75.75 0 0 1 0 1.06l-7.5 7.5a.75.75 0 1 1-1.06-1.06l6.22-6.22H3a.75.75 0 0 1 0-1.5h16.19l-6.22-6.22a.75.75 0 0 1 0-1.06Z" clip-rule="evenodd"></path></svg></i> </button>

Headings

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6
<h1 class="text-5xl font-extrabold">Heading 1</h1> <h2 class="text-4xl font-bold">Heading 2</h2> <h3 class="text-3xl font-bold">Heading 3</h3> <h4 class="text-2xl font-bold">Heading 4</h4> <h5 class="text-xl font-bold">Heading 5</h5> <h6 class="text-lg font-bold">Heading 6</h6>