Task Component - Copy this React, Tailwind Component to your project

<div class="flex h full w full flex col justify center rounded 2xl py 2 pl 12 pr 4 relative"> <div className="w [60px] h [60px] rounded [12px] p 2 absolute bsg [#8a8a8a] bg [#6b69699c] left [ 13%] todp [40px] flex items center justify center"> <img alt="engy" src={task.image_url} className="w [40px]" /> </div> <div className="flex w full flex col justify between h full gap 1"> <h1 class="text [15px] text wrap mr [5px] font medium"> {task.name} </h1> <span className="flex text primary items center w fit space x 1 text [14px] font semibold"> <span className={`w [10px] h [10px] bg node2 rounded full flex items center`} ></span> <span className="">+{formatNumber(task.amount_point_reward)} </span> </span> <div className="w full flex items center justify between flex wrap text [14px] relative"> {task.is_done === 0 ? ( <> <button onClick={() => performTask(task.id, task.kink)} className={`w fit py [6px] px 4 font medium bg node2 text [#fff] hover:scale [103%] ease in duration 200 rounded [6px] `} // disabled={task.verified && countdownFinished[task.id]} > Perform </button> <button onClick={() => handleDoTask(task.id)} className={`w fit py [6px] px 4 font medium rounded [6px] ${ showVerifyButtons[task.id] ? `bg node2` : "bg btn2 text gray 300" }`} disabled={!showVerifyButtons[task.id]} > Verify </button> </> ) : ( <> <span className="w fit py [6px] px 4 font medium !bg btn2 !text gray 300 rounded [6px]"> Completed </span> <span className="mr [6px]"> <IoCheckmarkCircleSharp size={24} className={`text white`} /> </span> </> )} </div> </div> </div> làm cho đẹp hơn hiện tại đang bự quá chiêm khoảng cách