Bankhub - HTML Tailwindcss Fintech and Banking Dashboard

Components

Accordion

Section 1

Content for section 1 goes here. You can add any HTML content inside this div. You can add any HTML content inside this div. This is the third section. You can add any HTML content inside this div.

Section 2

Content for section 2 goes here. You can add any HTML content inside this div. You can add any HTML content inside this div. This is the third section. You can add any HTML content inside this div.

Section 3

Content for section 3 goes here. You can add any HTML content inside this div. This is the third section. You can add any HTML content inside this div.

Section 4

Content for section 4 goes here. You can add any HTML content inside this div. this is the content for section 4 goes here. You can add any HTML content inside this div.

<div class="accordion w-full max-w-3xl space-y-3">
<div class="accordion-item bg-primary/5 border border-n30 dark:border-n500  rounded-lg overflow-hidden">
<div class="accordion-header cursor-pointer bg-primary/5 px-4 py-3 flex justify-between items-center">
  <h2 class="text-lg font-semibold">Section 1</h2>
  <svg class="accordion-arrow w-6 h-6 transition-transform duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
  </svg>
</div>
<div class="accordion-content transition-all bg-n0 dark:bg-bg4 duration-300 ease-in-out">
  <div class="px-3 py-2">
    <p>Content for section 1 goes here. You can add any HTML content inside this div. You can add any HTML content inside this div. This is the third section. You can add any HTML content inside this div.</p>
  </div>
</div>
</div>

<div class="accordion-item bg-primary/5 border border-n30 dark:border-n500  rounded-lg overflow-hidden">
<div class="accordion-header cursor-pointer bg-primary/5 px-4 py-3 flex justify-between items-center">
  <h2 class="text-lg font-semibold">Section 2</h2>
  <svg class="accordion-arrow w-6 h-6 transition-transform duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
  </svg>
</div>
<div class="accordion-content transition-all bg-n0 dark:bg-bg4 duration-300 ease-in-out">
  <div class="px-3 py-2">
    <p>Content for section 2 goes here. You can add any HTML content inside this div. You can add any HTML content inside this div. This is the third section. You can add any HTML content inside this div.</p>
  </div>
</div>
</div>
<div class="accordion-item bg-primary/5 border border-n30 dark:border-n500  rounded-lg overflow-hidden">
<div class="accordion-header cursor-pointer bg-primary/5 px-4 py-3 flex justify-between items-center">
  <h2 class="text-lg font-semibold">Section 3</h2>
  <svg class="accordion-arrow w-6 h-6 transition-transform duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
  </svg>
</div>
<div class="accordion-content transition-all bg-n0 dark:bg-bg4 duration-300 ease-in-out">
  <div class="px-3 py-2">
    <p>Content for section 3 goes here. You can add any HTML content inside this div. This is the third section. You can add any HTML content inside this div.</p>
  </div>
</div>
</div>
<div class="accordion-item bg-primary/5 border border-n30 dark:border-n500  rounded-lg overflow-hidden">
<div class="accordion-header cursor-pointer bg-primary/5 px-4 py-3 flex justify-between items-center">
  <h2 class="text-lg font-semibold">Section 4</h2>
  <svg class="accordion-arrow w-6 h-6 transition-transform duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
  </svg>
</div>
<div class="accordion-content transition-all bg-n0 dark:bg-bg4 duration-300 ease-in-out">
  <div class="px-3 py-2">
    <p>Content for section 4 goes here. You can add any HTML content inside this div. this is the content for section 4 goes here. You can add any HTML content inside this div. </p>
  </div>
</div>
</div>

<!-- Add more accordion items as needed -->
</div>

Alert

This is an primary alert — check it out!

This is an Secondary alert — check it out!

This is an error alert — check it out!

This is an warning alert — check it out!

<div class="flex flex-col gap-4 lg:gap-6 pt-5">
<div class="py-3 px-4 md:px-6 lg:px-8 rounded-xl bg-primary/20 flex justify-between items-center">
<div class="flex gap-5 items-center">
  <i class="las la-info-circle text-3xl text-primary"></i>
  <span class="l-text font-medium text-primary">This is an primary alert — check it out!</span>
</div>
<span class="cursor-pointer size-9 rounded-full hover:bg-primary/30 duration-300 f-center">
  <i class="las la-times text-2xl text-primary"></i>
</span>
</div>
<div class="py-3 px-4 md:px-6 lg:px-8 rounded-xl bg-secondary/20 flex justify-between items-center">
<div class="flex gap-5 items-center">
  <i class="las la-check-circle text-3xl text-secondary"></i>
  <span class="l-text font-medium text-secondary">This is an Secondary alert — check it out!</span>
</div>
<span class="cursor-pointer size-9 rounded-full hover:bg-secondary/30 duration-300 f-center">
  <i class="las la-times text-2xl text-secondary"></i>
</span>
</div>
<div class="py-3 px-4 md:px-6 lg:px-8 rounded-xl bg-error/20 flex justify-between items-center">
<div class="flex gap-5 items-center">
  <i class="las la-exclamation-triangle text-3xl text-error"></i>
  <span class="l-text font-medium text-error">This is an error alert — check it out!</span>
</div>
<span class="cursor-pointer size-9 rounded-full hover:bg-error/30 duration-300 f-center">
  <i class="las la-times text-2xl text-error"></i>
</span>
</div>
<div class="py-3 px-4 md:px-6 lg:px-8 rounded-xl bg-warning/20 flex justify-between items-center">
<div class="flex gap-5 items-center">
  <i class="las la-times-circle text-3xl text-warning"></i>
  <span class="l-text font-medium text-warning">This is an warning alert — check it out!</span>
</div>
<span class="cursor-pointer size-9 rounded-full hover:bg-warning/30 duration-300 f-center">
  <i class="las la-times text-2xl text-warning"></i>
</span>
</div>
</div>

Avatar

<div class="flex gap-4">
<img class="size-10 rounded-full" src="./assets/images/avatar-1.png" alt="" />
<img class="size-10 rounded-full" src="./assets/images/avatar-2.png" alt="" />
<img class="size-10 rounded-full" src="./assets/images/avatar-3.png" alt="" />
<div class="size-8 lg:size-10 rounded-full f-center text-neutral-0 bg-primary">
<i class="las la-user-circle text-2xl text-n0"></i>
</div>
<div class="size-8 lg:size-10 rounded-full f-center text-neutral-0 bg-secondary">
<i class="las la-user-circle text-2xl text-n0"></i>
</div>
<div class="size-8 lg:size-10 rounded-full f-center text-neutral-0 bg-warning">
<i class="las la-user-circle text-2xl text-n0"></i>
</div>
</div>

Badges

999

 <div class="flex gap-4 lg:gap-6 flex-wrap">
<div class="relative">
<span class="absolute -top-0.5 -right-1.5 text-[10px] rounded-full size-4 bg-primary text-n0 f-center font-bold">5</span>
<i class="las la-bell text-4xl"></i>
</div>
<div class="relative">
<span class="absolute -top-0.5 -right-1.5 text-[10px] rounded-full size-4 bg-secondary text-n0 f-center font-bold">5</span>
<i class="las la-bell text-4xl"></i>
</div>
<div class="relative size-10 rounded-full bg-n50 dark:bg-n400">
<span class="absolute bottom-0 f-center size-4 right-0 text-n0 bg-secondary rounded-full border border-n0 dark:border-bg3">
  <i class="las la-clock text-xs"></i>
</span>
</div>
<div class="relative size-10 rounded-full bg-n50 dark:bg-n400">
<span class="absolute bottom-0 f-center size-4 right-0 text-n0 bg-primary rounded-full border-[0.5px] border-n0 dark:border-bg3"> </span>
</div>
<div class="relative">
<span class="absolute -top-1 -right-2 text-xs rounded-full h-5 min-w-max px-1.5 bg-error text-n0 f-center font-bold">99</span>
<i class="las la-bell text-4xl"></i>
</div>
<div class="relative">
<span class="absolute -top-1 -right-3 text-xs rounded-full h-5 min-w-max px-1.5 bg-error text-n0 f-center font-bold">999</span>
<i class="las la-bell text-4xl"></i>
</div>
</div>

Breadcrumb

Home
/
Components
/
Breadcrumbs

Home
/
Components
/
Breadcrumbs

Home
•
Link 1
•
Link 2
•
Link 3
•
Link 4

 <div class="space-y-4 xl:space-y-6">
<ul class="flex gap-1 items-center">
<li><a href="index.html">Home </a></li>
<li>/</li>
<li><a href="#">Components </a></li>
<li>/</li>
<li><span class="text-primary-300 font-medium"> Breadcrumbs </span></li>
</ul>
<ul class="flex flex-wrap gap-1 items-center">
<li>
  <a class="flex items-center gap-2" href="index.html"> <i class="las la-home text-xl shrink-0"></i> <span>Home</span></a>
</li>
<li>/</li>
<li>
  <a class="flex items-center gap-2" href="#"> <i class="las la-layer-group text-xl shrink-0"></i> <span>Components</span></a>
</li>
<li>/</li>
<li>
  <span class="text-primary-300 flex items-center gap-2 font-medium"> <i class="las la-bell text-xl shrink-0"></i> <span>Breadcrumbs</span></span>
</li>
</ul>

<ul class="flex flex-wrap gap-2 items-center">
<li>
  <a class="flex items-center gap-2" href="index.html"> <i class="las text-lg xl:text-xl xxl:text-2xl la-home shrink-0"></i> <span>Home</span></a>
</li>
<li class="text-sm text-n700 dark:text-n0">•</li>
<li>
  <a class="flex items-center gap-2" href="#"> <i class="las text-lg xl:text-xl xxl:text-2xl la-layer-group shrink-0"></i> <span>Link 1</span></a>
</li>
<li class="text-sm text-n700 dark:text-n0">•</li>
<li>
  <a class="flex items-center gap-2" href="#"> <i class="las text-lg xl:text-xl xxl:text-2xl la-layer-group shrink-0"></i> <span>Link 2</span></a>
</li>
<li class="text-sm text-n700 dark:text-n0">•</li>
<li>
  <a class="flex items-center gap-2" href="#"> <i class="las text-lg xl:text-xl xxl:text-2xl la-layer-group shrink-0"></i> <span>Link 3</span></a>
</li>
<li class="text-sm text-n700 dark:text-n0">•</li>
<li>
  <span class="flex items-center gap-2 text-primary-300 font-medium"> <i class="las text-lg xl:text-xl xxl:text-2xl la-layer-group shrink-0"></i> <span>Link 4</span></span>
</li>
</ul>
</div>

Buttons

 <div class="flex gap-4 flex-wrap">
<button class="btn-primary">Primary</button>
<button class="btn-secondary">Secondary</button>
<button class="btn-warning rounded-md">Rounded lg</button>
<button class="btn-error rounded-md">Rounded lg</button>
<button class="btn-outline rounded-md hover:text-n0">Primary</button>
<button class="btn-outline text-secondary border-secondary rounded-md hover:bg-secondary">Secondary</button>
</div>

Chips

Primary Deletable

Primary Clickable

Secondary Deletable

Secondary Clickable

  <div class="flex flex-wrap gap-4">
<div class="chip primary">
<span class="icon">
  <i class="las la-layer-group"></i>
</span>
<span>Primary Deletable</span>
<span class="icon cursor-pointer">
  <i class="las la-times"></i>
</span>
</div>
<div class="chip primary">
<span class="icon">
  <i class="las la-layer-group"></i>
</span>
<span>Primary Clickable</span>
</div>
<!-- secondary chip -->
<div class="chip secondary">
<span class="icon">
  <i class="las la-layer-group"></i>
</span>
<span>Secondary Deletable</span>
<span class="icon cursor-pointer">
  <i class="las la-times"></i>
</span>
</div>
<div class="chip secondary">
<span class="icon">
  <i class="las la-layer-group"></i>
</span>
<span>Secondary Clickable</span>
</div>
</div>

Dropdown


<div class="flex gap-4">
<div class="dropdown relative max-w-max">
<button class="dropdown-toggle bg-primary text-n0 font-bold py-2 px-4 rounded inline-flex items-center gap-2">
  <span class="mr-1">Dropdown</span>
  <i class="las la-angle-down text-base"></i>
</button>
<ul class="dropdown-menu absolute hidden text-n700 pt-1 bg-n0 w-full shadow-xl">
  <li><span class="dropdown-item cursor-pointer rounded-t py-2 px-4 block whitespace-no-wrap">Option 1</span></li>
  <li><span class="dropdown-item cursor-pointer py-2 px-4 block whitespace-no-wrap">Option 2</span></li>
  <li><span class="dropdown-item cursor-pointer rounded-b py-2 px-4 block whitespace-no-wrap">Option 3</span></li>
</ul>
</div>

<div class="dropdown relative max-w-max">
<button class="dropdown-toggle bg-secondary text-n0 font-bold py-2 px-4 rounded inline-flex items-center gap-2">
  <span class="mr-1">Dropdown</span>
  <i class="las la-angle-down text-base"></i>
</button>
<ul class="dropdown-menu absolute hidden text-n700 pt-1 bg-n0 w-full shadow-xl">
  <li><span class="cursor-pointer dropdown-item rounded-t py-2 px-4 block whitespace-no-wrap">Option 1</span></li>
  <li><span class="cursor-pointer dropdown-item py-2 px-4 block whitespace-no-wrap">Option 2</span></li>
  <li><span class="cursor-pointer dropdown-item rounded-b py-2 px-4 block whitespace-no-wrap">Option 3</span></li>
</ul>
</div>
</div>

Modal

      
<!-- Modal open btn -->
<button data-modal-target="modal1" class="bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded ml-4">Open Modal</button>
<!-- Modal element -->
<div id="modal1" class="fixed inset-0 items-center justify-center z-[99] hidden">
<div class="f-center h-screen w-screen">
<div class="bg-white rounded-lg shadow-xl p-6 m-4 max-w-xl w-full">
  <h2 class="text-2xl font-bold mb-4">Modal Title</h2>
  <p class="mb-4">This is the content of the modal. You can put any HTML here.</p>
  <div class="flex justify-end">
    <button data-modal-close="modal1" class="bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 rounded">Close</button>
  </div>
</div>
</div>
</div>

Offcanvas

Off-Canvas Content

This is the content for the off-canvas.


<button data-offcanvas-target="offcanvas1" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">Open Off-Canvas</button>

<!-- Off-canvas element -->
<div id="offcanvas1" class="fixed inset-y-0 left-0 w-64 bg-white shadow-lg transform -translate-x-full transition-transform duration-300 ease-in-out z-50">
<div class="p-4">
<h2 class="text-lg font-semibold mb-4">Off-Canvas Content</h2>
<p>This is the content for the off-canvas.</p>
<button data-offcanvas-close="offcanvas1" class="mt-4 bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 rounded">Close</button>
</div>
</div>

Toast


<div class="flex items-center gap-4 flex-wrap">
<button class="bg-primary text-n0 font-medium rounded-md py-2 px-4" data-toast="success" data-message="This is success Toast">Success Toast</button>
<button class="bg-error text-n0 font-medium rounded-md py-2 px-4" data-toast="error" data-message="This is error Toast">Error Taost</button>
</div>

Tooltip

<div class="flex flex-wrap gap-6">
<button class="hint--top hint--rounded bg-primary px-4 py-2 text-n0 font-medium rounded-md" aria-label="Tooltip on Top">Top</button>
<button class="hint--bottom hint--rounded bg-primary px-4 py-2 text-n0 font-medium rounded-md" aria-label="Tooltip on Bottom">Bottom</button>
<button class="hint--left hint--rounded bg-primary px-4 py-2 text-n0 font-medium rounded-md" aria-label="Tooltip on Left Side">Left</button>
<button class="hint--right hint--rounded bg-primary px-4 py-2 text-n0 font-medium rounded-md" aria-label="Tooltip on Right Side">Right</button>
<button class="hint--top hint--error hint--rounded bg-error px-4 py-2 text-n0 font-medium rounded-md" aria-label="Error Tooltip">Error</button>
<button class="hint--top hint--warning hint--rounded bg-warning px-4 py-2 text-n0 font-medium rounded-md" aria-label="Warning Tooltip">Warning</button>
</div>