Desktop design

Active states

Mobile design

Expenses chart component

<h1 class="bold mb-10 text-2xl">Spending - Last 7 days</h1>

<div><p class="text-sm text-slate-400">Total this month</p><div class="flex justify-between items-center"><p class="bold text-4xl">$478.33</p><div class="flex flex-col items-end"><p class="bold text-sm">+2.4%</p><p class="text-sm text-slate-400">from last month</p></div></div></div>

</p></div><img src="/frontendmentor_expenses_chart_component/static/media/logo.99d5b9138a1a64cc6858cdac9a9d3bd4.svg" height="50px" width="50px" alt="logo"></head

d-lg p-6"><h1 class="bold mb-10 text-2xl">Spendi

ht: 67%;"><div id="price" class="price rounded p-0.5 bg-black color-paleOrange text-sm bold absolute">$34.91

ht: 34%;"><div id="price" class="price rounded p-0.5 bg-black color-paleOrange text-sm bold absolute">$17.45

t: 100%;"><div id="price" class="price rounded p-0.5 bg-black color-paleOrange text-sm bold absolute">$52.36

ht: 60%;"><div id="price" class="price rounded p-0.5 bg-black color-paleOrange text-sm bold absolute">$31.07

ht: 45%;"><div id="price" class="price rounded p-0.5 bg-black color-paleOrange text-sm bold absolute">$23.39

ht: 83%;"><div id="price" class="price rounded p-0.5 bg-black color-paleOrange text-sm bold absolute">$43.28

ht: 49%;"><div id="price" class="price rounded p-0.5 bg-black color-paleOrange text-sm bold absolute">$25.48

id="root"><article class="grid place-content-center h-screen w-screen"><secti

Please log in to post a comment

Community feedback

Responsive expenses chart using react and tailwind

Solution retrospective

Please log in to post a comment

Community feedback

Join our Discord community