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

<div className="space-y-4"> {listVaccine.map((item, idx) => ( <div key={idx} className="flex justify-between items-center p-4 bg-white rounded-lg border border-gray-200 hover:shadow-md transition-all"> <div className="flex items-center gap-3"> <div className="w-8 h-8 rounded-full bg-green-100 flex items-center justify-center"> <svg className="w-4 h-4 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" /> </svg> </div> <div> <p className="font-medium text-gray-900">{item.name}</p> <p className="text-sm text-gray-500">Vaccine</p> </div> {/* If the vaccine field has items, show the list */} {item?.vaccine?.length > 0 && ( <div> {moreDetail ? ( <div onClick={() => setDetail(!moreDetail)} className="ml-4"> <p className="text-sm font-semibold text-gray-700">Combo Includes:</p> {item.vaccine.map((subVaccine, subIdx) => ( <div key={subIdx} className="text-sm text-gray-600"> - {subVaccine.name} ({formatDecimal(subVaccine.price)}) <KeyboardArrowDownOutlinedIcon /> </div> ))} </div> ) : ( <div onClick={() => setDetail(!moreDetail)}> <KeyboardArrowUpOutlinedIcon /> </div> )} </div> )} </div> <span className="text-lg font-semibold text-gray-900"> {formatDecimal(item.price)} VNĐ </span> </div> ))} </div>