Home
Framework
Theme
All
663
Forms
12
Charts
21
Navbars
45
Sidebars
27
Typography
42
Components
51
Tables
34
Cards
70
Contact Us
9
Testimonials
19
Cards Section
37
Features
25
Teams Section
11
Faq
9
Headers
45
Blogs
13
Contacts Section
9
Profiles Section
13
Charts Section
7
Tables Section
15
Contents
18
Logo Areas
12
Projects Section
14
Stats
13
Http Codes
6
Authentication
15
Call To Actions
21
Teams
16
Pricing
13
Cards - All Examples
Discover 70 Cards examples available in Loopple
Card Stats
<div class="card draggable">
<div class="card-body">
<div class="row">
<div class="col mt-0">
<h5 class="card-title">Sales</h5>
</div>
<div class="col-auto">
<div class="stat text-primary">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-truck align-middle"><rect x="1" y="3" width="15" height="13"></rect><polygon points="16 8 20 8 23 11 23 16 16 16 16 8"></polygon><circle cx="5.5" cy="18.5" r="2.5"></circle><circle cx="18.5" cy="18.5" r="2.5"></circle></svg>
</div>
</div>
</div>
<h1 class="mt-1 mb-3">2.382</h1>
<div class="mb-0">
<span class="text-danger"> <i class="mdi mdi-arrow-bottom-right"></i> -3.65% </span>
<span class="text-muted">Since last week</span>
</div>
</div>
</div><div class="card draggable">
<div class="card-body">
<div class="row">
<div class="col mt-0">
<h5 class="card-title">Sales</h5>
</div>
<div class="col-auto">
<div class="stat text-primary">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-truck align-middle"><rect x="1" y="3" width="15" height="13"></rect><polygon points="16 8 20 8 23 11 23 16 16 16 16 8"></polygon><circle cx="5.5" cy="18.5" r="2.5"></circle><circle cx="18.5" cy="18.5" r="2.5"></circle></svg>
</div>
</div>
</div>
<h1 class="mt-1 mb-3">2.382</h1>
<div class="mb-0">
<span class="text-danger"> <i class="mdi mdi-arrow-bottom-right"></i> -3.65% </span>
<span class="text-muted">Since last week</span>
</div>
</div>
</div>Card Profile
<div class="card card-profile draggable">
<img src="https://demos.creative-tim.com/argon-dashboard/assets-old/img/theme/img-1-1000x600.jpg" alt="Image placeholder" class="card-img-top">
<div class="row justify-content-center">
<div class="col-lg-3 order-lg-2">
<div class="card-profile-image">
<a href="#">
<img src="https://demos.creative-tim.com/argon-dashboard/assets-old/img/theme/team-4.jpg" class="rounded-circle">
</a>
</div>
</div>
</div>
<div class="card-header text-center border-0 pt-8 pt-md-4 pb-0 pb-md-4">
<div class="d-flex justify-content-between">
<a href="#" class="btn btn-sm btn-info mr-4 ">Connect</a>
<a href="#" class="btn btn-sm btn-default float-right">Message</a>
</div>
</div>
<div class="card-body pt-0">
<div class="row">
<div class="col">
<div class="card-profile-stats d-flex justify-content-center">
<div>
<span class="heading">22</span>
<span class="description">Friends</span>
</div>
<div>
<span class="heading">10</span>
<span class="description">Photos</span>
</div>
<div>
<span class="heading">89</span>
<span class="description">Comments</span>
</div>
</div>
</div>
</div>
<div class="text-center">
<h5 class="h3"> Jessica Jones <span class="font-weight-light">, 27</span>
</h5>
<h5 class="font-weight-300"> Bucharest, Romania </h5>
<h5 class="h5 mt-4"> Solution Manager - Creative Tim Officer </h5>
<h5> University of Computer Science </h5>
</div>
</div>
</div><div class="card card-profile draggable">
<img src="https://demos.creative-tim.com/argon-dashboard/assets-old/img/theme/img-1-1000x600.jpg" alt="Image placeholder" class="card-img-top">
<div class="row justify-content-center">
<div class="col-lg-3 order-lg-2">
<div class="card-profile-image">
<a href="#">
<img src="https://demos.creative-tim.com/argon-dashboard/assets-old/img/theme/team-4.jpg" class="rounded-circle">
</a>
</div>
</div>
</div>
<div class="card-header text-center border-0 pt-8 pt-md-4 pb-0 pb-md-4">
<div class="d-flex justify-content-between">
<a href="#" class="btn btn-sm btn-info mr-4 ">Connect</a>
<a href="#" class="btn btn-sm btn-default float-right">Message</a>
</div>
</div>
<div class="card-body pt-0">
<div class="row">
<div class="col">
<div class="card-profile-stats d-flex justify-content-center">
<div>
<span class="heading">22</span>
<span class="description">Friends</span>
</div>
<div>
<span class="heading">10</span>
<span class="description">Photos</span>
</div>
<div>
<span class="heading">89</span>
<span class="description">Comments</span>
</div>
</div>
</div>
</div>
<div class="text-center">
<h5 class="h3"> Jessica Jones <span class="font-weight-light">, 27</span>
</h5>
<h5 class="font-weight-300"> Bucharest, Romania </h5>
<h5 class="h5 mt-4"> Solution Manager - Creative Tim Officer </h5>
<h5> University of Computer Science </h5>
</div>
</div>
</div>Card Payment
Card Payment
Card Illustration
Card Informations
<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><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
<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><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
<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><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
<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><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
<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><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>