<div class="row g-0">
  <div class="col-6 sm:col-4 lg:col-3">
    <div class="p-4 flex flex-center bg-primary  false h-45">
      <pre class="text-center"><code class="text-white">.bg-primary  </code><br/><code class="text-white mt-2 dark:hidden">#3874ff</code></pre>
    </div>
  </div>
  <div class="col-6 sm:col-4 lg:col-3">
    <div class="p-4 flex flex-center bg-secondary  false h-45">
      <pre class="text-center"><code class="text-white">.bg-secondary  </code><br/><code class="text-white mt-2 dark:hidden">#49525d</code></pre>
    </div>
  </div>
  <div class="col-6 sm:col-4 lg:col-3">
    <div class="p-4 flex flex-center bg-success  false h-45">
      <pre class="text-center"><code class="text-white">.bg-success  </code><br/><code class="text-white mt-2 dark:hidden">#25b003</code></pre>
    </div>
  </div>
  <div class="col-6 sm:col-4 lg:col-3">
    <div class="p-4 flex flex-center bg-info  false h-45">
      <pre class="text-center"><code class="text-white">.bg-info  </code><br/><code class="text-white mt-2 dark:hidden">#0097eb</code></pre>
    </div>
  </div>
  <div class="col-6 sm:col-4 lg:col-3">
    <div class="p-4 flex flex-center bg-warning  false h-45">
      <pre class="text-center"><code class="text-white">.bg-warning  </code><br/><code class="text-white mt-2 dark:hidden">#e5780b</code></pre>
    </div>
  </div>
  <div class="col-6 sm:col-4 lg:col-3">
    <div class="p-4 flex flex-center bg-danger  false h-45">
      <pre class="text-center"><code class="text-white">.bg-danger  </code><br/><code class="text-white mt-2 dark:hidden">#ec1f00</code></pre>
    </div>
  </div>
</div>

<div class="row g-0">
  <div class="col-6 sm:col-4 lg:col-3">
    <div class="p-4 bg-body h-45"><code class="text-body">.bg-body</code></div>
  </div>
  <div class="col-6 sm:col-4 lg:col-3">
    <div class="p-4 bg-body-highlight h-45"><code class="text-body">.bg-body-highlight</code></div>
  </div>
  <div class="col-6 sm:col-4 lg:col-3">
    <div class="p-4 bg-body-secondary h-45"><code class="text-body">.bg-body-secondary</code></div>
  </div>
  <div class="col-6 sm:col-4 lg:col-3">
    <div class="p-4 bg-body-tertiary h-45"><code class="text-body">.bg-body-tertiary</code></div>
  </div>
  <div class="col-6 sm:col-4 lg:col-3">
    <div class="p-4 bg-body-quaternary h-45"><code class="text-body">.bg-body-quaternary</code></div>
  </div>
</div>

<div class="row g-0">
  <div class="col-6 sm:col-4 lg:col-3">
    <div class="p-4 bg-primary-subtle h-45"><code class="text-primary-emphasis">.text-primary-emphasis</code><br /><code class="text-primary-emphasis">.bg-primary-subtle</code></div>
  </div>
  <div class="col-6 sm:col-4 lg:col-3">
    <div class="p-4 bg-secondary-subtle h-45"><code class="text-secondary-emphasis">.text-secondary-emphasis</code><br /><code class="text-secondary-emphasis">.bg-secondary-subtle</code></div>
  </div>
  <div class="col-6 sm:col-4 lg:col-3">
    <div class="p-4 bg-success-subtle h-45"><code class="text-success-emphasis">.text-success-emphasis</code><br /><code class="text-success-emphasis">.bg-success-subtle</code></div>
  </div>
  <div class="col-6 sm:col-4 lg:col-3">
    <div class="p-4 bg-info-subtle h-45"><code class="text-info-emphasis">.text-info-emphasis</code><br /><code class="text-info-emphasis">.bg-info-subtle</code></div>
  </div>
  <div class="col-6 sm:col-4 lg:col-3">
    <div class="p-4 bg-warning-subtle h-45"><code class="text-warning-emphasis">.text-warning-emphasis</code><br /><code class="text-warning-emphasis">.bg-warning-subtle</code></div>
  </div>
  <div class="col-6 sm:col-4 lg:col-3">
    <div class="p-4 bg-danger-subtle h-45"><code class="text-danger-emphasis">.text-danger-emphasis</code><br /><code class="text-danger-emphasis">.bg-danger-subtle</code></div>
  </div>
</div>

<div class="row g-0">
  <div class="col-6 sm:col-4 lg:col-3">
    <div class="p-4 flex flex-center bg-gray-1100  false h-45">
      <pre class="text-center"><code class="text-gray-100">.bg-gray-1100  </code><br/><code class="text-gray-100 mt-2 dark:hidden">#15181b</code></pre>
    </div>
  </div>
  <div class="col-6 sm:col-4 lg:col-3">
    <div class="p-4 flex flex-center bg-gray-1000  false h-45">
      <pre class="text-center"><code class="text-gray-100">.bg-gray-1000  </code><br/><code class="text-gray-100 mt-2 dark:hidden">#2b3036</code></pre>
    </div>
  </div>
  <div class="col-6 sm:col-4 lg:col-3">
    <div class="p-4 flex flex-center bg-gray-900  false h-45">
      <pre class="text-center"><code class="text-gray-100">.bg-gray-900  </code><br/><code class="text-gray-100 mt-2 dark:hidden">#49525d</code></pre>
    </div>
  </div>
  <div class="col-6 sm:col-4 lg:col-3">
    <div class="p-4 flex flex-center bg-gray-800  false h-45">
      <pre class="text-center"><code class="text-gray-100">.bg-gray-800  </code><br/><code class="text-gray-100 mt-2 dark:hidden">#5a6573</code></pre>
    </div>
  </div>
  <div class="col-6 sm:col-4 lg:col-3">
    <div class="p-4 flex flex-center bg-gray-700  false h-45">
      <pre class="text-center"><code class="text-gray-100">.bg-gray-700  </code><br/><code class="text-gray-100 mt-2 dark:hidden">#6d7a8a</code></pre>
    </div>
  </div>
  <div class="col-6 sm:col-4 lg:col-3">
    <div class="p-4 flex flex-center bg-gray-600  false h-45">
      <pre class="text-center"><code class="text-gray-100">.bg-gray-600  </code><br/><code class="text-gray-100 mt-2 dark:hidden">#84909e</code></pre>
    </div>
  </div>
  <div class="col-6 sm:col-4 lg:col-3">
    <div class="p-4 flex flex-center bg-gray-500  false h-45">
      <pre class="text-center"><code class="text-gray-100">.bg-gray-500  </code><br/><code class="text-gray-100 mt-2 dark:hidden">#9aa3af</code></pre>
    </div>
  </div>
  <div class="col-6 sm:col-4 lg:col-3">
    <div class="p-4 flex flex-center bg-gray-400  false h-45">
      <pre class="text-center"><code class="text-gray-100">.bg-gray-400  </code><br/><code class="text-gray-100 mt-2 dark:hidden">#b1b9c2</code></pre>
    </div>
  </div>
  <div class="col-6 sm:col-4 lg:col-3">
    <div class="p-4 flex flex-center bg-gray-300  false h-45">
      <pre class="text-center"><code class="text-body-emphasis">.bg-gray-300  </code><br/><code class="text-body-emphasis mt-2 dark:hidden">#e2e5e9</code></pre>
    </div>
  </div>
  <div class="col-6 sm:col-4 lg:col-3">
    <div class="p-4 flex flex-center bg-gray-200  border h-45">
      <pre class="text-center"><code class="text-body-emphasis">.bg-gray-200  </code><br/><code class="text-body-emphasis mt-2 dark:hidden">#f1f2f4</code></pre>
    </div>
  </div>
  <div class="col-6 sm:col-4 lg:col-3">
    <div class="p-4 flex flex-center bg-gray-100  border h-45">
      <pre class="text-center"><code class="text-body-emphasis">.bg-gray-100  </code><br/><code class="text-body-emphasis mt-2 dark:hidden">#f6f7f8</code></pre>
    </div>
  </div>
</div>