I really like this:
https://keenthemes.com/metronic/tailwind/demo1/public-profile/profiles/nft
But:
1) You cant scroll the cards with mouse on desktop (on mobile you can scroll theme).
2) Is possible to have this, outside a card will be cool for mobile.
<div class="flex gap-5 scrollable-x">
<div class="card shadow-none border-0 mb-5">
<div class="rounded-t-xl w-[280px] h-[240px] bg-cover bg-center" >
</div>
<div class="card-border card-rounded-b px-3.5 pt-5 pb-3.5">
<div class="pb-6">
<a class="font-media/images/600x600/ block font-medium text-gray-900 hover:text-primary text-md leading-4 mb-2" href="#">
Artistic Expressions
</a>
<div class="text-2sm text-gray-700">
Token ID:
<span class="text-2sm font-medium text-gray-800">
67890
</span>
</div>
</div>
<div class="grid grid-cols-2 items-center">
<div class="flex flex-col gap-2">
<span class="text-2sm text-gray-700">
Current bid
</span>
<div class="flex items-center gap-1">
<i class="ki-filled ki-xmr text-lg text-brand leading-none">
</i>
<span class="text-sm font-semibold text-gray-900 leading-none tracking-tight">
3.2 XMR
</span>
</div>
</div>
<div class="flex flex-col justify-self-end text-right gap-2">
<span class="text-2sm text-gray-700">
Ending in
</span>
<span class="text-2sm font-semibold text-gray-900 leading-none tracking-tight">
14h 30m 49s
</span>
</div>
</div>
</div>
</div>
<div class="card shadow-none border-0 mb-5">
<div class="rounded-t-xl w-[280px] h-[240px] bg-cover bg-center" >
</div>
<div class="card-border card-rounded-b px-3.5 pt-5 pb-3.5">
<div class="pb-6">
<a class="font-media/images/600x600/ block font-medium text-gray-900 hover:text-primary text-md leading-4 mb-2" href="#">
Digital Harmony
</a>
<div class="text-2sm text-gray-700">
Token ID:
<span class="text-2sm font-medium text-gray-800">
54321
</span>
</div>
</div>
<div class="grid grid-cols-2 items-center">
<div class="flex flex-col gap-2">
<span class="text-2sm text-gray-700">
Current bid
</span>
<div class="flex items-center gap-1">
<i class="ki-filled ki-xmr text-lg text-brand leading-none">
</i>
<span class="text-sm font-semibold text-gray-900 leading-none tracking-tight">
4.1 XMR
</span>
</div>
</div>
<div class="flex flex-col justify-self-end text-right gap-2">
<span class="text-2sm text-gray-700">
Ending in
</span>
<span class="text-2sm font-semibold text-gray-900 leading-none tracking-tight">
11h 15m 00s
</span>
</div>
</div>
</div>
</div>
<div class="card shadow-none border-0 mb-5">
<div class="rounded-t-xl w-[280px] h-[240px] bg-cover bg-center" >
</div>
<div class="card-border card-rounded-b px-3.5 pt-5 pb-3.5">
<div class="pb-6">
<a class="font-media/images/600x600/ block font-medium text-gray-900 hover:text-primary text-md leading-4 mb-2" href="#">
Geometric Patterns
</a>
<div class="text-2sm text-gray-700">
Token ID:
<span class="text-2sm font-medium text-gray-800">
81023
</span>
</div>
</div>
<div class="grid grid-cols-2 items-center">
<div class="flex flex-col gap-2">
<span class="text-2sm text-gray-700">
Current bid
</span>
<div class="flex items-center gap-1">
<i class="ki-filled ki-xmr text-lg text-brand leading-none">
</i>
<span class="text-sm font-semibold text-gray-900 leading-none tracking-tight">
3.8 XMR
</span>
</div>
</div>
<div class="flex flex-col justify-self-end text-right gap-2">
<span class="text-2sm text-gray-700">
Ending in
</span>
<span class="text-2sm font-semibold text-gray-900 leading-none tracking-tight">
10h 13m 32s
</span>
</div>
</div>
</div>
</div>
<div class="card shadow-none border-0 mb-5">
<div class="rounded-t-xl w-[280px] h-[240px] bg-cover bg-center" >
</div>
<div class="card-border card-rounded-b px-3.5 pt-5 pb-3.5">
<div class="pb-6">
<a class="font-media/images/600x600/ block font-medium text-gray-900 hover:text-primary text-md leading-4 mb-2" href="#">
Futuristic Sculptures
</a>
<div class="text-2sm text-gray-700">
Token ID:
<span class="text-2sm font-medium text-gray-800">
71045
</span>
</div>
</div>
<div class="grid grid-cols-2 items-center">
<div class="flex flex-col gap-2">
<span class="text-2sm text-gray-700">
Current bid
</span>
<div class="flex items-center gap-1">
<i class="ki-filled ki-xmr text-lg text-brand leading-none">
</i>
<span class="text-sm font-semibold text-gray-900 leading-none tracking-tight">
4.3 XMR
</span>
</div>
</div>
<div class="flex flex-col justify-self-end text-right gap-2">
<span class="text-2sm text-gray-700">
Ending in
</span>
<span class="text-2sm font-semibold text-gray-900 leading-none tracking-tight">
10h 30m 00s
</span>
</div>
</div>
</div>
</div>
<div class="card shadow-none border-0 mb-5">
<div class="rounded-t-xl w-[280px] h-[240px] bg-cover bg-center" >
</div>
<div class="card-border card-rounded-b px-3.5 pt-5 pb-3.5">
<div class="pb-6">
<a class="font-media/images/600x600/ block font-medium text-gray-900 hover:text-primary text-md leading-4 mb-2" href="#">
Enchanted Realms
</a>
<div class="text-2sm text-gray-700">
Token ID:
<span class="text-2sm font-medium text-gray-800">
67670
</span>
</div>
</div>
<div class="grid grid-cols-2 items-center">
<div class="flex flex-col gap-2">
<span class="text-2sm text-gray-700">
Current bid
</span>
<div class="flex items-center gap-1">
<i class="ki-filled ki-xmr text-lg text-brand leading-none">
</i>
<span class="text-sm font-semibold text-gray-900 leading-none tracking-tight">
5.3 XMR
</span>
</div>
</div>
<div class="flex flex-col justify-self-end text-right gap-2">
<span class="text-2sm text-gray-700">
Ending in
</span>
<span class="text-2sm font-semibold text-gray-900 leading-none tracking-tight">
15h 43m 23s
</span>
</div>
</div>
</div>
</div>
</div>