Playground

Try Apex utilities directly in your browser. Edit the HTML and see the result instantly.

Pro Tip

Press Tab to indent and Shift+Tab to outdent. Use the examples below to get started quickly.

Examples:

HTML653 chars

PreviewLive

Hello Apex!

Try editing the HTML above to experiment with Apex utilities.

Generated Code

HTML

<div class="min-h-[200px] p-8 flex flex-col items-center justify-center gap-4 bg-gradient-to-br from-primary to-secondary rounded-xl">
  <h1 class="text-3xl font-bold text-white">Hello Apex!</h1>
  <p class="text-white/80 text-center max-w-md">
    Try editing the HTML above to experiment with Apex utilities.
  </p>
  <div class="flex gap-2 mt-4">
    <button class="px-4 py-2 bg-white text-primary rounded-lg font-medium hover:bg-white/90 transition-colors">
      Get Started
    </button>
    <button class="px-4 py-2 bg-white/20 text-white rounded-lg font-medium hover:bg-white/30 transition-colors">
      Learn More
    </button>
  </div>
</div>