Dashboard Revenue Card with Top Content List

<section class="shadow-black/20 border-white/10 border rounded-2xl pt-5 pr-5 pb-5 pl-5 shadow-xl">
            <div class="flex items-start justify-between">
              <div class="">
                <h2 class="text-[18px] tracking-tight font-semibold text-white">Top Content</h2>
                <p class="text-xs text-white/60">Last 14 days</p>
              </div>
              <button class="flex items-center gap-2 rounded-md border border-white/10 bg-white/5 px-2.5 py-1.5 text-xs hover:bg-white/10">
                More
                
              </button>
            </div>

            <div class="mt-4">
              <div class="text-sm text-white/60">Estimated revenue</div>
              <div class="text-2xl font-semibold tracking-tight text-white">$6,295.29</div>
            </div>

            <div class="mt-5 space-y-5">
              <!-- Item -->
              <div class="rounded-xl border border-white/10 bg-white/5 p-3">
                <div class="flex items-center gap-3">
                  <img class="h-12 w-12 rounded-lg object-cover" src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/b80da09e-06de-4937-adad-b2f084d1e56e_320w.jpg" alt="" style="">
                  <div class="min-w-0 flex-1">
                    <div class="flex items-center justify-between">
                      <p class="truncate text-[13px] font-medium tracking-tight text-white">Build an Interactive site with...</p>
                      <span class="text-xs text-white/60">$227.90</span>
                    </div>
                    <div class="mt-2 h-2 w-full rounded-full bg-white/10">
                      <div class="h-2 w-[72%] rounded-full bg-gradient-to-r from-violet-500 to-fuchsia-500"></div>
                    </div>
                  </div>
                </div>
              </div>

              <div class="rounded-xl border border-white/10 bg-white/5 p-3">
                <div class="flex items-center gap-3">
                  <img class="h-12 w-12 rounded-lg object-cover" src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/b1724042-77ff-4e36-bb10-5ce0b9d24cf2_320w.jpg" alt="">
                  <div class="min-w-0 flex-1">
                    <div class="flex items-center justify-between">
                      <p class="truncate text-[13px] font-medium tracking-tight text-white">Design and prototype</p>
                      <span class="text-xs text-white/60">$157.89</span>
                    </div>
                    <div class="mt-2 h-2 w-full rounded-full bg-white/10">
                      <div class="h-2 w-[54%] rounded-full bg-gradient-to-r from-sky-400 to-violet-500"></div>
                    </div>
                  </div>
                </div>
              </div>

              <div class="rounded-xl border border-white/10 bg-white/5 p-3">
                <div class="flex items-center gap-3">
                  <img class="h-12 w-12 rounded-lg object-cover" src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/60fb3f64-51fc-4b08-883a-ce0554dfbf6b_800w.jpg" alt="">
                  <div class="min-w-0 flex-1">
                    <div class="flex items-center justify-between">
                      <p class="truncate text-[13px] font-medium tracking-tight text-white">UI/UX web design</p>
                      <span class="text-xs text-white/60">$257.49</span>
                    </div>
                    <div class="mt-2 h-2 w-full rounded-full bg-white/10">
                      <div class="h-2 w-[81%] rounded-full bg-gradient-to-r from-fuchsia-500 to-pink-500"></div>
                    </div>
                  </div>
                </div>
              </div>

              <div class="rounded-xl border border-white/10 bg-white/5 p-3">
                <div class="flex items-center gap-3">
                  <img class="h-12 w-12 rounded-lg object-cover" src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/7f714d78-f87b-4089-8885-b4f58693923c_800w.jpg" alt="">
                  <div class="min-w-0 flex-1">
                    <div class="flex items-center justify-between">
                      <p class="truncate text-[13px] font-medium tracking-tight text-white">Master no‑code web design</p>
                      <span class="text-xs text-white/60">$190.98</span>
                    </div>
                    <div class="mt-2 h-2 w-full rounded-full bg-white/10">
                      <div class="h-2 w-[64%] rounded-full bg-gradient-to-r from-indigo-500 to-violet-500"></div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </section>