≈Tailwind
1<div class="w-full max-w-sm overflow-hidden rounded-3xl border border-zinc-800 bg-[#111317] text-white shadow-2xl shadow-black/30">2 3 <div class="h-28 bg-gradient-to-br from-violet-600 via-fuchsia-600 to-orange-500"></div>4 5 <div class="relative px-6 pb-6">6 7 <div class="-mt-10 flex items-end justify-between">8 9 <div class="flex h-20 w-20 items-center justify-center rounded-2xl border-4 border-[#111317] bg-zinc-800 text-xl font-bold shadow-xl">10 TB11 </div>12 13 <button class="rounded-xl bg-white px-4 py-2 text-sm font-bold text-zinc-950 transition hover:bg-zinc-200">14 Follow15 </button>16 17 </div>18 19 <div class="mt-4">20 21 <div class="flex items-center gap-2">22 <h2 class="text-lg font-bold">23 Thiago Barbosa24 </h2>25 26 <span class="flex h-5 w-5 items-center justify-center rounded-full bg-blue-500 text-[10px] font-bold">27 ✓28 </span>29 </div>30 31 <p class="text-sm text-zinc-500">32 @thiagob733 </p>34 35 </div>36 37 <p class="mt-4 text-sm leading-6 text-zinc-400">38 Full-stack developer building interfaces,39 components and digital experiences.40 </p>41 42 <div class="mt-6 grid grid-cols-3 border-t border-zinc-800 pt-5 text-center">43 44 <div>45 <strong class="block text-sm font-bold">46 12847 </strong>48 49 <span class="text-[11px] text-zinc-600">50 Posts51 </span>52 </div>53 54 <div>55 <strong class="block text-sm font-bold">56 2.4k57 </strong>58 59 <span class="text-[11px] text-zinc-600">60 Followers61 </span>62 </div>63 64 <div>65 <strong class="block text-sm font-bold">66 18467 </strong>68 69 <span class="text-[11px] text-zinc-600">70 Following71 </span>72 </div>73 74 </div>75 76 </div>77</div>