Horizon UI Dashboard Components
Discover 7 components available in Horizon UI Dashboard
Card Storage
Component from
Horizon UI Dashboard
Builder
<div data-type='div' className="!z-5 relative flex flex-col rounded-[20px] bg-white bg-clip-border shadow-3xl shadow-shadow-500 dark:!bg-navy-800 dark:text-white dark:shadow-none w-full h-full p-4 draggable">
<div data-type='div' className="mb-auto flex flex-col items-center justify-center">
<div data-type='div' className="mt-2 flex items-center justify-center rounded-full bg-lightPrimary p-[26px] text-5xl font-bold text-brand-500 dark:!bg-navy-700 dark:text-white">
<BsCloudCheck data-type='BsCloudCheck' />
</div>
<h4 data-type='h4' className="mb-px mt-3 text-2xl font-bold text-navy-700 dark:text-white">
Your storage
</h4>
<p data-type='p' className="px-5 text-center text-base font-normal text-gray-600 md:!px-0 xl:!px-8">
Supervise your drive space in the easiest way
</p>
</div>
<div data-type='div' className="flex flex-col">
<div data-type='div' className="flex justify-between">
<p data-type='p' className="text-sm font-medium text-gray-600">25.6 GB</p>
<p data-type='p' className="text-sm font-medium text-gray-600">50 GB</p>
</div>
<div data-type='div' className="mt-2 flex h-3 w-full items-center rounded-full bg-lightPrimary dark:!bg-navy-700">
<span data-type='span' className="h-full w-1/2 rounded-full bg-brand-500 dark:!bg-white" />
</div>
</div>
</div>Card Task
Component from
Horizon UI Dashboard
Builder
<div data-type=”div” className="flex flex-col justify-center items-center h-[100vh] draggable">
<div data-type=”div” className="!z-5 relative flex flex-col rounded-[20px] max-w-[200px] bg-white bg-clip-border shadow-3xl shadow-shadow-500 flex flex-col w-full !p-4 3xl:p-![18px] bg-white">
<div data-type=”div” className="relative flex flex-row justify-between">
<div data-type=”div” className="flex items-center">
<div data-type=”div” className="flex h-9 w-9 items-center justify-center rounded-full bg-indigo-100 dark:bg-indigo-100 dark:bg-white/5">
<svg data-type=”svg” stroke="currentColor" fill="currentColor" strokeWidth={0} viewBox="0 0 24 24" className="h-6 w-6 text-brand-500 dark:text-white" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg">
<path data-type=”path” fill="none" d="M0 0h24v24H0z">
</path>
<path data-type=”path” d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z">
</path>
</svg>
</div>
<h4 data-type=”h4” className="ml-4 text-xl font-bold text-navy-700 dark:text-white">
Tasks
</h4>
</div>
<div data-type=”div” className="relative flex">
<div data-type=”div” className="flex">
<button data-type=”button” className="flex items-center text-xl hover:cursor-pointer bg-lightPrimary p-2 text-brand-500 hover:bg-gray-100 dark:bg-navy-700 dark:text-white dark:hover:bg-white/20 dark:active:bg-white/10 linear justify-center rounded-md font-bold transition duration-200">
<svg data-type=”svg” stroke="currentColor" fill="currentColor" strokeWidth={0} viewBox="0 0 16 16" className="h-6 w-6" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg">
<path data-type=”path” d="M3 9.5a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zm5 0a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zm5 0a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3z">
</path>
</svg>
</button>
</div>
<div data-type=”div” className="top-11 right-0 w-max absolute z-10 origin-top-right transition-all duration-300 ease-in-out scale-0">
<div data-type=”div” className="z-50 w-max rounded-md bg-white px-4 py-3 text-sm shadow-xl shadow-shadow-500 dark:!bg-navy-700 dark:shadow-none">
<p data-type=”p” className="hover:text-black flex cursor-pointer items-center gap-2 text-gray-600 hover:font-medium">
<span data-type=”span”>
<svg data-type=”svg” stroke="currentColor" fill="currentColor" strokeWidth={0} viewBox="0 0 1024 1024" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg">
<path data-type=”path” d="M858.5 763.6a374 374 0 0 0-80.6-119.5 375.63 375.63 0 0 0-119.5-80.6c-.4-.2-.8-.3-1.2-.5C719.5 518 760 444.7 760 362c0-137-111-248-248-248S264 225 264 362c0 82.7 40.5 156 102.8 201.1-.4.2-.8.3-1.2.5-44.8 18.9-85 46-119.5 80.6a375.63 375.63 0 0 0-80.6 119.5A371.7 371.7 0 0 0 136 901.8a8 8 0 0 0 8 8.2h60c4.4 0 7.9-3.5 8-7.8 2-77.2 33-149.5 87.8-204.3 56.7-56.7 132-87.9 212.2-87.9s155.5 31.2 212.2 87.9C779 752.7 810 825 812 902.2c.1 4.4 3.6 7.8 8 7.8h60a8 8 0 0 0 8-8.2c-1-47.8-10.9-94.3-29.5-138.2zM512 534c-45.9 0-89.1-17.9-121.6-50.4S340 407.9 340 362c0-45.9 17.9-89.1 50.4-121.6S466.1 190 512 190s89.1 17.9 121.6 50.4S684 316.1 684 362c0 45.9-17.9 89.1-50.4 121.6S557.9 534 512 534z">
</path>
</svg>
</span>
Panel 1
</p>
<p data-type=”p” className="hover:text-black mt-2 flex cursor-pointer items-center gap-2 pt-1 text-gray-600 hover:font-medium">
<span data-type=”span”>
<svg data-type=”svg” stroke="currentColor" fill="currentColor" strokeWidth={0} viewBox="0 0 1024 1024" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg">
<path data-type=”path” d="M882 272.1V144c0-17.7-14.3-32-32-32H174c-17.7 0-32 14.3-32 32v128.1c-16.7 1-30 14.9-30 31.9v131.7a177 177 0 0 0 14.4 70.4c4.3 10.2 9.6 19.8 15.6 28.9v345c0 17.6 14.3 32 32 32h676c17.7 0 32-14.3 32-32V535a175 175 0 0 0 15.6-28.9c9.5-22.3 14.4-46 14.4-70.4V304c0-17-13.3-30.9-30-31.9zM214 184h596v88H214v-88zm362 656.1H448V736h128v104.1zm234 0H640V704c0-17.7-14.3-32-32-32H416c-17.7 0-32 14.3-32 32v136.1H214V597.9c2.9 1.4 5.9 2.8 9 4 22.3 9.4 46 14.1 70.4 14.1s48-4.7 70.4-14.1c13.8-5.8 26.8-13.2 38.7-22.1.2-.1.4-.1.6 0a180.4 180.4 0 0 0 38.7 22.1c22.3 9.4 46 14.1 70.4 14.1 24.4 0 48-4.7 70.4-14.1 13.8-5.8 26.8-13.2 38.7-22.1.2-.1.4-.1.6 0a180.4 180.4 0 0 0 38.7 22.1c22.3 9.4 46 14.1 70.4 14.1 24.4 0 48-4.7 70.4-14.1 3-1.3 6-2.6 9-4v242.2zm30-404.4c0 59.8-49 108.3-109.3 108.3-40.8 0-76.4-22.1-95.2-54.9-2.9-5-8.1-8.1-13.9-8.1h-.6c-5.7 0-11 3.1-13.9 8.1A109.24 109.24 0 0 1 512 544c-40.7 0-76.2-22-95-54.7-3-5.1-8.4-8.3-14.3-8.3s-11.4 3.2-14.3 8.3a109.63 109.63 0 0 1-95.1 54.7C233 544 184 495.5 184 435.7v-91.2c0-.3.2-.5.5-.5h655c.3 0 .5.2.5.5v91.2z">
</path>
</svg>
</span>
Panel 2
</p>
<p data-type=”p” className="hover:text-black mt-2 flex cursor-pointer items-center gap-2 pt-1 text-gray-600 hover:font-medium">
<span data-type=”span”>
<svg data-type=”svg” stroke="currentColor" fill="currentColor" strokeWidth={0} version="1.2" baseProfile="tiny" viewBox="0 0 24 24" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg">
<g data-type=”g”>
<path data-type=”path” d="M12.5 5.5c-.276 0-.5.224-.5.5s.224.5.5.5c1.083 0 1.964.881 1.964 1.964 0 .276.224.5.5.5s.5-.224.5-.5c0-1.634-1.33-2.964-2.964-2.964zM12.5 1c-4.136 0-7.5 3.364-7.5 7.5 0 1.486.44 2.922 1.274 4.165l.08.135c1.825 2.606 2.146 3.43 2.146 4.2v3c0 .552.448 1 1 1h2c0 .26.11.52.29.71.19.18.45.29.71.29.26 0 .52-.11.71-.29.18-.19.29-.45.29-.71h2c.552 0 1-.448 1-1v-3c0-.782.319-1.61 2.132-4.199.895-1.275 1.368-2.762 1.368-4.301 0-4.136-3.364-7.5-7.5-7.5zm2 18h-4v-1h4v1zm2.495-7.347c-1.466 2.093-2.143 3.289-2.385 4.347h-1.11v-2c0-.552-.448-1-1-1s-1 .448-1 1v2h-1.113c-.24-1.03-.898-2.2-2.306-4.22l-.077-.129c-.657-.934-1.004-2.024-1.004-3.151 0-3.033 2.467-5.5 5.5-5.5s5.5 2.467 5.5 5.5c0 1.126-.347 2.216-1.005 3.153z">
</path>
</g>
</svg>
</span>
Panel 3
</p>
<p data-type=”p” className="hover:text-black mt-2 flex cursor-pointer items-center gap-2 pt-1 text-gray-600 hover:font-medium">
<span data-type=”span”>
<svg data-type=”svg” stroke="currentColor" fill="none" strokeWidth={2} viewBox="0 0 24 24" strokeLinecap="round" strokeLinejoin="round" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg">
<circle data-type=”circle” cx={12} cy={12} r={3}>
</circle>
<path data-type=”path” d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z">
</path>
</svg>
</span>
Panel 4
</p>
</div>
</div>
</div>
</div>
<div data-type=”div” className="h-full w-full">
<div data-type=”div” className="mt-5 flex items-center justify-between p-2">
<div data-type=”div” className="flex items-center justify-center gap-2">
<input data-type=”input” type="checkbox" className="defaultCheckbox relative flex h-[20px] min-h-[20px] w-[20px] min-w-[20px] appearance-none items-center
justify-center rounded-md border border-gray-300 text-white/0 outline-none transition duration-[0.2s]
checked:border-none checked:text-white hover:cursor-pointer dark:border-white/10 checked:bg-brand-500 dark:checked:bg-brand-400 undefined" name="weekly" />
<p data-type=”p” className="text-base font-bold text-navy-700 dark:text-white">
Landing Page Design
</p>
</div>
<div data-type=”div”>
<svg data-type=”svg” stroke="currentColor" fill="currentColor" strokeWidth={0} viewBox="0 0 24 24" className="h-6 w-6 text-navy-700 dark:text-white" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg">
<path data-type='path' fill="none" d="M0 0h24v24H0V0z">
</path>
<path data-type=”path” d="M11 18c0 1.1-.9 2-2 2s-2-.9-2-2 .9-2 2-2 2 .9 2 2zm-2-8c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0-6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm6 4c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z">
</path>
</svg>
</div>
</div>
<div data-type=”div” className="mt-2 flex items-center justify-between p-2">
<div data-type=”div” className="flex items-center justify-center gap-2">
<input data-type=”input” type="checkbox" className="defaultCheckbox relative flex h-[20px] min-h-[20px] w-[20px] min-w-[20px] appearance-none items-center
justify-center rounded-md border border-gray-300 text-white/0 outline-none transition duration-[0.2s]
checked:border-none checked:text-white hover:cursor-pointer dark:border-white/10 checked:bg-brand-500 dark:checked:bg-brand-400 undefined" name="weekly" />
<p data-type=”p” className="text-base font-bold text-navy-700 dark:text-white">
Mobile App Design
</p>
</div>
<div data-type='div'>
<svg data-type=”svg” stroke="currentColor" fill="currentColor" strokeWidth={0} viewBox="0 0 24 24" className="h-6 w-6 text-navy-700 dark:text-white" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg">
<path data-type=”path” fill="none" d="M0 0h24v24H0V0z">
</path>
<path data-type=”path” d="M11 18c0 1.1-.9 2-2 2s-2-.9-2-2 .9-2 2-2 2 .9 2 2zm-2-8c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0-6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm6 4c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z">
</path>
</svg>
</div>
</div>
<div data-type=”div” className="mt-2 flex items-center justify-between p-2">
<div data-type=”div” className="flex items-center justify-center gap-2">
<input data-type=”input” type="checkbox" className="defaultCheckbox relative flex h-[20px] min-h-[20px] w-[20px] min-w-[20px] appearance-none items-center
justify-center rounded-md border border-gray-300 text-white/0 outline-none transition duration-[0.2s]
checked:border-none checked:text-white hover:cursor-pointer dark:border-white/10 checked:bg-brand-500 dark:checked:bg-brand-400 undefined" name="weekly" />
<p data-type=”p” className="text-base font-bold text-navy-700 dark:text-white">
Dashboard Builder
</p>
</div>
<div data-type=”div”>
<svg data-type=”svg” stroke="currentColor" fill="currentColor" strokeWidth={0} viewBox="0 0 24 24" className="h-6 w-6 text-navy-700 dark:text-white" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg">
<path data-type='path' fill="none" d="M0 0h24v24H0V0z">
</path>
<path data-type=”path” d="M11 18c0 1.1-.9 2-2 2s-2-.9-2-2 .9-2 2-2 2 .9 2 2zm-2-8c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0-6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm6 4c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z">
</path>
</svg>
</div>
</div>
<div data-type=”div” className="mt-2 flex items-center justify-between p-2">
<div data-type=”div” className="flex items-center justify-center gap-2">
<input data-type=”input” type="checkbox" className="defaultCheckbox relative flex h-[20px] min-h-[20px] w-[20px] min-w-[20px] appearance-none items-center
justify-center rounded-md border border-gray-300 text-white/0 outline-none transition duration-[0.2s]
checked:border-none checked:text-white hover:cursor-pointer dark:border-white/10 checked:bg-brand-500 dark:checked:bg-brand-400 undefined" name="weekly" />
<p data-type=”p” className="text-base font-bold text-navy-700 dark:text-white">
Landing Page Design
</p>
</div>
<div data-type=”div”>
<svg data-type=”svg” stroke="currentColor" fill="currentColor" strokeWidth={0} viewBox="0 0 24 24" className="h-6 w-6 text-navy-700 dark:text-white" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg">
<path data-type=”path” fill="none" d="M0 0h24v24H0V0z">
</path>
<path data-type=”path” d="M11 18c0 1.1-.9 2-2 2s-2-.9-2-2 .9-2 2-2 2 .9 2 2zm-2-8c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0-6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm6 4c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z">
</path>
</svg>
</div>
</div>
<div data-type=”div” className="mt-2 flex items-center justify-between p-2">
<div data-type=”div” className="flex items-center justify-center gap-2">
<input data-type=”input” type="checkbox" className="defaultCheckbox relative flex h-[20px] min-h-[20px] w-[20px] min-w-[20px] appearance-none items-center
justify-center rounded-md border border-gray-300 text-white/0 outline-none transition duration-[0.2s]
checked:border-none checked:text-white hover:cursor-pointer dark:border-white/10 checked:bg-brand-500 dark:checked:bg-brand-400 undefined" name="weekly" />
<p data-type=”p” className="text-base font-bold text-navy-700 dark:text-white">
Dashboard Builder
</p>
</div>
<div data-type=”div”>
<svg data-type=”svg” stroke="currentColor" fill="currentColor" strokeWidth={0} viewBox="0 0 24 24" className="h-6 w-6 text-navy-700 dark:text-white" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg">
<path data-type='path' fill="none" d="M0 0h24v24H0V0z">
</path>
<path data-type=”path” d="M11 18c0 1.1-.9 2-2 2s-2-.9-2-2 .9-2 2-2 2 .9 2 2zm-2-8c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0-6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm6 4c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z">
</path>
</svg>
</div>
</div>
</div>
</div>
</div>Card Informations
Component from
Horizon UI Dashboard
Builder
<div data-type='div' className="!z-5 relative flex flex-col rounded-[20px] bg-white bg-clip-border shadow-3xl shadow-shadow-500 dark:!bg-navy-800 dark:text-white dark:shadow-none w-full h-full p-3">
<div data-type='div' className="mt-2 mb-8 w-full">
<h4 data-type='h4' className="px-2 text-xl font-bold text-navy-700 dark:text-white">General Information</h4>
<p data-type='p' className="mt-2 px-2 text-base text-gray-600">As we live, our hearts turn colder. Cause pain is what we go through as we become older. We get insulted by others, lose trust for those others. We get back stabbed by friends. It becomes harder for us to give others a hand. We get our heart broken by people we love, even that we give them all...</p>
</div>
<div data-type='div' className="grid grid-cols-2 gap-4 px-2">
<div data-type='div' className="flex flex-col items-start justify-center rounded-2xl bg-white bg-clip-border px-3 py-4 shadow-3xl shadow-shadow-500 dark:!bg-navy-700 dark:shadow-none">
<p data-type='p' className="text-sm text-gray-600">Education</p>
<p data-type='p' className="text-base font-medium text-navy-700 dark:text-white">Stanford University</p>
</div>
<div data-type='div' className="flex flex-col justify-center rounded-2xl bg-white bg-clip-border px-3 py-4 shadow-3xl shadow-shadow-500 dark:!bg-navy-700 dark:shadow-none">
<p data-type='p' className="text-sm text-gray-600">Languages</p>
<p data-type='p' className="text-base font-medium text-navy-700 dark:text-white">English, Spanish, Italian</p>
</div>
<div data-type='div' className="flex flex-col items-start justify-center rounded-2xl bg-white bg-clip-border px-3 py-4 shadow-3xl shadow-shadow-500 dark:!bg-navy-700 dark:shadow-none">
<p data-type='p' className="text-sm text-gray-600">Department</p>
<p data-type='p' className="text-base font-medium text-navy-700 dark:text-white">Product Design</p>
</div>
<div data-type='div' className="flex flex-col justify-center rounded-2xl bg-white bg-clip-border px-3 py-4 shadow-3xl shadow-shadow-500 dark:!bg-navy-700 dark:shadow-none">
<p data-type='p' className="text-sm text-gray-600">Work History</p>
<p data-type='p' className="text-base font-medium text-navy-700 dark:text-white">English, Spanish, Italian</p>
</div>
<div data-type='div' className="flex flex-col items-start justify-center rounded-2xl bg-white bg-clip-border px-3 py-4 shadow-3xl shadow-shadow-500 dark:!bg-navy-700 dark:shadow-none">
<p data-type='p' className="text-sm text-gray-600">Organization</p>
<p data-type='p' className="text-base font-medium text-navy-700 dark:text-white">Simmmple Web LLC</p>
</div>
<div data-type='div' className="flex flex-col justify-center rounded-2xl bg-white bg-clip-border px-3 py-4 shadow-3xl shadow-shadow-500 dark:!bg-navy-700 dark:shadow-none">
<p data-type='p' className="text-sm text-gray-600">Birthday</p>
<p data-type='p' className="text-base font-medium text-navy-700 dark:text-white">20 July 1986</p>
</div>
</div>
</div>Card Simple
Component from
Horizon UI Dashboard
Builder
<div data-type='div' className="!z-5 relative flex flex-col rounded-[20px] bg-white bg-clip-border shadow-3xl shadow-shadow-500 dark:!bg-navy-800 dark:text-white dark:shadow-none !flex-row flex-grow items-center rounded-[20px] draggable">
<div data-type='div' className="ml-[18px] flex h-[90px] w-auto flex-row items-center">
<div data-type='div' className="rounded-full bg-lightPrimary p-3 dark:bg-navy-700">
<span data-type='span' className="flex items-center text-brand-500 dark:text-white">
<svg data-type='svg'
stroke="currentColor"
fill="currentColor"
strokeWidth={0}
viewBox="0 0 24 24"
className="h-7 w-7"
height="1em"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path data-type='path' fill="none" d="M0 0h24v24H0z" />
<path data-type='path' d="M4 9h4v11H4zM16 13h4v7h-4zM10 4h4v16h-4z" />
</svg>
</span>
</div>
</div>
<div data-type='div' className="h-50 ml-4 flex w-auto flex-col justify-center">
<p data-type='p' className="font-dm text-sm font-medium text-gray-600">Earninsgs</p>
<h4 data-type='h4' className="text-xl font-bold text-navy-700 dark:text-white">$340.5</h4>
</div>
</div>Profile Card
Component from
Horizon UI Dashboard
Builder
<div data-type=”div” className="flex flex-col justify-center items-center w-full h-[100vh] draggable">
<div data-type=”div” className="relative flex flex-col items-center rounded-[20px] w-full mx-auto p-4 bg-white bg-clip-border shadow-3xl shadow-shadow-500 dark:!bg-navy-800 dark:text-white dark:!shadow-none">
<div data-type=”div” className="relative flex h-32 w-full justify-center rounded-xl bg-cover">
<img data-type=”img” src="https://horizon-tailwind-react-git-tailwind-components-horizon-ui.vercel.app/static/media/banner.ef572d78f29b0fee0a09.png" className="absolute flex h-32 w-full justify-center rounded-xl bg-cover" />
<div data-type=”div” className="absolute -bottom-12 flex h-[87px] w-[87px] items-center justify-center rounded-full border-[4px] border-white bg-pink-400 dark:!border-navy-700">
<img data-type=”img” className="h-full w-full rounded-full" src="https://horizon-tailwind-react-git-tailwind-components-horizon-ui.vercel.app/static/media/avatar11.1060b63041fdffa5f8ef.png" alt="" />
</div>
</div>
<div data-type=”div” className="mt-16 flex flex-col items-center">
<h4 data-type=”h4” className="text-xl font-bold text-navy-700 dark:text-white">
Adela Parkson
</h4>
<p data-type=”p” className="text-base font-normal text-gray-600">Product Manager</p>
</div>
<div data-type=”div” className="mt-6 mb-3 flex gap-5">
<div data-type=”div” className="flex flex-col items-center justify-center">
<p data-type=”p” className="text-2xl font-bold text-navy-700 dark:text-white">17</p>
<p data-type=”p” className="text-sm font-normal text-gray-600">Posts</p>
</div>
<div data-type=”div” className="flex flex-col items-center justify-center">
<p data-type=”p” className="text-2xl font-bold text-navy-700 dark:text-white">
9.7K
</p>
<p data-type=”p” className="text-sm font-normal text-gray-600">Followers</p>
</div>
<div data-type=”div” className="flex flex-col items-center justify-center">
<p data-type=”p” className="text-2xl font-bold text-navy-700 dark:text-white">
434
</p>
<p data-type=”p” className="text-sm font-normal text-gray-600">Following</p>
</div>
</div>
</div>
</div>History Card
Component from
Horizon UI Dashboard
Builder
<div data-type='div' className="!z-5 max-w-[378px] max-h-[368px] relative flex w-full flex-col rounded-[20px] bg-white bg-clip-border p-4 shadow-3xl shadow-shadow-500 dark:!bg-navy-800 dark:text-white dark:shadow-none draggable">
<div data-type='div' className="flex items-center justify-between rounded-t-3xl w-full">
<div data-type='div' className="text-lg font-bold text-navy-700 dark:text-white">
History
</div>
<button data-type='button' className="linear rounded-[20px] bg-lightPrimary px-4 py-2 text-base font-medium text-brand-500 transition duration-200 hover:bg-gray-100 active:bg-gray-200 dark:bg-white/5 dark:text-white dark:hover:bg-white/10 dark:active:bg-white/20">
See all
</button>
</div>
<div data-type='div' className="flex h-full w-full items-start justify-between rounded-md border-[1px] border-[transparent] dark:hover:border-white/20 bg-white px-3 py-[20px] transition-all duration-150 hover:border-gray-200 dark:!bg-navy-800 dark:hover:!bg-navy-700">
<div data-type='div' className="flex items-center gap-3">
<div data-type='div' className="flex h-16 w-16 items-center justify-center">
<img data-type='img' className="h-full w-full rounded-xl" src="https://horizon-tailwind-react-corporate-7s21b54hb-horizon-ui.vercel.app/static/media/Nft1.0fea34cca5aed6cad72b.png" alt="" />
</div>
<div data-type='div' className="flex flex-col">
<h5 data-type='h5' className="text-base font-bold text-navy-700 dark:text-white">
Colorful Heaven
</h5>
<p data-type='p' className="mt-1 text-sm font-normal text-gray-600">
Mark Benjamin
</p>
</div>
</div>
<div data-type='div' className="mt-1 flex items-center justify-center text-navy-700 dark:text-white">
<div data-type='div'>
<svg data-type='svg' stroke="currentColor" fill="currentColor" strokeWidth={0} viewBox="0 0 320 512" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"<path data-type='path' d="M311.9 260.8L160 353.6 8 260.8 160 0l151.9 260.8zM160 383.4L8 290.6 160 512l152-221.4-152 92.8z" /></svg>
</div>
<div data-type='div' className="ml-1 flex items-center text-sm font-bold text-navy-700 dark:text-white">
<p data-type='p'> Test</p>
<p data-type='p' className="ml-1">ETH</p>
</div>
<div data-type='div' className="ml-2 flex items-center text-sm font-normal text-gray-600 dark:text-white">
<p data-type='p' >30s</p>
<p data-type='p' className="ml-1">ago</p>
</div>
</div>
</div>
<div data-type='div' className="flex h-full w-full items-start justify-between rounded-md border-[1px] border-[transparent] dark:hover:border-white/20 bg-white px-3 py-[20px] transition-all duration-150 hover:border-gray-200 dark:!bg-navy-800 dark:hover:!bg-navy-700">
<div data-type='div' className="flex items-center gap-3">
<div data-type='div' className="flex h-16 w-16 items-center justify-center">
<img data-type='img' className="h-full w-full rounded-xl" src="https://horizon-tailwind-react-corporate-7s21b54hb-horizon-ui.vercel.app/static/media/Nft6.9ff5403226e81a6fd390.png" alt="" />
</div>
<div data-type='div' className="flex flex-col">
<h5 data-type='h5' className="text-base font-bold text-navy-700 dark:text-white">
3D Cubes Art
</h5>
<p data-type='p' className="mt-1 text-sm font-normal text-gray-600">
Esthera Jackson
</p>
</div>
</div>
<div data-type='div' className="mt-1 flex items-center justify-center text-navy-700 dark:text-white">
<div data-type='div'>
<svg data-type='svg' stroke="currentColor" fill="currentColor" strokeWidth={0} viewBox="0 0 320 512" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"<path data-type='path' d="M311.9 260.8L160 353.6 8 260.8 160 0l151.9 260.8zM160 383.4L8 290.6 160 512l152-221.4-152 92.8z" /></svg>
</div>
<div data-type='div' className="ml-1 flex items-center text-sm font-bold text-navy-700 dark:text-white">
<p data-type='p'> 0.4 </p>
<p data-type='p' className="ml-1">ETH</p>
</div>
<div data-type='div' className="ml-2 flex items-center text-sm font-normal text-gray-600 dark:text-white">
<p data-type='p' >30s</p>
<p data-type='p' className="ml-1">ago</p>
</div>
</div>
</div>
<div data-type='div' className="flex h-full w-full items-start justify-between rounded-md border-[1px] border-[transparent] dark:hover:border-white/20 bg-white px-3 py-[20px] transition-all duration-150 hover:border-gray-200 dark:!bg-navy-800 dark:hover:!bg-navy-700">
<div data-type='div' className="flex items-center gap-3">
<div data-type='div' className="flex h-16 w-16 items-center justify-center">
<img data-type='img' className="h-full w-full rounded-xl" src="https://horizon-tailwind-react-corporate-7s21b54hb-horizon-ui.vercel.app/static/media/Nft4.5fc37877b25c9fb9a52d.png" alt="" />
</div>
<div data-type='div' className="flex flex-col">
<h5 data-type='h5' className="text-base font-bold text-navy-700 dark:text-white">
Swipe Circles
</h5>
<p data-type='p' className="mt-1 text-sm font-normal text-gray-600">
Peter Will
</p>
</div>
</div>
<div data-type='div' className="mt-1 flex items-center justify-center text-navy-700 dark:text-white">
<div data-type='div'>
<svg data-type='svg' stroke="currentColor" fill="currentColor" strokeWidth={0} viewBox="0 0 320 512" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"<path data-type='path' d="M311.9 260.8L160 353.6 8 260.8 160 0l151.9 260.8zM160 383.4L8 290.6 160 512l152-221.4-152 92.8z" /></svg>
</div>
<div data-type='div' className="ml-1 flex items-center text-sm font-bold text-navy-700 dark:text-white">
<p data-type='p' > 0.4 </p>
<p data-type='p' className="ml-1">ETH</p>
</div>
<div data-type='div' className="ml-2 flex items-center text-sm font-normal text-gray-600 dark:text-white">
<p data-type='p' >4h</p>
<p data-type='p' className="ml-1">ago</p>
</div>
</div>
</div>
<div data-type='div' className="flex h-full w-full items-start justify-between rounded-md border-[1px] border-[transparent] dark:hover:border-white/20 bg-white px-3 py-[20px] transition-all duration-150 hover:border-gray-200 dark:!bg-navy-800 dark:hover:!bg-navy-700">
<div data-type='div' className="flex items-center gap-3">
<div data-type='div' className="flex h-16 w-16 items-center justify-center">
<img data-type='img' className="h-full w-full rounded-xl" src="https://horizon-tailwind-react-corporate-7s21b54hb-horizon-ui.vercel.app/static/media/Nft3.3b3e6a4b3ada7618de6c.png" alt="" />
</div>
<div data-type='div' className="flex flex-col">
<h5 data-type='h5' className="text-base font-bold text-navy-700 dark:text-white">
Swipe Circles
</h5>
<p data-type='p' className="mt-1 text-sm font-normal text-gray-600">
Manny Gates
</p>
</div>
</div>
<div data-type='div' className="mt-1 flex items-center justify-center text-navy-700 dark:text-white">
<div data-type='div'>
<svg data-type='svg' stroke="currentColor" fill="currentColor" strokeWidth={0} viewBox="0 0 320 512" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"<path data-type='path' d="M311.9 260.8L160 353.6 8 260.8 160 0l151.9 260.8zM160 383.4L8 290.6 160 512l152-221.4-152 92.8z" /></svg>
</div>
<div data-type='div' className="ml-1 flex items-center text-sm font-bold text-navy-700 dark:text-white">
<p data-type='p' > 0.4 </p>
<p data-type='p' className="ml-1">ETH</p>
</div>
<div data-type='div' className="ml-2 flex items-center text-sm font-normal text-gray-600 dark:text-white">
<p data-type='p' >30s</p>
<p data-type='p' className="ml-1">ago</p>
</div>
</div>
</div>
<div data-type='div' className="flex h-full w-full items-start justify-between rounded-md border-[1px] border-[transparent] dark:hover:border-white/20 bg-white px-3 py-[20px] transition-all duration-150 hover:border-gray-200 dark:!bg-navy-800 dark:hover:!bg-navy-700">
<div data-type='div' className="flex items-center gap-3">
<div data-type='div' className="flex h-16 w-16 items-center justify-center">
<img data-type='img' className="h-full w-full rounded-xl" src="https://horizon-tailwind-react-corporate-7s21b54hb-horizon-ui.vercel.app/static/media/Nft5.62dbaf7dd91b4180035c.png" alt="" />
</div>
<div data-type='div' className="flex flex-col">
<h5 data-type='h5' className="text-base font-bold text-navy-700 dark:text-white">
Mesh Gradients
</h5>
<p data-type='p' className="mt-1 text-sm font-normal text-gray-600">
Will Smith
</p>
</div>
</div>
<div data-type='div' className="mt-1 flex items-center justify-center text-navy-700 dark:text-white">
<div data-type='div'>
<svg data-type='svg' stroke="currentColor" fill="currentColor" strokeWidth={0} viewBox="0 0 320 512" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"<path data-type='path' d="M311.9 260.8L160 353.6 8 260.8 160 0l151.9 260.8zM160 383.4L8 290.6 160 512l152-221.4-152 92.8z" /></svg>
</div>
<div data-type='div' className="ml-1 flex items-center text-sm font-bold text-navy-700 dark:text-white">
<p data-type='p' > 0.4 </p>
<p data-type='p' className="ml-1">ETH</p>
</div>
<div data-type='div' className="ml-2 flex items-center text-sm font-normal text-gray-600 dark:text-white">
<p data-type='p' >30s</p>
<p data-type='p' className="ml-1">ago</p>
</div>
</div>
</div>
</div>Notifications Card
Component from
Horizon UI Dashboard
Builder
<div data-type="div" className="flex flex-col justify-center items-center h-[100vh] w-full draggable">
<div data-type="div" className="relative flex flex-col items-center rounded-[20px] w-full mx-auto bg-white bg-clip-border shadow-3xl shadow-shadow-500 dark:!bg-navy-800 dark:text-white dark:!shadow-none p-5 pb-8 transition duration-200 linear">
<div data-type="div" className="relative mb-3 flex items-center justify-between w-full pt-1>
<h4 data-type="h4" className="text-xl font-bold text-navy-700 dark:text-white">
Notifications
</h4>
<button data-type="button" className="flex items-center text-xl hover:cursor-pointer bg-lightPrimary p-2 text-brand-500 hover:bg-gray-100 dark:bg-navy-700 dark:text-white dark:hover:bg-white/20 dark:active:bg-white/10 rounded-lg">
<svg data-type="svg" stroke="currentColor" fill="currentColor" strokeWidth={0} viewBox="0 0 16 16" className="h-6 w-6" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"<path data-type='path' d="M3 9.5a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zm5 0a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zm5 0a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3z" /></svg>
</button>
</div>
<div data-type="div" className="flex flex-col w-full">
<div data-type="div" className="mt-3 flex items-center gap-3">
<input data-type="input" type="checkbox" className="relative h-5 w-10 appearance-none rounded-[20px] bg-[#e0e5f2] outline-none transition duration-[0.5s]
before:absolute before:top-[50%] before:h-4 before:w-4 before:translate-x-[2px] before:translate-y-[-50%] before:rounded-[20px]
before:bg-white before:shadow-[0_2px_5px_rgba(0,_0,_0,_.2)] before:transition before:content-[""]
checked:before:translate-x-[22px] hover:cursor-pointer checked:bg-brand-500 dark:checked:bg-brand-400" name="weekly" id="checkbox1" />
<label data-type="label" htmlFor="checkbox1" className="text-base font-medium text-navy-700 dark:text-white">
Item comment notifications
</label>
</div>
<div data-type="div" className="mt-4 flex items-center gap-3">
<input data-type="input" type="checkbox" className="relative h-5 w-10 appearance-none rounded-[20px] bg-[#e0e5f2] outline-none transition duration-[0.5s]
before:absolute before:top-[50%] before:h-4 before:w-4 before:translate-x-[2px] before:translate-y-[-50%] before:rounded-[20px]
before:bg-white before:shadow-[0_2px_5px_rgba(0,_0,_0,_.2)] before:transition before:content-[""]
checked:before:translate-x-[22px] hover:cursor-pointer checked:bg-brand-500 dark:checked:bg-brand-400" name="weekly" id="checkbox2" />
<label data-type="label" htmlFor="checkbox2" className="text-base font-medium text-navy-700 dark:text-white">
Buyer review notifications
</label>
</div>
<div data-type="div" className="mt-4 flex items-center gap-3">
<input data-type="input" type="checkbox" className="relative h-5 w-10 appearance-none rounded-[20px] bg-[#e0e5f2] outline-none transition duration-[0.5s]
before:absolute before:top-[50%] before:h-4 before:w-4 before:translate-x-[2px] before:translate-y-[-50%] before:rounded-[20px]
before:bg-white before:shadow-[0_2px_5px_rgba(0,_0,_0,_.2)] before:transition before:content-[""]
checked:before:translate-x-[22px] hover:cursor-pointer checked:bg-brand-500 dark:checked:bg-brand-400" name="weekly" id="checkbox3" />
<label data-type="label" htmlFor="checkbox3" className="text-base font-medium text-navy-700 dark:text-white">
Rating reminders notifications
</label>
</div>
<div data-type="div" className="mt-4 flex items-center gap-3">
<input data-type="input" type="checkbox" className="relative h-5 w-10 appearance-none rounded-[20px] bg-[#e0e5f2] outline-none transition duration-[0.5s]
before:absolute before:top-[50%] before:h-4 before:w-4 before:translate-x-[2px] before:translate-y-[-50%] before:rounded-[20px]
before:bg-white before:shadow-[0_2px_5px_rgba(0,_0,_0,_.2)] before:transition before:content-[""]
checked:before:translate-x-[22px] hover:cursor-pointer checked:bg-brand-500 dark:checked:bg-brand-400" name="weekly" id="checkbox4" />
<label data-type="label" htmlFor="checkbox4" className="text-base font-medium text-navy-700 dark:text-white">
Meetups near you notifications
</label>
</div>
<div data-type="div" className="mt-4 flex items-center gap-3">
<input data-type="input" type="checkbox" className="relative h-5 w-10 appearance-none rounded-[20px] bg-[#e0e5f2] outline-none transition duration-[0.5s]
before:absolute before:top-[50%] before:h-4 before:w-4 before:translate-x-[2px] before:translate-y-[-50%] before:rounded-[20px]
before:bg-white before:shadow-[0_2px_5px_rgba(0,_0,_0,_.2)] before:transition before:content-[""]
checked:before:translate-x-[22px] hover:cursor-pointer checked:bg-brand-500 dark:checked:bg-brand-400" name="weekly" id="checkbox5" />
<label data-type="label" htmlFor="checkbox5" className="text-base font-medium text-navy-700 dark:text-white">
Company news notifications
</label>
</div>
<div data-type="div" className="mt-4 flex items-center gap-3">
<input data-type="input" type="checkbox" className="relative h-5 w-10 appearance-none rounded-[20px] bg-[#e0e5f2] outline-none transition duration-[0.5s]
before:absolute before:top-[50%] before:h-4 before:w-4 before:translate-x-[2px] before:translate-y-[-50%] before:rounded-[20px]
before:bg-white before:shadow-[0_2px_5px_rgba(0,_0,_0,_.2)] before:transition before:content-[""]
checked:before:translate-x-[22px] hover:cursor-pointer checked:bg-brand-500 dark:checked:bg-brand-400" name="weekly" id="checkbox6" />
<label data-type="label" htmlFor="checkbox6" className="text-base font-medium text-navy-700 dark:text-white">
New launches and projects
</label>
</div>
<div data-type="div" className="mt-4 flex items-center gap-3">
<input data-type="input" type="checkbox" className="relative h-5 w-10 appearance-none rounded-[20px] bg-[#e0e5f2] outline-none transition duration-[0.5s]
before:absolute before:top-[50%] before:h-4 before:w-4 before:translate-x-[2px] before:translate-y-[-50%] before:rounded-[20px]
before:bg-white before:shadow-[0_2px_5px_rgba(0,_0,_0,_.2)] before:transition before:content-[""]
checked:before:translate-x-[22px] hover:cursor-pointer checked:bg-brand-500 dark:checked:bg-brand-400" name="weekly" id="checkbox7" />
<label data-type="label" htmlFor="checkbox7" className="text-base font-medium text-navy-700 dark:text-white">
Monthly product changes
</label>
</div>
<div data-type="div" className="mt-4 flex items-center gap-3">
<input data-type="input" type="checkbox" className="relative h-5 w-10 appearance-none rounded-[20px] bg-[#e0e5f2] outline-none transition duration-[0.5s]
before:absolute before:top-[50%] before:h-4 before:w-4 before:translate-x-[2px] before:translate-y-[-50%] before:rounded-[20px]
before:bg-white before:shadow-[0_2px_5px_rgba(0,_0,_0,_.2)] before:transition before:content-[""]
checked:before:translate-x-[22px] hover:cursor-pointer checked:bg-brand-500 dark:checked:bg-brand-400" name="weekly" id="checkbox8" />
<label data-type="label" htmlFor="checkbox8" className="text-base font-medium text-navy-700 dark:text-white">
Subscribe to newsletter
</label>
</div>
<div data-type="div" className="mt-4 flex items-center gap-3">
<input data-type="input" type="checkbox" className="relative h-5 w-10 appearance-none rounded-[20px] bg-[#e0e5f2] outline-none transition duration-[0.5s]
before:absolute before:top-[50%] before:h-4 before:w-4 before:translate-x-[2px] before:translate-y-[-50%] before:rounded-[20px]
before:bg-white before:shadow-[0_2px_5px_rgba(0,_0,_0,_.2)] before:transition before:content-[""]
checked:before:translate-x-[22px] hover:cursor-pointer checked:bg-brand-500 dark:checked:bg-brand-400" name="weekly" id="checkbox8" />
<label data-type="label" htmlFor="checkbox8" className="text-base font-medium text-navy-700 dark:text-white">
Email me when someone follows me
</label>
</div>
</div>
</div>
</div>