Untitled

<div class="max-w-xs flex-1 space-y-[116px]">
            <div class="relative">
              <div class="absolute top-1/2 -translate-y-1/2 -right-2 w-1 h-24 bg-orange-500 translate-x-20"></div>
              <div class="absolute top-1/2 -translate-y-1/2 -right-2 translate-x-40 w-20 h-1 bg-orange-500"></div>

              <div class="space-y-4">
                <div class="flex flex-col relative flex-shrink-0">
                  <div class="absolute top-1/2 -translate-y-1/2 -right-2 w-20 h-1 bg-orange-500 translate-x-full"></div>
                  <div class="bg-blue-600 flex justify-between items-center text-center mb-1">
                    <div class="h-10 w-10 bg-blue-500">
                      <img class="h-full w-full" src="../images/peeposleep.png" alt="">
                    </div>
                    <p>Tym 1</p>
                    <p class="h-10 w-10 leading-10 bg-blue-500">1</p>
                  </div>
                  <div class="bg-blue-600 flex justify-between items-center text-center">
                    <div class="h-10 w-10 bg-blue-500">
                      <img class="h-full" src="../images/peeposleep.png" alt="">
                    </div>
                    <p>Tym 2</p>
                    <p class="h-10 w-10 leading-10 bg-blue-500">0</p>
                  </div>
                </div>

                <div class="flex flex-col relative">
                  <div class="absolute top-1/2 -translate-y-1/2 -right-2 w-20 h-1 bg-orange-500 translate-x-full"></div>
                  <div class="bg-blue-600 flex justify-between items-center text-center mb-1">
                    <div class="h-10 w-10 bg-blue-500">
                      <img class="h-full w-full" src="../images/peeposleep.png" alt="">
                    </div>
                    <p>Tym 1</p>
                    <p class="h-10 w-10 leading-10 bg-blue-500">1</p>
                  </div>
                  <div class="bg-blue-600 flex justify-between items-center text-center">
                    <div class="h-10 w-10 bg-blue-500">
                      <img class="h-full" src="../images/peeposleep.png" alt="">
                    </div>
                    <p>Tym 2</p>
                    <p class="h-10 w-10 leading-10 bg-blue-500">0</p>
                  </div>
                </div>
              </div>
            </div>

            <div class="relative">
              <div class="absolute top-1/2 -translate-y-1/2 -right-2 w-1 h-24 bg-orange-500 translate-x-20"></div>
              <div class="absolute top-1/2 -translate-y-1/2 -right-2 translate-x-40 w-20 h-1 bg-orange-500"></div>

              <div class="space-y-4">
                <div class="flex flex-col relative">
                  <div class="absolute top-1/2 -translate-y-1/2 -right-2 w-20 h-1 bg-orange-500 translate-x-full"></div>
                  <div class="bg-blue-600 flex justify-between items-center text-center mb-1">
                    <div class="h-10 w-10 bg-blue-500">
                      <img class="h-full w-full" src="../images/peeposleep.png" alt="">
                    </div>
                    <p>Tym 1</p>
                    <p class="h-10 w-10 leading-10 bg-blue-500">1</p>
                  </div>
                  <div class="bg-blue-600 flex justify-between items-center text-center">
                    <div class="h-10 w-10 bg-blue-500">
                      <img class="h-full" src="../images/peeposleep.png" alt="">
                    </div>
                    <p>Tym 2</p>
                    <p class="h-10 w-10 leading-10 bg-blue-500">0</p>
                  </div>
                </div>

                <div class="flex flex-col relative">
                  <div class="absolute top-1/2 -translate-y-1/2 -right-2 w-20 h-1 bg-orange-500 translate-x-full"></div>
                  <div class="bg-blue-600 flex justify-between items-center text-center mb-1">
                    <div class="h-10 w-10 bg-blue-500">
                      <img class="h-full w-full" src="../images/peeposleep.png" alt="">
                    </div>
                    <p>Tym 1</p>
                    <p class="h-10 w-10 leading-10 bg-blue-500">1</p>
                  </div>
                  <div class="bg-blue-600 flex justify-between items-center text-center">
                    <div class="h-10 w-10 bg-blue-500">
                      <img class="h-full" src="../images/peeposleep.png" alt="">
                    </div>
                    <p>Tym 2</p>
                    <p class="h-10 w-10 leading-10 bg-blue-500">0</p>
                  </div>
                </div>
              </div>
            </div>
          </div>