Playground

Test BismillahCSS components and utility classes in real-time

HTML Editor

<div class="b-container b-mx-auto b-p-4">
<h1 class="b-text-3xl b-font-bold b-mb-4">BismillahCSS Playground</h1>

<div class="b-flex b-flex-col b-gap-4 md:b-flex-row">
  <div class="b-card b-p-6 b-rounded-lg b-border b-shadow-md b-flex-1">
    <h2 class="b-text-xl b-font-semibold b-mb-2">Card Example</h2>
    <p class="b-text-muted">
      This is a simple card component built with BismillahCSS utility classes.
    </p>
    <div class="b-mt-4">
      <button class="b-btn b-btn-primary b-rounded b-px-4 b-py-2">
        Click me
      </button>
    </div>
  </div>
  
  <div class="b-card b-p-6 b-rounded-lg b-border b-shadow-md b-flex-1">
    <h2 class="b-text-xl b-font-semibold b-mb-2">Try it yourself</h2>
    <p class="b-text-muted">
      Edit the code on the left to see changes reflected in the preview.
    </p>
    <div class="b-mt-4 b-flex b-gap-2">
      <button class="b-btn b-btn-outline b-rounded b-px-4 b-py-2">
        Cancel
      </button>
      <button class="b-btn b-btn-primary b-rounded b-px-4 b-py-2">
        Save
      </button>
    </div>
  </div>
</div>
</div>