Tailwind CSS Timeline

<ol class="border-s border-neutral-300 dark:border-neutral-500">
  <!--First item-->
  <li>
    <div class="flex-start flex items-center pt-3">
      <div
        class="-ms-[5px] me-3 h-[9px] w-[9px] rounded-full bg-neutral-300 dark:bg-neutral-500"></div>
      <p class="text-sm text-neutral-500 dark:text-neutral-300">
        01.07.2021
      </p>
    </div>
    <div class="mb-6 ms-4 mt-2">
      <h4 class="mb-1.5 text-xl font-semibold">Title of section 1</h4>
      <p class="mb-3 text-neutral-500 dark:text-neutral-300">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque
        scelerisque diam non nisi semper, et elementum lorem ornare.
        Maecenas placerat facilisis mollis. Duis sagittis ligula in
        sodales vehicula.
      </p>
    </div>
  </li>

  <!--Second item-->
  <li>
    <div class="flex-start flex items-center pt-2">
      <div
        class="-ms-[5px] me-3 h-[9px] w-[9px] rounded-full bg-neutral-300 dark:bg-neutral-500"></div>
      <p class="text-sm text-neutral-500 dark:text-neutral-300">
        13.09.2021
      </p>
    </div>
    <div class="mb-6 ms-4 mt-2">
      <h4 class="mb-1.5 text-xl font-semibold">Title of section 2</h4>
      <p class="mb-3 text-neutral-500 dark:text-neutral-300">
        Libero expedita explicabo eius fugiat quia aspernatur autem
        laudantium error architecto recusandae natus sapiente sit nam
        eaque, consectetur porro molestiae ipsam an deleniti.
      </p>
    </div>
  </li>

  <!--Third item-->
  <li>
    <div class="flex-start flex items-center pt-2">
      <div
        class="-ms-[5px] me-3 h-[9px] w-[9px] rounded-full bg-neutral-300 dark:bg-neutral-500"></div>
      <p class="text-sm text-neutral-500 dark:text-neutral-300">
        25.11.2021
      </p>
    </div>
    <div class="ms-4 mt-2 pb-5">
      <h4 class="mb-1.5 text-xl font-semibold">Title of section 3</h4>
      <p class="mb-3 text-neutral-500 dark:text-neutral-300">
        Voluptatibus temporibus esse illum eum aspernatur, fugiat suscipit
        natus! Eum corporis illum nihil officiis tempore. Excepturi illo
        natus libero sit doloremque, laborum molestias rerum pariatur quam
        ipsam necessitatibus incidunt, explicabo.
      </p>
    </div>
  </li>
</ol>

<ol
  class="border-s border-neutral-300 dark:border-neutral-500 md:flex md:justify-center md:gap-6 md:border-s-0 md:border-t">
  <!--First item-->
  <li>
    <div class="flex-start flex items-center pt-2 md:block md:pt-0">
      <div
        class="-ms-[5px] me-3 h-[9px] w-[9px] rounded-full bg-neutral-300 dark:bg-neutral-500 md:-mt-[5px] md:me-0 md:ms-0"></div>
      <p class="mt-2 text-sm text-neutral-500 dark:text-neutral-300">
        01.07.2021
      </p>
    </div>
    <div class="ms-4 mt-2 pb-5 md:ms-0">
      <h4 class="mb-1.5 text-xl font-semibold">Title of section 1</h4>
      <p class="mb-3 text-neutral-500 dark:text-neutral-300">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque
        scelerisque diam non nisi semper, et elementum lorem ornare.
        Maecenas placerat facilisis mollis. Duis sagittis ligula in
        sodales vehicula.
      </p>
    </div>
  </li>

  <!--Second item-->
  <li>
    <div class="flex-start flex items-center pt-2 md:block md:pt-0">
      <div
        class="-ms-[5px] me-3 h-[9px] w-[9px] rounded-full bg-neutral-300 dark:bg-neutral-500 md:-mt-[5px] md:me-0 md:ms-0"></div>
      <p class="mt-2 text-sm text-neutral-500 dark:text-neutral-300">
        13.09.2021
      </p>
    </div>
    <div class="ms-4 mt-2 pb-5 md:ms-0">
      <h4 class="mb-1.5 text-xl font-semibold">Title of section 2</h4>
      <p class="mb-3 text-neutral-500 dark:text-neutral-300">
        Libero expedita explicabo eius fugiat quia aspernatur autem
        laudantium error architecto recusandae natus sapiente sit nam
        eaque, consectetur porro molestiae ipsam an deleniti.
      </p>
    </div>
  </li>

  <!--Third item-->
  <li>
    <div class="flex-start flex items-center pt-2 md:block md:pt-0">
      <div
        class="-ms-[5px] me-3 h-[9px] w-[9px] rounded-full bg-neutral-300 dark:bg-neutral-500 md:-mt-[5px] md:me-0 md:ms-0"></div>
      <p class="mt-2 text-sm text-neutral-500 dark:text-neutral-300">
        25.11.2021
      </p>
    </div>
    <div class="ms-4 mt-2 pb-5 md:ms-0">
      <h4 class="mb-1.5 text-xl font-semibold">Title of section 3</h4>
      <p class="mb-3 text-neutral-500 dark:text-neutral-300">
        Voluptatibus temporibus esse illum eum aspernatur, fugiat suscipit
        natus! Eum corporis illum nihil officiis tempore. Excepturi illo
        natus libero sit doloremque, laborum molestias rerum pariatur quam
        ipsam necessitatibus incidunt, explicabo.
      </p>
    </div>
  </li>
</ol>

<ol class="border-s-2 border-primary dark:border-primary-500">
  <!--First item-->
  <li>
    <div class="flex-start flex items-center">
      <div
        class="-ms-[9px] -mt-2 me-3 flex h-4 w-4 items-center justify-center rounded-full bg-primary dark:bg-primary-500"></div>
      <h4 class="-mt-2 text-xl font-semibold">Title of section 1</h4>
    </div>
    <div class="mb-6 ms-6 pb-6">
      <a
        href="#!"
        class="text-sm text-primary transition duration-150 ease-in-out hover:text-primary-600 focus:text-primary-600 active:text-primary-700 dark:text-primary-400 dark:hover:text-primary-500 dark:focus:text-primary-500 dark:active:text-primary-600"
        >4 February, 2022</a
      >
      <p class="mb-4 mt-2 text-neutral-600 dark:text-neutral-300">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
        eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
        enim ad minim veniam, quis nostrud exercitation ullamco laboris
        nisi ut aliquip ex ea commodo consequat.
      </p>
      <button
        type="button"
        class="inline-block rounded bg-primary px-4 pb-[5px] pt-[6px] text-xs font-medium uppercase leading-normal text-white shadow-[0_4px_9px_-4px_#3b71ca] transition duration-150 ease-in-out hover:bg-primary-600 hover:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] focus:bg-primary-600 focus:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] focus:outline-none focus:ring-0 active:bg-primary-700 active:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] dark:shadow-[0_4px_9px_-4px_rgba(59,113,202,0.5)] dark:hover:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)] dark:focus:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)] dark:active:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)]"
        data-twe-ripple-init
        data-twe-ripple-color="light">
        Read more
      </button>
    </div>
  </li>

  <!--Second item-->
  <li>
    <div class="flex-start flex items-center">
      <div
        class="-ms-[9px] -mt-2 me-3 flex h-4 w-4 items-center justify-center rounded-full bg-primary dark:bg-primary-500"></div>
      <h4 class="-mt-2 text-xl font-semibold">Title of section 2</h4>
    </div>
    <div class="mb-6 ms-6 pb-6">
      <a
        href="#!"
        class="text-sm text-primary transition duration-150 ease-in-out hover:text-primary-600 focus:text-primary-600 active:text-primary-700 dark:text-primary-400 dark:hover:text-primary-500 dark:focus:text-primary-500 dark:active:text-primary-600"
        >12 January, 2022</a
      >
      <p class="mb-4 mt-2 text-neutral-600 dark:text-neutral-200">
        Sed ut perspiciatis unde omnis iste natus error sit voluptatem
        accusantium doloremque laudantium, totam rem aperiam, eaque ipsa
        quae ab illo inventore veritatis et quasi architecto beatae vitae
        dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit
        aspernatur aut odit aut fugit, sed quia consequuntur magni dolores
        eos qui ratione voluptatem sequi nesciunt.
      </p>
      <button
        type="button"
        class="inline-block rounded bg-primary px-4 pb-[5px] pt-[6px] text-xs font-medium uppercase leading-normal text-white shadow-[0_4px_9px_-4px_#3b71ca] transition duration-150 ease-in-out hover:bg-primary-600 hover:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] focus:bg-primary-600 focus:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] focus:outline-none focus:ring-0 active:bg-primary-700 active:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] dark:shadow-[0_4px_9px_-4px_rgba(59,113,202,0.5)] dark:hover:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)] dark:focus:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)] dark:active:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)]"
        data-twe-ripple-init
        data-twe-ripple-color="light">
        Read more
      </button>
    </div>
  </li>

  <!--Third item-->
  <li>
    <div class="flex-start flex items-center">
      <div
        class="-ms-[9px] -mt-2 me-3 flex h-4 w-4 items-center justify-center rounded-full bg-primary dark:bg-primary-500"></div>
      <h4 class="-mt-2 text-xl font-semibold">Title of section 3</h4>
    </div>
    <div class="mb-6 ms-6 pb-6">
      <a
        href="#!"
        class="text-sm text-primary transition duration-150 ease-in-out hover:text-primary-600 focus:text-primary-600 active:text-primary-700 dark:text-primary-400 dark:hover:text-primary-500 dark:focus:text-primary-500 dark:active:text-primary-600"
        >27 December, 2021</a
      >
      <p class="mb-4 mt-2 text-neutral-600 dark:text-neutral-200">
        At vero eos et accusamus et iusto odio dignissimos ducimus qui
        blanditiis praesentium voluptatum deleniti atque corrupti quos
        dolores et quas molestias excepturi sint occaecati cupiditate non
        provident, similique sunt in culpa qui officia deserunt mollitia
        animi, id est laborum et dolorum fuga. Et harum quidem rerum
        facilis est et expedita distinctio.
      </p>
      <button
        type="button"
        class="inline-block rounded bg-primary px-4 pb-[5px] pt-[6px] text-xs font-medium uppercase leading-normal text-white shadow-[0_4px_9px_-4px_#3b71ca] transition duration-150 ease-in-out hover:bg-primary-600 hover:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] focus:bg-primary-600 focus:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] focus:outline-none focus:ring-0 active:bg-primary-700 active:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] dark:shadow-[0_4px_9px_-4px_rgba(59,113,202,0.5)] dark:hover:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)] dark:focus:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)] dark:active:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)]"
        data-twe-ripple-init
        data-twe-ripple-color="light">
        Read more
      </button>
    </div>
  </li>
</ol>

// Initialization for ES Users
import {
  Ripple,
  initTWE,
} from "tw-elements";

initTWE({ Ripple });

<h3
  class="mb-6 ms-3 text-2xl font-bold text-neutral-700 dark:text-neutral-300">
  Latest News
</h3>

<ol class="border-s-2 border-info-100">
  <!--First item-->
  <li>
    <div class="flex-start md:flex">
      <div
        class="-ms-[13px] flex h-[25px] w-[25px] items-center justify-center rounded-full bg-info-100 text-info-700">
        <svg
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 24 24"
          fill="currentColor"
          class="h-4 w-4">
          <path
            fill-rule="evenodd"
            d="M6.75 2.25A.75.75 0 017.5 3v1.5h9V3A.75.75 0 0118 3v1.5h.75a3 3 0 013 3v11.25a3 3 0 01-3 3H5.25a3 3 0 01-3-3V7.5a3 3 0 013-3H6V3a.75.75 0 01.75-.75zm13.5 9a1.5 1.5 0 00-1.5-1.5H5.25a1.5 1.5 0 00-1.5 1.5v7.5a1.5 1.5 0 001.5 1.5h13.5a1.5 1.5 0 001.5-1.5v-7.5z"
            clip-rule="evenodd" />
        </svg>
      </div>
      <div
        class="mb-10 ms-6 block max-w-md rounded-lg bg-neutral-50 p-6 shadow-md shadow-black/5 dark:bg-neutral-700 dark:shadow-black/10">
        <div class="mb-4 flex justify-between">
          <a
            href="#!"
            class="text-sm text-info transition duration-150 ease-in-out hover:text-info-600 focus:text-info-600 active:text-info-700"
            >New Web Design</a
          >
          <a
            href="#!"
            class="text-sm text-info transition duration-150 ease-in-out hover:text-info-600 focus:text-info-600 active:text-info-700"
            >04 / 02 / 2022</a
          >
        </div>
        <p class="mb-6 text-neutral-700 dark:text-neutral-200">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque
          scelerisque diam non nisi semper, et elementum lorem ornare.
          Maecenas placerat facilisis mollis. Duis sagittis ligula in
          sodales vehicula.
        </p>
        <button
          type="button"
          class="inline-block rounded bg-info px-4 pb-[5px] pt-[6px] text-xs font-medium uppercase leading-normal text-white shadow-[0_4px_9px_-4px_#54b4d3] transition duration-150 ease-in-out hover:bg-info-600 hover:shadow-[0_8px_9px_-4px_rgba(84,180,211,0.3),0_4px_18px_0_rgba(84,180,211,0.2)] focus:bg-info-600 focus:shadow-[0_8px_9px_-4px_rgba(84,180,211,0.3),0_4px_18px_0_rgba(84,180,211,0.2)] focus:outline-none focus:ring-0 active:bg-info-700 active:shadow-[0_8px_9px_-4px_rgba(84,180,211,0.3),0_4px_18px_0_rgba(84,180,211,0.2)] dark:shadow-[0_4px_9px_-4px_rgba(84,180,211,0.5)] dark:hover:shadow-[0_8px_9px_-4px_rgba(84,180,211,0.2),0_4px_18px_0_rgba(84,180,211,0.1)] dark:focus:shadow-[0_8px_9px_-4px_rgba(84,180,211,0.2),0_4px_18px_0_rgba(84,180,211,0.1)] dark:active:shadow-[0_8px_9px_-4px_rgba(84,180,211,0.2),0_4px_18px_0_rgba(84,180,211,0.1)]"
          data-twe-ripple-init
          data-twe-ripple-color="light">
          Preview
        </button>
        <button
          type="button"
          class="inline-block rounded border-2 border-info px-4 pb-[3px] pt-[4px] text-xs font-medium uppercase leading-normal text-info transition duration-150 ease-in-out hover:border-info-600 hover:bg-neutral-500 hover:bg-opacity-10 hover:text-info-600 focus:border-info-600 focus:text-info-600 focus:outline-none focus:ring-0 active:border-info-700 active:text-info-700 dark:hover:bg-neutral-100 dark:hover:bg-opacity-10"
          data-twe-ripple-init>
          See demo
        </button>
      </div>
    </div>
  </li>

  <!--Second item-->
  <li>
    <div class="flex-start md:flex">
      <div
        class="-ms-[13px] flex h-[25px] w-[25px] items-center justify-center rounded-full bg-info-100 text-info-700">
        <svg
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 24 24"
          fill="currentColor"
          class="h-4 w-4">
          <path
            fill-rule="evenodd"
            d="M6.75 2.25A.75.75 0 017.5 3v1.5h9V3A.75.75 0 0118 3v1.5h.75a3 3 0 013 3v11.25a3 3 0 01-3 3H5.25a3 3 0 01-3-3V7.5a3 3 0 013-3H6V3a.75.75 0 01.75-.75zm13.5 9a1.5 1.5 0 00-1.5-1.5H5.25a1.5 1.5 0 00-1.5 1.5v7.5a1.5 1.5 0 001.5 1.5h13.5a1.5 1.5 0 001.5-1.5v-7.5z"
            clip-rule="evenodd" />
        </svg>
      </div>
      <div
        class="mb-10 ms-6 block max-w-md rounded-lg bg-neutral-50 p-6 shadow-md shadow-black/5 dark:bg-neutral-700 dark:shadow-black/10">
        <div class="mb-4 flex justify-between">
          <a
            href="#!"
            class="text-sm text-info transition duration-150 ease-in-out hover:text-info-600 focus:text-info-600 active:text-info-700"
            >21 000 Job Seekers</a
          >
          <a
            href="#!"
            class="text-sm text-info transition duration-150 ease-in-out hover:text-info-600 focus:text-info-600 active:text-info-700"
            >12 / 01 / 2022</a
          >
        </div>
        <p class="mb-6 text-neutral-700 dark:text-neutral-200">
          Libero expedita explicabo eius fugiat quia aspernatur autem
          laudantium error architecto recusandae natus sapiente sit nam
          eaque, consectetur porro molestiae ipsam an deleniti.
        </p>
        <button
          type="button"
          class="inline-block rounded bg-info px-4 pb-[5px] pt-[6px] text-xs font-medium uppercase leading-normal text-white shadow-[0_4px_9px_-4px_#54b4d3] transition duration-150 ease-in-out hover:bg-info-600 hover:shadow-[0_8px_9px_-4px_rgba(84,180,211,0.3),0_4px_18px_0_rgba(84,180,211,0.2)] focus:bg-info-600 focus:shadow-[0_8px_9px_-4px_rgba(84,180,211,0.3),0_4px_18px_0_rgba(84,180,211,0.2)] focus:outline-none focus:ring-0 active:bg-info-700 active:shadow-[0_8px_9px_-4px_rgba(84,180,211,0.3),0_4px_18px_0_rgba(84,180,211,0.2)] dark:shadow-[0_4px_9px_-4px_rgba(84,180,211,0.5)] dark:hover:shadow-[0_8px_9px_-4px_rgba(84,180,211,0.2),0_4px_18px_0_rgba(84,180,211,0.1)] dark:focus:shadow-[0_8px_9px_-4px_rgba(84,180,211,0.2),0_4px_18px_0_rgba(84,180,211,0.1)] dark:active:shadow-[0_8px_9px_-4px_rgba(84,180,211,0.2),0_4px_18px_0_rgba(84,180,211,0.1)]"
          data-twe-ripple-init
          data-twe-ripple-color="light">
          Preview
        </button>
        <button
          type="button"
          class="inline-block rounded border-2 border-info px-4 pb-[3px] pt-[4px] text-xs font-medium uppercase leading-normal text-info transition duration-150 ease-in-out hover:border-info-600 hover:bg-neutral-500 hover:bg-opacity-10 hover:text-info-600 focus:border-info-600 focus:text-info-600 focus:outline-none focus:ring-0 active:border-info-700 active:text-info-700 dark:hover:bg-neutral-100 dark:hover:bg-opacity-10"
          data-twe-ripple-init>
          See demo
        </button>
      </div>
    </div>
  </li>

  <!--Third item-->
  <li>
    <div class="flex-start md:flex">
      <div
        class="-ms-[13px] flex h-[25px] w-[25px] items-center justify-center rounded-full bg-info-100 text-info-700">
        <svg
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 24 24"
          fill="currentColor"
          class="h-4 w-4">
          <path
            fill-rule="evenodd"
            d="M6.75 2.25A.75.75 0 017.5 3v1.5h9V3A.75.75 0 0118 3v1.5h.75a3 3 0 013 3v11.25a3 3 0 01-3 3H5.25a3 3 0 01-3-3V7.5a3 3 0 013-3H6V3a.75.75 0 01.75-.75zm13.5 9a1.5 1.5 0 00-1.5-1.5H5.25a1.5 1.5 0 00-1.5 1.5v7.5a1.5 1.5 0 001.5 1.5h13.5a1.5 1.5 0 001.5-1.5v-7.5z"
            clip-rule="evenodd" />
        </svg>
      </div>
      <div
        class="mb-10 ms-6 block max-w-md rounded-lg bg-neutral-50 p-6 shadow-md shadow-black/5 dark:bg-neutral-700 dark:shadow-black/10">
        <div class="mb-4 flex justify-between">
          <a
            href="#!"
            class="text-sm text-info transition duration-150 ease-in-out hover:text-info-600 focus:text-info-600 active:text-info-700"
            >Awesome Employers</a
          >
          <a
            href="#!"
            class="text-sm text-info transition duration-150 ease-in-out hover:text-info-600 focus:text-info-600 active:text-info-700"
            >21 / 12 / 2021</a
          >
        </div>
        <p class="mb-6 text-neutral-700 dark:text-neutral-200">
          Voluptatibus temporibus esse illum eum aspernatur, fugiat
          suscipit natus! Eum corporis illum nihil officiis tempore.
          Excepturi illo natus libero sit doloremque, laborum molestias
          rerum pariatur quam ipsam necessitatibus incidunt, explicabo.
        </p>
        <button
          type="button"
          class="inline-block rounded bg-info px-4 pb-[5px] pt-[6px] text-xs font-medium uppercase leading-normal text-white shadow-[0_4px_9px_-4px_#54b4d3] transition duration-150 ease-in-out hover:bg-info-600 hover:shadow-[0_8px_9px_-4px_rgba(84,180,211,0.3),0_4px_18px_0_rgba(84,180,211,0.2)] focus:bg-info-600 focus:shadow-[0_8px_9px_-4px_rgba(84,180,211,0.3),0_4px_18px_0_rgba(84,180,211,0.2)] focus:outline-none focus:ring-0 active:bg-info-700 active:shadow-[0_8px_9px_-4px_rgba(84,180,211,0.3),0_4px_18px_0_rgba(84,180,211,0.2)] dark:shadow-[0_4px_9px_-4px_rgba(84,180,211,0.5)] dark:hover:shadow-[0_8px_9px_-4px_rgba(84,180,211,0.2),0_4px_18px_0_rgba(84,180,211,0.1)] dark:focus:shadow-[0_8px_9px_-4px_rgba(84,180,211,0.2),0_4px_18px_0_rgba(84,180,211,0.1)] dark:active:shadow-[0_8px_9px_-4px_rgba(84,180,211,0.2),0_4px_18px_0_rgba(84,180,211,0.1)]"
          data-twe-ripple-init
          data-twe-ripple-color="light">
          Preview
        </button>
        <button
          type="button"
          class="inline-block rounded border-2 border-info px-4 pb-[3px] pt-[4px] text-xs font-medium uppercase leading-normal text-info transition duration-150 ease-in-out hover:border-info-600 hover:bg-neutral-500 hover:bg-opacity-10 hover:text-info-600 focus:border-info-600 focus:text-info-600 focus:outline-none focus:ring-0 active:border-info-700 active:text-info-700 dark:hover:bg-neutral-100 dark:hover:bg-opacity-10"
          data-twe-ripple-init>
          See demo
        </button>
      </div>
    </div>
  </li>
</ol>

// Initialization for ES Users
import {
  Ripple,
  initTWE,
} from "tw-elements";

initTWE({ Ripple });