Stepper

A stepper, in the context of user interfaces, is a graphical control element used to increment or decrement a value in a predetermined sequence.

            
<!-- step horizontal -->
<div class="relative flex flex-row justify-center gap-6">
  <!-- border -->
  <span class="top-6 sm:top-10 absolute w-full border-b-2 border-dashed border-surface-500 dark:border-surfacedark-500"></span>

  <button class="active [&.active]:bg-secondary-100 dark:[&.active]:bg-secondary-900 relative flex flex-col justify-center items-center text-center gap-1 w-12 h-12 sm:w-20 sm:h-20 rounded-full bg-surface-100 dark:bg-surfacedark-100 border-2 border-surface-500 dark:border-surfacedark-500">
    <span class="material-symbols-outlined">person</span>
    <span class="text-label-md hidden sm:inline-flex">Billing</span>
  </button>
  <button class="[&.active]:bg-secondary-100 dark:[&.active]:bg-secondary-900 relative flex flex-col justify-center items-center text-center gap-1 w-12 h-12 sm:w-20 sm:h-20 rounded-full bg-surface-100 dark:bg-surfacedark-100 border-2 border-surface-500 dark:border-surfacedark-500">
    <span class="material-symbols-outlined">local_shipping</span>
    <span class="text-label-md hidden sm:inline-flex">Shipping</span>
  </button>
  <button class="[&.active]:bg-secondary-100 dark:[&.active]:bg-secondary-900 relative flex flex-col justify-center items-center text-center gap-1 w-12 h-12 sm:w-20 sm:h-20 rounded-full bg-surface-100 dark:bg-surfacedark-100 border-2 border-surface-500 dark:border-surfacedark-500">
    <span class="material-symbols-outlined">payment</span>
    <span class="text-label-md hidden sm:inline-flex">Payment</span>
  </button>
  <button class="[&.active]:bg-secondary-100 dark:[&.active]:bg-secondary-900 relative flex flex-col justify-center items-center text-center gap-1 w-12 h-12 sm:w-20 sm:h-20 rounded-full bg-surface-100 dark:bg-surfacedark-100 border-2 border-surface-500 dark:border-surfacedark-500">
    <span class="material-symbols-outlined">visibility</span>
    <span class="text-label-md hidden sm:inline-flex">Preview</span>
  </button>
</div>

Timeline

  • Content Review and Finalization

    Review and finalize website content, ensuring accuracy and consistency

  • Testing and Quality Assurance

    Conduct thorough testing of the website, including functionality, performance, and security

  • Website Development

    Develop the website using modern web technologies and frameworks

  • Design and Content Creation

    Create content for the website, including text, images, and multimedia

  • Project Planning and Research

    Create a project plan, including timelines, milestones, and resources

              
<!-- timeline -->
<ul class="relative border-l border-gray-200 dark:border-gray-700">                  
  <li class="mb-4 ml-4">
    <div class="absolute w-3 h-3 bg-gray-200 rounded-full mt-1.5 -left-1.5 border border-white dark:border-gray-900 dark:bg-gray-700"></div>
    <time datetime="2023-06-14 20:00" class="mb-1 text-label-sm text-gray-400 dark:text-gray-500">June 2023</time>
    <h3 class="tracking-wide font-semibold">Content Review and Finalization</h3>
    <p class="text-body-md text-gray-500">Review and finalize website content, ensuring accuracy and consistency</p>
  </li>
  <li class="mb-4 ml-4">
    <div class="absolute w-3 h-3 bg-gray-200 rounded-full mt-1.5 -left-1.5 border border-white dark:border-gray-900 dark:bg-gray-700"></div>
    <time datetime="2023-05-14 20:00" class="mb-1 text-label-sm text-gray-400 dark:text-gray-500">May 2023</time>
    <h3 class="tracking-wide font-semibold">Testing and Quality Assurance</h3>
    <p class="text-body-md text-gray-500">Conduct thorough testing of the website, including functionality, performance, and security</p>
  </li>
  <li class="mb-4 ml-4">
    <div class="absolute w-3 h-3 bg-gray-200 rounded-full mt-1.5 -left-1.5 border border-white dark:border-gray-900 dark:bg-gray-700"></div>
    <time datetime="2023-04-14 20:00" class="mb-1 text-label-sm text-gray-400 dark:text-gray-500">April 2023</time>
    <h3 class="tracking-wide font-semibold">Website Development</h3>
    <p class="text-body-md text-gray-500">Develop the website using modern web technologies and frameworks</p>
  </li>
  <li class="mb-4 ml-4">
    <div class="absolute w-3 h-3 bg-gray-200 rounded-full mt-1.5 -left-1.5 border border-white dark:border-gray-900 dark:bg-gray-700"></div>
    <time datetime="2023-03-14 20:00" class="mb-1 text-label-sm text-gray-400 dark:text-gray-500">March 2023</time>
    <h3 class="tracking-wide font-semibold">Design and Content Creation</h3>
    <p class="text-body-md text-gray-500">Create content for the website, including text, images, and multimedia</p>
  </li>
  <li class="mb-4 ml-4">
    <div class="absolute w-3 h-3 bg-gray-200 rounded-full mt-1.5 -left-1.5 border border-white dark:border-gray-900 dark:bg-gray-700"></div>
    <time datetime="2023-02-14 20:00" class="mb-1 text-label-sm text-gray-400 dark:text-gray-500">February 2023</time>
    <h3 class="tracking-wide font-semibold">Project Planning and Research</h3>
    <p class="text-body-md text-gray-500">Create a project plan, including timelines, milestones, and resources</p>
  </li>
</ul>