<div>
        <h3 class="heading heading-xl">This is extra large heading</h3>
        <h3 class="heading heading-lg">This is large heading</h3>
        <h3 class="heading heading-md">This is medium heading</h3>
        <h3 class="heading heading-sm">This is small heading</h3>
        <h3 class="heading heading-xs">This is extra small heading</h3>
    </div>

    <div>
        <p class="text text-xl">This para has extra large text</p>
        <p class="text text-lg">This para has large text</p>
        <p class="text text-md">This para has medium text</p>
        <p class="text text-sm">This para has small text</p>
        <p class="text text-xs">This para has extra small text</p>
    </div>

    <div>
        <p class="gray-text">this is gray text</p>
    </div>