≈Tailwind
1<div class="w-full max-w-md rounded-3xl border border-zinc-800 bg-[#111317] p-6 text-white shadow-2xl shadow-black/30">2 3 <div class="flex items-start justify-between">4 5 <div>6 <span class="text-xs font-medium text-zinc-500">7 Total revenue8 </span>9 10 <h2 class="mt-2 text-3xl font-bold tracking-tight">11 $48,294.0012 </h2>13 </div>14 15 <button class="flex h-10 w-10 items-center justify-center rounded-xl border border-zinc-800 bg-zinc-900 text-lg text-violet-400 transition hover:bg-zinc-800">16 ↗17 </button>18 19 </div>20 21 <div class="mt-4 flex items-center gap-2">22 23 <span class="rounded-full bg-emerald-500/10 px-2 py-1 text-[11px] font-bold text-emerald-400">24 ↑ 18.2%25 </span>26 27 <span class="text-xs text-zinc-600">28 vs last month29 </span>30 31 </div>32 33 <div class="mt-8 flex h-28 items-end gap-1.5">34 35 <div class="h-[35%] flex-1 rounded-t-md bg-violet-500/30"></div>36 <div class="h-[48%] flex-1 rounded-t-md bg-violet-500/40"></div>37 <div class="h-[42%] flex-1 rounded-t-md bg-violet-500/30"></div>38 <div class="h-[65%] flex-1 rounded-t-md bg-violet-500/50"></div>39 <div class="h-[58%] flex-1 rounded-t-md bg-violet-500/50"></div>40 <div class="h-[76%] flex-1 rounded-t-md bg-violet-500/60"></div>41 <div class="h-[92%] flex-1 rounded-t-md bg-violet-500/70"></div>42 <div class="h-[82%] flex-1 rounded-t-md bg-violet-500/60"></div>43 <div class="h-full flex-1 rounded-t-md bg-violet-500"></div>44 <div class="h-[88%] flex-1 rounded-t-md bg-violet-500/70"></div>45 <div class="h-[96%] flex-1 rounded-t-md bg-violet-500/90"></div>46 <div class="h-full flex-1 rounded-t-md bg-violet-500"></div>47 48 </div>49 50 <div class="mt-5 flex items-center justify-between border-t border-zinc-800 pt-4 text-[11px] text-zinc-600">51 <span>Jan</span>52 <span>Feb</span>53 <span>Mar</span>54 <span>Apr</span>55 <span class="text-zinc-400">May</span>56 </div>57 58</div>