#_ oxbow ui

emptyStates #01

With add button

1 
<div class="relative px-8 py-12 mx-auto md:px-12 lg:px-24 max-w-7xl">
  <div class="text-center lg:text-balance max-w-2xl mx-auto">
    <h3 class="text-base leading-normal text-base-900 font-medium">
      Begin by crafting your first survey question
    </h3>
    <p class="text-sm leading-normal mt-2 text-base-500 font-medium">
      Add a question to your survey that participants will see as they begin.
    </p>
    <ul
      class="mt-4 text-sm text-base-500 flex flex-col md:flex-row gap-4 justify-center"
    >
      <li class="flex gap-2 items-center">
        <svg
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
          stroke-width="2"
          stroke-linecap="round"
          stroke-linejoin="round"
          class="icon icon-tabler icons-tabler-outline icon-tabler-circle-check size-4"
          slot="icon"
        >
          <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
          <path
            d="M17 3.34a10 10 0 1 1 -14.995 8.984l-.005 -.324l.005 -.324a10 10 0 0 1 14.995 -8.336zm-1.293 5.953a1 1 0 0 0 -1.32 -.083l-.094 .083l-3.293 3.292l-1.293 -1.292l-.094 -.083a1 1 0 0 0 -1.403 1.403l.083 .094l2 2l.094 .083a1 1 0 0 0 1.226 0l.094 -.083l4 -4l.083 -.094a1 1 0 0 0 -.083 -1.32z"
            stroke-width="0"
            fill="currentColor"
          ></path>
        </svg>
        <p class="text-sm leading-normal text-base-500 font-medium">
          Age group
        </p>
      </li>
      <li class="flex gap-2 items-center">
        <svg
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
          stroke-width="2"
          stroke-linecap="round"
          stroke-linejoin="round"
          class="icon icon-tabler icons-tabler-outline icon-tabler-circle-check size-4"
          slot="icon"
        >
          <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
          <path
            d="M17 3.34a10 10 0 1 1 -14.995 8.984l-.005 -.324l.005 -.324a10 10 0 0 1 14.995 -8.336zm-1.293 5.953a1 1 0 0 0 -1.32 -.083l-.094 .083l-3.293 3.292l-1.293 -1.292l-.094 -.083a1 1 0 0 0 -1.403 1.403l.083 .094l2 2l.094 .083a1 1 0 0 0 1.226 0l.094 -.083l4 -4l.083 -.094a1 1 0 0 0 -.083 -1.32z"
            stroke-width="0"
            fill="currentColor"
          ></path>
        </svg>
        <p class="text-sm leading-normal text-base-500 font-medium">
          Primary interests
        </p>
      </li>
      <li class="flex gap-2 items-center">
        <svg
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
          stroke-width="2"
          stroke-linecap="round"
          stroke-linejoin="round"
          class="icon icon-tabler icons-tabler-outline icon-tabler-circle-check size-4"
          slot="icon"
        >
          <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
          <path
            d="M17 3.34a10 10 0 1 1 -14.995 8.984l-.005 -.324l.005 -.324a10 10 0 0 1 14.995 -8.336zm-1.293 5.953a1 1 0 0 0 -1.32 -.083l-.094 .083l-3.293 3.292l-1.293 -1.292l-.094 -.083a1 1 0 0 0 -1.403 1.403l.083 .094l2 2l.094 .083a1 1 0 0 0 1.226 0l.094 -.083l4 -4l.083 -.094a1 1 0 0 0 -.083 -1.32z"
            stroke-width="0"
            fill="currentColor"
          ></path>
        </svg>
        <p class="text-sm leading-normal text-base-500 font-medium">Location</p>
      </li>
    </ul>
    <button
      class="flex transition text-center justify-center font-medium items-center duration-500 ease-in-out transition-colors focus:outline-2 focus:outline-offset-2 text-white bg-accent-600 hover:bg-accent-700 focus:outline-accent-600 h-9 px-4 py-2 text-sm font-medium rounded-md gap-2 mt-8 mx-auto"
    >
      <svg
        xmlns="http://www.w3.org/2000/svg"
        viewBox="0 0 24 24"
        fill="none"
        stroke="currentColor"
        stroke-width="2"
        stroke-linecap="round"
        stroke-linejoin="round"
        class="icon icon-tabler icons-tabler-outline icon-tabler-plus size-4"
        slot="left-icon"
      >
        <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
        <path d="M12 5l0 14"></path>
        <path d="M5 12l14 0"></path>
      </svg>
      Add a new question
    </button>
  </div>
</div>