Formatting - HTML Macro

<div class="relative flex flex-col justify-center overflow-hidden bg-gray-50 py-3 sm:py-6">
<div class="absolute inset-0 bg-[url(/img/grid.svg)] bg-center [mask-image:linear-gradient(180deg,white,rgba(255,255,255,0))]"></div>
<div class="relative bg-white px-6 pb-8 shadow-xl ring-1 ring-gray-900/5 sm:mx-auto sm:max-w-lg sm:rounded-lg sm:px-10">
  <div class="mx-auto max-w-md">
    <div class="divide-y divide-gray-300/50">
      <div class="space-y-6 py-8 text-base leading-7 text-gray-600">
        <h2 class="text-lg">Tailwind makes styling easy 🚀</h2>
        <ul class="space-y-4">
          <li class="flex items-center">
            <svg class="h-6 w-6 flex-none fill-sky-100 stroke-sky-500 stroke-2" stroke-linecap="round" stroke-linejoin="round">
              <circle cx="12" cy="12" r="11" />
              <path d="m8 13 2.165 2.165a1 1 0 0 0 1.521-.126L16 9" fill="none" />
            </svg>
            <p class="ml-4">
              Capable allows you to insert HTML with rich styling
            </p>
          </li>
          <li class="flex items-center">
            <svg class="h-6 w-6 flex-none fill-sky-100 stroke-sky-500 stroke-2" stroke-linecap="round" stroke-linejoin="round">
              <circle cx="12" cy="12" r="11" />
              <path d="m8 13 2.165 2.165a1 1 0 0 0 1.521-.126L16 9" fill="none" />
            </svg>
            <p class="ml-4">
              Add colors, gradients, shadows etc.
            </p>
          </li>
          <li class="flex items-center">
            <svg class="h-6 w-6 flex-none fill-sky-100 stroke-sky-500 stroke-2" stroke-linecap="round" stroke-linejoin="round">
              <circle cx="12" cy="12" r="11" />
              <path d="m8 13 2.165 2.165a1 1 0 0 0 1.521-.126L16 9" fill="none" />
            </svg>
            <p class="ml-4">Get started today!</p>
          </li>
        </ul>
        <p>Perfect for learning how the framework works, prototyping a new idea, or creating a demo to share online.</p>
      </div>
      <div class="pt-8 text-base font-semibold leading-7">
        <p class="text-gray-900">Want to dig deeper into Tailwind?</p>
        <p>
          <a href="https://tailwindcss.com/docs" class="text-sky-500 hover:text-sky-600">Read the docs &rarr;</a>
        </p>
      </div>
    </div>
  </div>
</div>
</div>

Confluence Client

Tailwind makes styling easy 🚀

Capable allows you to insert HTML with rich styling

Add colors, gradients, shadows etc.

Get started today!

Perfect for learning how the framework works, prototyping a new idea, or creating a demo to share online.

Edit - HTML - Intercom Article Making - Confluence

Tailwind makes styling easy 🚀

Capable allows you to insert HTML with rich styling

Add colors, gradients, shadows etc.

Get started today!

Perfect for learning how the framework works, prototyping a new idea, or creating a demo to share online.

Want to dig deeper into Tailwind?

Read the docs →