QA & Billing Dashboard UI Component Pack

<div
  style="width: 100%; height: 100%; padding-top: 25px; padding-bottom: 1px; padding-left: 1px; padding-right: 1px; background: var(--color-white-solid, white); box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.05); border-radius: 8px; outline: 1px var(--color-grey-91, #E2E8F0) solid; outline-offset: -1px; flex-direction: column; justify-content: flex-start; align-items: center; gap: 16px; display: inline-flex">
  <div
    style="width: 1174px; flex-direction: column; justify-content: flex-start; align-items: flex-start; display: flex">
    <div
      style="justify-content: center; display: flex; flex-direction: column; color: var(--color-azure-11, #0F172A); font-size: 24px; font-family: Inter; font-weight: 600; line-height: 32px; word-wrap: break-word">
      Billing</div>
  </div>
  <div
    style="align-self: stretch; padding-top: 17px; padding-bottom: 16px; padding-left: 20px; padding-right: 20px; border-top: 1px var(--color-grey-91, #E2E8F0) solid; flex-direction: column; justify-content: flex-start; align-items: flex-start; display: flex">
    <div
      style="align-self: stretch; height: 426px; position: relative; border-bottom: 1px var(--color-grey-91, #E2E8F0) solid">
      <div
        style="width: 1174px; left: 0px; top: 0px; position: absolute; justify-content: flex-start; align-items: flex-start; gap: 8px; display: inline-flex">
        <div style="width: 86.58px; height: 37px; position: relative">
          <div data-:hover="false" data-variant="15"
            style="padding-top: 8px; padding-bottom: 10px; padding-left: 12px; padding-right: 12px; left: 0px; top: 0px; position: absolute; border-bottom: 2px #0D9488 solid; flex-direction: column; justify-content: center; align-items: center; display: inline-flex">
            <div
              style="text-align: center; justify-content: center; display: flex; flex-direction: column; color: var(--color-azure-11, #0F172A); font-size: 14px; font-family: Inter; font-weight: 400; line-height: 20px; word-wrap: break-word">
              Overview</div>
          </div>
        </div>
        <div style="width: 143.33px; height: 37px; position: relative">
          <div data-:hover="false" data-variant="14"
            style="padding-top: 8px; padding-bottom: 10px; padding-left: 12px; padding-right: 12px; left: 0px; top: 0px; position: absolute; flex-direction: column; justify-content: center; align-items: center; display: inline-flex">
            <div
              style="text-align: center; justify-content: center; display: flex; flex-direction: column; color: var(--color-azure-35, #475569); font-size: 14px; font-family: Inter; font-weight: 400; line-height: 20px; word-wrap: break-word">
              Payment methods</div>
          </div>
        </div>
        <div style="width: 112.78px; height: 37px; position: relative">
          <div data-:hover="false" data-variant="14"
            style="padding-top: 8px; padding-bottom: 10px; padding-left: 12px; padding-right: 12px; left: 0px; top: 0px; position: absolute; flex-direction: column; justify-content: center; align-items: center; display: inline-flex">
            <div
              style="text-align: center; justify-content: center; display: flex; flex-direction: column; color: var(--color-azure-35, #475569); font-size: 14px; font-family: Inter; font-weight: 400; line-height: 20px; word-wrap: break-word">
              Billing history</div>
          </div>
        </div>
        <div style="width: 104.11px; height: 37px; position: relative">
          <div data-:hover="false" data-variant="14"
            style="padding-top: 8px; padding-bottom: 10px; padding-left: 12px; padding-right: 12px; left: 0px; top: 0px; position: absolute; flex-direction: column; justify-content: center; align-items: center; display: inline-flex">
            <div
              style="text-align: center; justify-content: center; display: flex; flex-direction: column; color: var(--color-azure-35, #475569); font-size: 14px; font-family: Inter; font-weight: 400; line-height: 20px; word-wrap: break-word">
              Preferences</div>
          </div>
        </div>
      </div>
      <div
        style="width: 1174px; left: 0px; top: 53px; position: absolute; flex-direction: column; justify-content: flex-start; align-items: flex-start; gap: 16px; display: inline-flex">
        <div style="align-self: stretch; justify-content: space-between; align-items: center; display: inline-flex">
          <div style="width: 93.56px; height: 76px; position: relative">
            <div
              style="width: 93.56px; left: 0px; top: 0px; position: absolute; flex-direction: column; justify-content: flex-start; align-items: flex-start; display: inline-flex">
              <div
                style="justify-content: center; display: flex; flex-direction: column; color: var(--color-azure-11, #0F172A); font-size: 14px; font-family: Inter; font-weight: 500; line-height: 20px; word-wrap: break-word">
                Free trial</div>
            </div>
            <div
              style="width: 93.56px; left: 0px; top: 28px; position: absolute; flex-direction: column; justify-content: flex-start; align-items: flex-start; display: inline-flex">
              <div
                style="justify-content: center; display: flex; flex-direction: column; color: var(--color-azure-47, #64748B); font-size: 12px; font-family: Inter; font-weight: 400; line-height: 16px; word-wrap: break-word">
                Credit remaining</div>
            </div>
            <div
              style="width: 93.56px; left: 0px; top: 44px; position: absolute; flex-direction: column; justify-content: flex-start; align-items: flex-start; display: inline-flex">
              <div
                style="justify-content: center; display: flex; flex-direction: column; color: var(--color-azure-11, #0F172A); font-size: 24px; font-family: Inter; font-weight: 600; line-height: 32px; word-wrap: break-word">
                $0.00</div>
            </div>
          </div>
          <div style="justify-content: flex-start; align-items: center; gap: 8px; display: flex">
            <div data-:hover="false" data-variant="17"
              style="padding-left: 12px; padding-right: 12px; padding-top: 8px; padding-bottom: 8px; background: #0D9488; border-radius: 6px; justify-content: flex-start; align-items: center; gap: 8px; display: flex">
              <div data-variant="74" style="width: 16px; height: 16px; position: relative"></div>
              <div
                style="text-align: center; justify-content: center; display: flex; flex-direction: column; color: var(--color-white-solid, white); font-size: 14px; font-family: Inter; font-weight: 500; line-height: 20px; word-wrap: break-word">
                Add payment method</div>
            </div>
            <div data-:hover="false" data-variant="16"
              style="padding-left: 13px; padding-right: 13px; padding-top: 9px; padding-bottom: 9px; background: white; border-radius: 6px; outline: 1px #E2E8F0 solid; outline-offset: -1px; flex-direction: column; justify-content: center; align-items: center; display: inline-flex">
              <div
                style="text-align: center; justify-content: center; display: flex; flex-direction: column; color: var(--color-azure-27, #334155); font-size: 14px; font-family: Inter; font-weight: 500; line-height: 20px; word-wrap: break-word">
                View usage</div>
            </div>
          </div>
        </div>
        <div
          style="align-self: stretch; padding-left: 13px; padding-right: 13px; padding-top: 9px; padding-bottom: 9px; background: var(--color-grey-98, #F8FAFC); border-radius: 6px; outline: 1px var(--color-grey-91, #E2E8F0) solid; outline-offset: -1px; justify-content: flex-start; align-items: center; gap: 8px; display: inline-flex">
          <div data-variant="75" style="width: 16px; height: 16px; position: relative">
            <div
              style="width: 13.33px; height: 13.33px; left: 1.33px; top: 1.33px; position: absolute; outline: 1px var(--color-azure-47, #64748B) solid; outline-offset: -0.50px">
            </div>
          </div>
          <div
            style="flex-direction: column; justify-content: flex-start; align-items: flex-start; display: inline-flex">
            <div
              style="justify-content: center; display: flex; flex-direction: column; color: var(--color-azure-35, #475569); font-size: 12px; font-family: Inter; font-weight: 400; line-height: 16px; word-wrap: break-word">
              Note: This does not reflect the status of your developer account.</div>
          </div>
        </div>
        <div style="align-self: stretch; height: 246px; position: relative">
          <div
            style="width: 579px; padding: 17px; left: 0px; top: 0px; position: absolute; background: var(--color-white-solid, white); border-radius: 6px; outline: 1px var(--color-grey-91, #E2E8F0) solid; outline-offset: -1px; justify-content: flex-start; align-items: flex-start; gap: 12px; display: inline-flex">
            <div
              style="width: 32px; height: 32px; background: var(--color-grey-96, #F1F5F9); border-radius: 4px; justify-content: center; align-items: center; display: flex">
              <div data-variant="76" style="width: 16px; height: 16px; position: relative">
                <div
                  style="width: 13.33px; height: 9.33px; left: 1.33px; top: 3.33px; position: absolute; outline: 1px var(--color-azure-27, #334155) solid; outline-offset: -0.50px">
                </div>
              </div>
            </div>
            <div
              style="flex-direction: column; justify-content: flex-start; align-items: flex-start; display: inline-flex">
              <div
                style="align-self: stretch; flex-direction: column; justify-content: flex-start; align-items: flex-start; display: flex">
                <div
                  style="justify-content: center; display: flex; flex-direction: column; color: var(--color-azure-11, #0F172A); font-size: 14px; font-family: Inter; font-weight: 500; line-height: 20px; word-wrap: break-word">
                  Payment methods</div>
              </div>
              <div
                style="align-self: stretch; flex-direction: column; justify-content: flex-start; align-items: flex-start; display: flex">
                <div
                  style="justify-content: center; display: flex; flex-direction: column; color: var(--color-azure-47, #64748B); font-size: 12px; font-family: Inter; font-weight: 400; line-height: 16px; word-wrap: break-word">
                  Add or change payment method</div>
              </div>
            </div>
          </div>
          <div
            style="width: 579px; padding: 17px; left: 595px; top: 0px; position: absolute; background: var(--color-white-solid, white); border-radius: 6px; outline: 1px var(--color-grey-91, #E2E8F0) solid; outline-offset: -1px; justify-content: flex-start; align-items: flex-start; gap: 12px; display: inline-flex">
            <div
              style="width: 32px; height: 32px; background: var(--color-grey-96, #F1F5F9); border-radius: 4px; justify-content: center; align-items: center; display: flex">
              <div data-variant="77" style="width: 16px; height: 16px; position: relative">
                <div
                  style="width: 10.67px; height: 13.33px; left: 2.67px; top: 1.33px; position: absolute; outline: 1px var(--color-azure-27, #334155) solid; outline-offset: -0.50px">
                </div>
                <div
                  style="width: 4px; height: 4px; left: 9.33px; top: 1.33px; position: absolute; outline: 1px var(--color-azure-27, #334155) solid; outline-offset: -0.50px">
                </div>
              </div>
            </div>
            <div
              style="flex-direction: column; justify-content: flex-start; align-items: flex-start; display: inline-flex">
              <div
                style="align-self: stretch; flex-direction: column; justify-content: flex-start; align-items: flex-start; display: flex">
                <div
                  style="justify-content: center; display: flex; flex-direction: column; color: var(--color-azure-11, #0F172A); font-size: 14px; font-family: Inter; font-weight: 500; line-height: 20px; word-wrap: break-word">
                  Billing history</div>
              </div>
              <div
                style="align-self: stretch; flex-direction: column; justify-content: flex-start; align-items: flex-start; display: flex">
                <div
                  style="justify-content: center; display: flex; flex-direction: column; color: var(--color-azure-47, #64748B); font-size: 12px; font-family: Inter; font-weight: 400; line-height: 16px; word-wrap: break-word">
                  View past and current invoices</div>
              </div>
            </div>
          </div>
          <div
            style="width: 579px; padding: 17px; left: 0px; top: 86px; position: absolute; background: var(--color-white-solid, white); border-radius: 6px; outline: 1px var(--color-grey-91, #E2E8F0) solid; outline-offset: -1px; justify-content: flex-start; align-items: flex-start; gap: 12px; display: inline-flex">
            <div
              style="width: 32px; height: 32px; background: var(--color-grey-96, #F1F5F9); border-radius: 4px; justify-content: center; align-items: center; display: flex">
              <div data-variant="78" style="width: 16px; height: 16px; position: relative">
                <div
                  style="width: 11.94px; height: 13.31px; left: 2.03px; top: 1.35px; position: absolute; outline: 1px var(--color-azure-27, #334155) solid; outline-offset: -0.50px">
                </div>
                <div
                  style="width: 4px; height: 4px; left: 6px; top: 6px; position: absolute; outline: 1px var(--color-azure-27, #334155) solid; outline-offset: -0.50px">
                </div>
              </div>
            </div>
            <div
              style="flex-direction: column; justify-content: flex-start; align-items: flex-start; display: inline-flex">
              <div
                style="align-self: stretch; flex-direction: column; justify-content: flex-start; align-items: flex-start; display: flex">
                <div
                  style="justify-content: center; display: flex; flex-direction: column; color: var(--color-azure-11, #0F172A); font-size: 14px; font-family: Inter; font-weight: 500; line-height: 20px; word-wrap: break-word">
                  Preferences</div>
              </div>
              <div
                style="align-self: stretch; flex-direction: column; justify-content: flex-start; align-items: flex-start; display: flex">
                <div
                  style="justify-content: center; display: flex; flex-direction: column; color: var(--color-azure-47, #64748B); font-size: 12px; font-family: Inter; font-weight: 400; line-height: 16px; word-wrap: break-word">
                  Manage billing information</div>
              </div>
            </div>
          </div>
          <div
            style="width: 579px; padding: 17px; left: 595px; top: 86px; position: absolute; background: var(--color-white-solid, white); border-radius: 6px; outline: 1px var(--color-grey-91, #E2E8F0) solid; outline-offset: -1px; justify-content: flex-start; align-items: flex-start; gap: 12px; display: inline-flex">
            <div
              style="width: 32px; height: 32px; background: var(--color-grey-96, #F1F5F9); border-radius: 4px; justify-content: center; align-items: center; display: flex">
              <div data-variant="79" style="width: 16px; height: 16px; position: relative"></div>
            </div>
            <div
              style="flex-direction: column; justify-content: flex-start; align-items: flex-start; display: inline-flex">
              <div
                style="align-self: stretch; flex-direction: column; justify-content: flex-start; align-items: flex-start; display: flex">
                <div
                  style="justify-content: center; display: flex; flex-direction: column; color: var(--color-azure-11, #0F172A); font-size: 14px; font-family: Inter; font-weight: 500; line-height: 20px; word-wrap: break-word">
                  Usage limits</div>
              </div>
              <div
                style="align-self: stretch; flex-direction: column; justify-content: flex-start; align-items: flex-start; display: flex">
                <div
                  style="justify-content: center; display: flex; flex-direction: column; color: var(--color-azure-47, #64748B); font-size: 12px; font-family: Inter; font-weight: 400; line-height: 16px; word-wrap: break-word">
                  Set monthly spend limits</div>
              </div>
            </div>
          </div>
          <div
            style="width: 579px; padding: 17px; left: 0px; top: 172px; position: absolute; background: var(--color-white-solid, white); border-radius: 6px; outline: 1px var(--color-grey-91, #E2E8F0) solid; outline-offset: -1px; justify-content: flex-start; align-items: flex-start; gap: 12px; display: inline-flex">
            <div
              style="width: 32px; height: 32px; background: var(--color-grey-96, #F1F5F9); border-radius: 4px; justify-content: center; align-items: center; display: flex">
              <div data-variant="80" style="width: 16px; height: 16px; position: relative">
                <div
                  style="width: 13.33px; height: 8px; left: 1.33px; top: 4px; position: absolute; outline: 1px var(--color-azure-27, #334155) solid; outline-offset: -0.50px">
                </div>
                <div
                  style="width: 2.67px; height: 2.67px; left: 6.67px; top: 6.67px; position: absolute; outline: 1px var(--color-azure-27, #334155) solid; outline-offset: -0.50px">
                </div>
              </div>
            </div>
            <div
              style="flex-direction: column; justify-content: flex-start; align-items: flex-start; display: inline-flex">
              <div
                style="align-self: stretch; flex-direction: column; justify-content: flex-start; align-items: flex-start; display: flex">
                <div
                  style="justify-content: center; display: flex; flex-direction: column; color: var(--color-azure-11, #0F172A); font-size: 14px; font-family: Inter; font-weight: 500; line-height: 20px; word-wrap: break-word">
                  Pricing</div>
              </div>
              <div
                style="align-self: stretch; flex-direction: column; justify-content: flex-start; align-items: flex-start; display: flex">
                <div
                  style="justify-content: center; display: flex; flex-direction: column; color: var(--color-azure-47, #64748B); font-size: 12px; font-family: Inter; font-weight: 400; line-height: 16px; word-wrap: break-word">
                  View pricing and FAQs</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>