Goal Item - Copy this React, Tailwind Component to your project
Design skeleton for this componet <div class="flex h full flex col"><div><div class="sticky top 0 z 10 flex w full justify between bg white px 4 pt 6"><h6 class="text 2xl font medium leading 8 text lifegray 900">Goals</h6><div class="relative flex items center"><img src="http://localhost:3000/_nuxt/assets/icons/dots horizontal.svg" class="cursor pointer" width="20" height="20"><! v if ></div></div><div class="h [calc(100% 56px)]"><div class="flex size full flex col gap 4 px 4 py 6"><div class="flex flex col gap 4 pb 5"><div class="flex cursor pointer flex col gap 4 rounded 2xl border border gray 200 p 4"><div class="flex items center gap 2"><div class="relative inline flex"><div class="rounded chekbox"><div class="relative flex items start"><div class="flex items center h 5"><input id="v 0 433" type="checkbox" class="h 5 w 5 form checkbox rounded full bg white dark:bg gray 900 border border gray 300 dark:border gray 700 focus visible:ring 2 focus visible:ring success 500 dark:focus visible:ring success 400 focus visible:ring offset 2 focus visible:ring offset white dark:focus visible:ring offset gray 900 text success 500 dark:text success 400"></div><! v if ></div></div><! v if ></div><div class="flex 1 rounded full p 1"><div data v 4e5d44bb="" class="w full flex flex col gap 2" role="progressbar"><! v if ><progress data v 4e5d44bb="" aria valuemax="100" aria valuenow="0" class="block appearance none border none overflow hidden w full [&:: webkit progress bar]:w full h 2 rounded full [&:: webkit progress bar]:rounded full [&:: webkit progress bar]:bg gray 200 [&:: webkit progress bar]:dark:bg gray 700 [@supports(selector(&:: moz progress bar))]:bg gray 200 [@supports(selector(&:: moz progress bar))]:dark:bg gray 700 [&:: webkit progress value]:rounded full [&:: webkit progress value]:transition all [&:: webkit progress value]:ease in out [&:: moz progress bar]:rounded full text primary 500 dark:text primary 400 [&:: webkit progress value]:bg current [&:: moz progress bar]:bg current indeterminate:relative indeterminate:after:rounded full [&:indeterminate:: webkit progress value]:rounded full [&:indeterminate:: moz progress bar]:rounded full" max="100" value="0">0%</progress><! v if ></div></div><span class="text sm font medium text [#7F56D9]">0%</span><! v if ></div><div class="flex flex col gap 2"><div class="relative inline flex"><span class="rounded md border border transparent p 1 text sm font medium text lifegray 600 outline none hover:cursor pointer hover:border hover:border gray 400 focus:border gray 400" contenteditable="true" role="textbox">123</span><! v if ></div><div class="relative inline flex"><span class="text sm font normal text gray 400">Dec 26, 2024</span><! v if ></div></div><div class="flex items center justify between"><div class="flex items center gap 1"><span class="emojis wrap pt 0.5 text display xs font medium text lifegray 900">😃</span><span class="break words text sm font normal text gray 600" style="word break: break all;">Private Page 3</span></div><div class="flex items center"><div class="inline flex flex row reverse"></div></div></div></div><div class="flex cursor pointer flex col gap 4 rounded 2xl border border gray 200 p 4"><div class="flex items center gap 2"><div class="relative inline flex"><div class="rounded chekbox"><div class="relative flex items start"><div class="flex items center h 5"><input id="v 0 434" type="checkbox" class="h 5 w 5 form checkbox rounded full bg white dark:bg gray 900 border border gray 300 dark:border gray 700 focus visible:ring 2 focus visible:ring success 500 dark:focus visible:ring success 400 focus visible:ring offset 2 focus visible:ring offset white dark:focus visible:ring offset gray 900 text success 500 dark:text success 400"></div><! v if ></div></div><! v if ></div><div class="flex 1 rounded full p 1"><div data v 4e5d44bb="" class="w full flex flex col gap 2" role="progressbar"><! v if ><progress data v 4e5d44bb="" aria valuemax="100" aria valuenow="0" class="block appearance none border none overflow hidden w full [&:: webkit progress bar]:w full h 2 rounded full [&:: webkit progress bar]:rounded full [&:: webkit progress bar]:bg gray 200 [&:: webkit progress bar]:dark:bg gray 700 [@supports(selector(&:: moz progress bar))]:bg gray 200 [@supports(selector(&:: moz progress bar))]:dark:bg gray 700 [&:: webkit progress value]:rounded full [&:: webkit progress value]:transition all [&:: webkit progress value]:ease in out [&:: moz progress bar]:rounded full text primary 500 dark:text primary 400 [&:: webkit progress value]:bg current [&:: moz progress bar]:bg current indeterminate:relative indeterminate:after:rounded full [&:indeterminate:: webkit progress value]:rounded full [&:indeterminate:: moz progress bar]:rounded full" max="100" value="0">0%</progress><! v if ></div></div><span class="text sm font medium text [#7F56D9]">0%</span><! v if ></div><div class="flex flex col gap 2"><div class="relative inline flex"><span class="rounded md border border transparent p 1 text sm font medium text lifegray 600 outline none hover:cursor pointer hover:border hover:border gray 400 focus:border gray 400" contenteditable="true" role="textbox">Goal 3</span><! v if ></div><div class="relative inline flex"><span class="text sm font normal text gray 400">Dec 26, 2024</span><! v if ></div></div><div class="flex items center justify between"><div class="flex items center gap 1"><span class="emojis wrap pt 0.5 text display xs font medium text lifegray 900">😃</span><span class="break words text sm font normal text gray 600" style="word break: break all;">Private Page 3</span></div><div class="flex items center"><div class="inline flex flex row reverse"></div></div></div></div><div class="flex cursor pointer items center justify center gap 2 rounded lg border border lifegray 200 bg white px [14px] py 2"><svg width="21" height="20" viewBox="0 0 21 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10.4993 18.3327C15.0827 18.3327 18.8327 14.5827 18.8327 9.99935C18.8327 5.41602 15.0827 1.66602 10.4993 1.66602C5.91602 1.66602 2.16602 5.41602 2.16602 9.99935C2.16602 14.5827 5.91602 18.3327 10.4993 18.3327Z" stroke="#667085" stroke width="1.5" stroke linecap="round" stroke linejoin="round"></path><path d="M7.16602 10H13.8327" stroke="#667085" stroke width="1.5" stroke linecap="round" stroke linejoin="round"></path><path d="M10.5 13.3327V6.66602" stroke="#667085" stroke width="1.5" stroke linecap="round" stroke linejoin="round"></path></svg><span class="text center text sm font semibold text lifegray 700">Generate more goals</span></div></div></div></div></div></div>
