Steps

<div class="w-full mx-auto flex items-center select-none">
  <div class="relative">
    <div class="text-indigo-600">&#9679;</div>
    <div class="absolute text-sm w-16 text-indigo-600">Step 1</div>
  </div>

  <div class="w-full bg-indigo-600 h-1 rounded mx-px"></div>

  <div class="relative">
    <div class="text-indigo-600">&#9679;</div>
    <div class="absolute text-sm w-16 text-indigo-600">Step 2</div>
  </div>

  <div class="w-full bg-indigo-600 h-1 rounded mx-px"></div>

  <div class="relative">
    <div class="text-indigo-600">&#9675;</div>
    <div class="absolute text-sm w-16 text-indigo-600">Step 3</div>
  </div>

  <div class="w-full bg-gray-400 h-1 rounded mx-px"></div>

  <div class="relative">
    <div class="text-gray-500">&#9675;</div>
    <div class="absolute text-sm w-16 text-gray-500">Step 4</div>
  </div>
</div>

<div class="my-24 mx-auto px-4 md:px-0 container">
  <div>
    <div>
      <div class="flex">
        <div class="inline-flex flex-col items-center">
          <div class="bg-indigo-300 text-indigo-700 font-semibold text-xl w-8 h-8 rounded inline-flex items-center justify-center select-none">
            1
          </div>

          <div class="h-32 border border-dashed w-px my-4"></div>
        </div>

        <div class="ml-4">
          <h3 class="font-semibold mb-2 text-lg">Collect and clean data</h3>
          <p class="text-gray-700">
            Jesse fetches fresh data from different exchanges, fills missing data, and stores them in the database. You can then use it in Jesse or even Jupyter notebooks.
          </p>
        </div>
      </div>

      <div class="flex">
        <div class="inline-flex flex-col items-center">
          <div class="bg-indigo-300 text-indigo-700 font-semibold text-xl w-8 h-8 rounded inline-flex items-center justify-center select-none">
            2
          </div>

          <div class="h-32 border border-dashed w-px my-4"></div>
        </div>

        <div class="ml-4">
          <h3 class="font-semibold mb-2 text-lg">Backtest simulations</h3>
          <p class="text-gray-700">
            Jesse's syntax for developing your strategies is the simplest yet most advanced on the market. Multiple timeframes, multiple trading pairs, ... look-ahead prevention behind the scenes, debugging tools, and so much more.
          </p>
        </div>
      </div>

      <div class="flex">
        <div class="inline-flex flex-col items-center">
          <div class="bg-indigo-300 text-indigo-700 font-semibold text-xl w-8 h-8 rounded inline-flex items-center justify-center select-none">
            3
          </div>

          <div class="h-32 border border-dashed w-px my-4"></div>
        </div>

        <div class="ml-4">
          <h3 class="font-semibold mb-2 text-lg">Optimize with AI</h3>
          <p class="text-gray-700">
            Use Jesse's state of the art optimize mode that uses the genetics algorithm to optimize literally every parameter in your strategies.
          </p>
        </div>
      </div>

      <div class="flex">
        <div class="inline-flex flex-col items-center">
          <div class="bg-indigo-300 text-indigo-700 font-semibold text-xl w-8 h-8 rounded inline-flex items-center justify-center select-none">
            4
          </div>
        </div>

        <div class="ml-4">
          <h3 class="font-semibold mb-2 text-lg">
            Live-trade
            <span class="text-orange-500 bg-orange-200 h-10 rounded px-2 py-1 text-xs select-none uppercase">
              Coming soon
            </span>
          </h3>
          <p class="text-gray-700">
            Found a profitable strategy? Good. Now live-trade it on the market and let the magic begin. We also offer monitoring tools, Telegram notifications, so that you rest assured everything is going as expected.
          </p>
        </div>
      </div>
    </div>
  </div>
</div>