<div class="py-1">
                        <button type="button" class="w-full p-4 bg-white flex flex-col sm:flex-row items-start sm:items-center cursor-pointer hover:bg-gray-50 rounded">
                          <div class="relative w-full sm:w-auto sm:h-24 bg-gray-100 rounded aspect-video">
                            <img class="absolute inset-0 w-full object-cover object-center rounded" src="https://image.mux.com/vZmCIg52ZkbiMSGRI5LGe8yW47kGm9Plnvbp1k01IToQ/thumbnail.webp?token=eyJhbGciOiJSUzI1NiIsInR5cCI6IkpXVCIsImtpZCI6ImtvUVNZVUdkb1h5N0xRNGF3aEJjcDNyYnVpMDBiMDJES0JSOFo2UmZ5cUZObyJ9.eyJjdXN0b20iOnsidXNlcl9pZCI6ImE0ZGU3YmMzLTQ1NmMtNDhiMy04NjFlLWVlNTFmZDU4MGUxNyJ9LCJ0aW1lIjo3OTEsIndpZHRoIjo2NDAsImV4cCI6MTcyMzEzNjMwMywiYXVkIjoidCIsInN1YiI6InZabUNJZzUyWmtiaU1TR1JJNUxHZTh5VzQ3a0dtOVBsbnZicDFrMDFJVG9RIn0.Njyt-jrY6Iikub7zR_m3xJRNqevTtebWFKoN0pAAO_geg4XKN45i3Y2ZOWRqb0h2yHmWmJm_muXpQ2PVPtjx4Z31gK0kXVAIqI4RLy6z9yHTjWZRwMhRBAxuzsD7ZbTSBz2lV5mzqiv2jsQqgq25v0pN87_guBxkDSbxQWt4VSWb_gogZXohOGMmnyePNUAsBoBpEpmBqT198zDNb5ihgAIUrube0WXxl7higZgS5iYoz2TWHp4w_R9sud4PgY6HFKNx4tX8sJGfTQGP_KGhQqs7PF52Q-hfM7nfRow8xc4g1KhOOBwjojl0mfWng8fx1mYw3YXlUfU1uq7rBFnwvw">
                            <div class="absolute bottom-0 right-0 p-2">
                              <div class="rounded px-3 font-bold text-sm  bg-black/[0.65] py-[0.1rem] pb-[0.05rem] px-1.5">
                                <span class="text-white">undefined<span class="font-ibm uppercase text-[10px]">36:23</span>
                                </span>
                              </div>
                            </div>
                          </div>
                          <div class="pt-2 sm:pt-0 flex-1 sm:pl-4 w-full">
                            <div class="flex flex-row items-start justify-start">
                              <div class="flex-1 text-left pr-6">
                                <div class="pr-4 font-bold">Barre</div>
                                <div class="pt-0.5 flex flex-row gap-x-1 flex-wrap" style="flex-flow: wrap; gap: 2px; padding-right: 0px; margin-top: -1px;">undefined<div>undefined<div class="text-sm">Quads,</div>undefined</div>undefined<div>undefined<div class="text-sm">Biceps,</div>undefined</div>undefined<div>undefined<div class="text-sm">Shoulders</div>undefined</div>
                                </div>
                                <div class="hidden sm:block pt-0.5">undefined<div class="text-sm">Thu 7/04/2024 with undefined<span class="font-bold">Dr. Jill</span>undefined</div>
                                </div>
                              </div>
                              <div class="flex sm:hidden items-end pt-0.5" style="align-items: flex-end;">
                                <div class="h-10 w-10 rounded-full bg-gray-50 overflow-hidden">undefined<img src="https://imagedelivery.net/7k5YYxqWW_gMqNpv3014sg/16b4f63a-25e0-4a6f-8a6a-89f146f31c00/thumbnail" class="h-full w-full">undefined</div>
                              </div>
                            </div>
                          </div>
                        </button>
                      </div>