tabler/preview/pages/playground.html

---
layout: default
permalink: playground.html 
---

<div class="container-xl">
      <div class="page-header d-print-none mb-4">
        <div class="row align-items-center">
          <div class="col">
            <div class="page-pretitle"></div>
            <div class="d-flex align-items-center">
              <img
                src="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/chips-b5dF2YPuqsOD3mhXWZ7cLs6YW8B5QM.png"
                alt="Tabler Logo"
                class="h-8 me-2" 
              />
              <h2 class="page-title">tabler</h2>
            </div>
          </div>
        </div>
      </div>

      <div class="row row-deck row-cards">
        <div class="col-sm-6 col-lg-6">
          <div class="card">
            <div class="card-body">
              <div class="d-flex align-items-center">
                <div class="subheader">Sales</div>
                <div class="ms-auto lh-1">
                  <div class="text-success d-inline-flex align-items-center lh-1">
                    1%{" "}
                    <svg
                      xmlns="http://www.w3.org/2000/svg"
                      class="icon ms-1"
                      width="24"
                      height="24"
                      viewBox="0 0 24 24"
                      strokeWidth="2"
                      stroke="currentColor"
                      fill="none"
                      strokeLinecap="round"
                      strokeLinejoin="round"
                    >
                      <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                      <path d="M3 17l6 -6l4 4l8 -8" />
                      <path d="M14 7l7 0l0 7" />
                    </svg>
                  </div>
                </div>
              </div>
              <div class="d-flex align-items-baseline">
                <div class="h1 mb-0 me-2">132</div>
                <div class="me-auto">
                  <span class="text-muted">12 waiting payments</span>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="col-sm-6 col-lg-6">
          <div class="card">
            <div class="card-body">
              <div class="d-flex align-items-center">
                <div class="subheader">Orders</div>
                <div class="ms-auto lh-1">
                  <div class="text-muted d-inline-flex align-items-center lh-1">
                    0% <span class="ms-1">─</span>
                  </div>
                </div>
              </div>
              <div class="d-flex align-items-baseline">
                <div class="h1 mb-0 me-2">78</div>
                <div class="me-auto">
                  <span class="text-muted">32 shipped</span>
                </div>
              </div>
            </div> 
          </div>
        </div>
        <div class="col-sm-6 col-lg-6">
          <div class="card">
            <div class="card-body">
              <div class="d-flex align-items-center">
                <div class="subheader">Shares</div>
                <div class="ms-auto lh-1">
                  <div class="text-danger d-inline-flex align-items-center lh-1">
                    4%{" "}
                    <svg
                      xmlns="http://www.w3.org/2000/svg"
                      class="icon ms-1"
                      width="24"
                      height="24"
                      viewBox="0 0 24 24"
                      strokeWidth="2"
                      stroke="currentColor"
                      fill="none"
                      strokeLinecap="round"
                      strokeLinejoin="round"
                    >
                      <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                      <path d="M3 7l6 6l4 -4l8 8" />
                      <path d="M14 17l7 0l0 -7" />
                    </svg>
                  </div>
                </div>
              </div>
              <div class="d-flex align-items-baseline">
                <div class="h1 mb-0 me-2">623</div>
                <div class="me-auto">
                  <span class="text-muted">16 today</span>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="col-sm-6 col-lg-6">
          <div class="card">
            <div class="card-body">
              <div class="d-flex align-items-center">
                <div class="subheader">Likes</div>
                <div class="ms-auto lh-1">
                  <div class="text-success d-inline-flex align-items-center lh-1">
                    8%{" "}
                    <svg
                      xmlns="http://www.w3.org/2000/svg"
                      class="icon ms-1"
                      width="24"
                      height="24"
                      viewBox="0 0 24 24"
                      strokeWidth="2"
                      stroke="currentColor"
                      fill="none"
                      strokeLinecap="round"
                      strokeLinejoin="round"
                    >
                      <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                      <path d="M3 17l6 -6l4 4l8 -8" />
                      <path d="M14 7l7 0l0 7" />
                    </svg>
                  </div>
                </div>
              </div>
              <div class="d-flex align-items-baseline">
                <div class="h1 mb-0 me-2">132</div>
                <div class="me-auto">
                  <span class="text-muted">21 today</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>