Chat List

Show All

  • A
  • B
  • D
  • J
  • O
Notications

Show All

  • SEVER STATUS
  • KK
  • SOCIAL
  • RU
  • SEVER STATUS
  • AU
  • MO
Notes

Show All

Card title

He lay on his armour-like back, and if he lifted his head a little he could see his brown belly, slightly domed and divided by arches into stiff
sections. The bedding was hardly able to cover it and seemed ready to slide off any moment.


<div class="card dz-card dz-tab-area" id="card-title-1">
	<div class="card-header flex flex-wrap justify-between items-center sm:p-5 sm:pt-6 p-4 pt-5 max-sm:pb-5 relative z-[2] border-b border-[#E6E6E6] dark:border-[#ffffff1a]">
		<h5 class="card-title capitalize">Card title</h5>
	</div>
	<div class="p-[1.125rem]">
		<p class="card-text">He lay on his armour-like back, and if he lifted his head a little he could see his brown belly, slightly domed and divided by arches into stiff <br> sections. The bedding was hardly able to cover it and seemed ready to
			slide off any moment.
		</p>
	</div>
</div>

Card title-2

This is a wider card with supporting text and below as a natural lead-in to the additional content. This content is a little
bit longer. Some quick example text to build the bulk


<div class="card dz-card dz-tab-area" id="card-title-2">
	<div class="card-header flex flex-wrap justify-between items-center sm:p-5 sm:pt-6 p-4 pt-5 max-sm:pb-5 relative z-[2] border-b border-[#E6E6E6] dark:border-[#ffffff1a]">
		<h5 class="card-title capitalize">Card title-2</h5>
	</div>
	<div class="p-[1.125rem]">
		<p class="card-text">This is a wider card with supporting text and below as a natural lead-in to the additional content. This content is a little <br> bit longer. Some quick example text to build the bulk</p>
	</div>
	<div class="card-footer py-4 px-6 border-t border-[#E6E6E6] dark:border-[#ffffff1a] sm:text-sm text-xs sm:flex justify-between items-center">
		<div class="card-footer-link mb-4 mb-sm-0">
			<p class="card-text mb-4 inline">Last updated 3 mins ago</p>
		</div>

		<a href="javascript:void(0);" class="inline-block rounded font-medium text-[15px] max-xl:text-xs leading-5 py-[0.719rem] max-xl:px-4 px-[1.563rem] max-xl:py-2.5 border border-primary text-white bg-primary hover:bg-hover-primary hover:border-hover-primary duration-300">Go somewhere</a>
	</div>	
</div>	

Card Title-3

This is a wider card with supporting text and below as a natural lead-in to the additional content. This content

Go somewhere

<div class="card dz-card dz-tab-area" id="card-title-2">
	<div class="card-header flex flex-wrap justify-between items-center sm:p-5 sm:pt-6 p-4 pt-5 max-sm:pb-5 relative z-[2] border-b border-[#E6E6E6] dark:border-[#ffffff1a]">
		<h5 class="card-title capitalize">Card title-2</h5>
	</div>
	<div class="p-[1.125rem]">
		<p class="card-text">This is a wider card with supporting text and below as a natural lead-in to the additional content. This content is a little <br> bit longer. Some quick example text to build the bulk</p>
	</div>
	<div class="card-footer py-4 px-6 border-t border-[#E6E6E6] dark:border-[#ffffff1a] sm:text-sm text-xs sm:flex justify-between items-center">
		<div class="card-footer-link mb-4 mb-sm-0">
			<p class="card-text mb-4 inline">Last updated 3 mins ago</p>
		</div>
		<a href="javascript:void(0);" class="inline-block rounded font-medium text-[15px] max-xl:text-xs leading-5 py-[0.719rem] max-xl:px-4 px-[1.563rem] max-xl:py-2.5 border border-primary text-white bg-primary hover:bg-hover-primary hover:border-hover-primary duration-300">Go somewhere</a>
	</div>	
</div>

Special title treatment

With supporting text below as a natural lead-in to additional content.

Go somewhere

	<div class="card dz-card dz-tab-area text-center" id="special-title">
	<div class="card-header flex flex-wrap justify-between items-center sm:p-5 sm:pt-6 p-4 pt-5 max-sm:pb-5 relative z-[2] border-b border-[#E6E6E6] dark:border-[#ffffff1a]">
		<h5 class="card-title capitalize">Special title treatment</h5>
	</div>
	<div class="p-[1.125rem] custom-tab-1">
		<ul class="nav nav-tabs card-body-tabs flex flex-wrap border-b border-b-color mb-4">
			<li class="nav-item"><a class="nav-link px-3 py-[5px] text-primary border-b-[0.1875rem] block duration-500 text-sm border-primary focus:border-primary dark:hover:border-b-color active" href="javascript:void(0);">Active</a>
			</li>
			<li class="nav-item"><a class="nav-link px-3 py-[5px] text-primary border-b-[0.1875rem] border-transparent block duration-500 text-sm hover:border-primary focus:border-primary dark:hover:border-b-color" href="javascript:void(0);">Link</a>
			</li>
			<li class="nav-item"><a class="nav-link px-3 py-[5px] text-body-color border-b-[0.1875rem] border-transparent block duration-500 text-sm pointer-events-none disabled" href="javascript:void(0);">Disabled</a>
			</li>
		</ul>
		<p class="card-text mb-4">With supporting text below as a natural lead-in to additional content.</p><a href="javascript:void(0);" class="inline-block lock rounded font-medium text-[15px] max-xl:text-xs leading-5 py-[0.719rem] max-xl:px-4 px-[1.563rem] max-xl:py-2.5 border border-primary text-white bg-primary hover:bg-hover-primary hover:border-hover-primary duration-300 btn-card">Go somewhere</a>
	</div>	
</div>

Primary card

Some quick example text to build on the card title and make up the bulk of the card's content.

Go somewhere

<div class="card dz-card dz-tab-area" id="primary-card">
	<div class="card-header flex flex-wrap justify-between items-center sm:p-5 sm:pt-6 p-4 pt-5 max-sm:pb-5 relative z-[2] border-b border-[#E6E6E6] dark:border-[#ffffff1a]">
		<h5 class="card-title capitalize">Primary card</h5>
	</div>
	<div class="p-[1.125rem] mb-0">
		<p class="card-text mb-4 ">Some quick example text to build on the card title and make up the bulk of the card's content.</p><a href="javascript:void(0);" class="inline-block lock rounded font-medium text-[15px] max-xl:text-xs leading-5 py-[0.719rem] max-xl:px-4 px-[1.563rem] max-xl:py-2.5 border border-transparent bg-primary text-white btn-card">Go
			somewhere</a>
	</div>
	<div class="card-footer py-4 px-6 border-t border-[#E6E6E6] dark:border-[#ffffff1a] sm:text-sm text-xs bg-transparent border-0 text-white">Last updateed 3 min ago
	</div>	
</div>

Secondary card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Go somewhere

<div class="card dz-card dz-tab-area" id="secondary-card">
	<div class="card-header flex flex-wrap justify-between items-center sm:p-5 sm:pt-6 p-4 pt-5 max-sm:pb-5 relative z-[2] border-b border-[#E6E6E6] dark:border-[#ffffff1a]">
		<h5 class="card-title capitalize">Secondary card title</h5>
	</div>
	<div class="p-[1.125rem] mb-0">
		<p class="card-text mb-4">Some quick example text to build on the card title and make up the bulk of the card's content.</p><a href="javascript:void(0);" class="inline-block lock rounded font-medium text-[15px] max-xl:text-xs leading-5 py-[0.719rem] max-xl:px-4 px-[1.563rem] max-xl:py-2.5 border border-transparent bg-secondary text-white btn-card">Go
			somewhere</a>
	</div>
	<div class="card-footer py-4 px-6 border-t border-[#E6E6E6] dark:border-[#ffffff1a] sm:text-sm text-xs bg-transparent border-0 text-body-color">Last updateed 3 min ago
	</div>	
</div>	

Success card

Some quick example text to build on the card title and make up the bulk of the card's content.

Go somewhere

<div class="card dz-card dz-tab-area" id="success-card">
	<div class="card-header flex flex-wrap justify-between items-center sm:p-5 sm:pt-6 p-4 pt-5 max-sm:pb-5 relative z-[2] border-b border-[#E6E6E6] dark:border-[#ffffff1a]">
		<h5 class="card-title capitalize">Success card</h5>
	</div>
	<div class="p-[1.125rem] mb-0">
		<p class="card-text mb-4">Some quick example text to build on the card title and make up the bulk of the card's content.</p><a href="javascript:void(0);" class="inline-block lock rounded font-medium text-[15px] max-xl:text-xs leading-5 py-[0.719rem] max-xl:px-4 px-[1.563rem] max-xl:py-2.5 border border-transparent bg-success text-white btn-card">Go
			somewhere</a>
	</div>
	<div class="card-footer py-4 px-6 border-t border-[#E6E6E6] dark:border-[#ffffff1a] sm:text-sm text-xs bg-transparent border-0 text-body-color">Last updateed 3 min ago
	</div>		
</div>

Danger card

Some quick example text to build on the card title and make up the bulk of the card's content.

Go somewhere

<div class="card dz-card dz-tab-area" id="danger-card">
	<div class="card-header flex flex-wrap justify-between items-center sm:p-5 sm:pt-6 p-4 pt-5 max-sm:pb-5 relative z-[2] border-b border-[#E6E6E6] dark:border-[#ffffff1a]">
		<h5 class="card-title capitalize">Danger card</h5>
	</div>
	<div class="p-[1.125rem] mb-0">
		<p class="card-text mb-4">Some quick example text to build on the card title and make up the bulk of the card's content.</p><a href="javascript:void(0);" class="inline-block lock rounded font-medium text-[15px] max-xl:text-xs leading-5 py-[0.719rem] max-xl:px-4 px-[1.563rem] max-xl:py-2.5 border border-transparent bg-danger text-white btn-card">Go
			somewhere</a>
	</div>
	<div class="card-footer py-4 px-6 border-t border-[#E6E6E6] dark:border-[#ffffff1a] sm:text-sm text-xs bg-transparent border-0 text-body-color">Last updateed 3 min ago
	</div>	
</div>

Warning card

Some quick example text to build on the card title and make up the bulk of the card's content.

Go somewhere

	<div class="card dz-card dz-tab-area" id="warning-card">
	<div class="card-header flex flex-wrap justify-between items-center sm:p-5 sm:pt-6 p-4 pt-5 max-sm:pb-5 relative z-[2] border-b border-[#E6E6E6] dark:border-[#ffffff1a]">
		<h5 class="card-title capitalize">Warning card</h5>
	</div>
	<div class="p-[1.125rem] mb-0">
		<p class="card-text mb-4">Some quick example text to build on the card title and make up the bulk of the card's content.</p><a href="javascript:void(0);" class="inline-block lock rounded font-medium text-[15px] max-xl:text-xs leading-5 py-[0.719rem] max-xl:px-4 px-[1.563rem] max-xl:py-2.5 border border-transparent bg-white text-warning btn-card">Go
			somewhere</a>
	</div>
	<div class="card-footer py-4 px-6 border-t border-[#E6E6E6] dark:border-[#ffffff1a] sm:text-sm text-xs bg-transparent border-0 text-body-color">Last updateed 3 min ago
	</div>
</div>

Info card

Some quick example text to build on the card title and make up the bulk of the card's content.

Go somewhere

	<div class="card dz-card dz-tab-area" id="info-card">
	<div class="card-header flex flex-wrap justify-between items-center sm:p-5 sm:pt-6 p-4 pt-5 max-sm:pb-5 relative z-[2] border-b border-[#E6E6E6] dark:border-[#ffffff1a]">
		<h5 class="card-title capitalize">Info card</h5>
	</div>
	<div class="p-[1.125rem] mb-0">
		<p class="card-text mb-4">Some quick example text to build on the card title and make up the bulk of the card's content.</p><a href="javascript:void(0);" class="inline-block lock rounded font-medium text-[15px] max-xl:text-xs leading-5 py-[0.719rem] max-xl:px-4 px-[1.563rem] max-xl:py-2.5 border border-transparent bg-white text-info btn-card">Go
			somewhere</a>
	</div>
	<div class="card-footer py-4 px-6 border-t border-[#E6E6E6] dark:border-[#ffffff1a] sm:text-sm text-xs bg-transparent border-0 text-body-color">
		Last updateed 3 min ago
	</div>		
</div>

Light card

Some quick example text to build on the card title and make up the bulk of the card's content.

Go somewhere

<div class="card dz-card dz-tab-area text-black" id="light-card">
	<div class="card-header flex flex-wrap justify-between items-center sm:p-5 sm:pt-6 p-4 pt-5 max-sm:pb-5 relative z-[2] border-b border-[#E6E6E6] dark:border-[#ffffff1a]">
		<h5 class="card-title capitalize">Light card</h5>
	</div>
	<div class="p-[1.125rem] mb-0">
		<p class="card-text mb-4">Some quick example text to build on the card title and make up the bulk of the card's content.</p><a href="javascript:void(0);" class="inline-block lock rounded font-medium text-[15px] max-xl:text-xs leading-5 py-[0.719rem] max-xl:px-4 px-[1.563rem] max-xl:py-2.5 border border-transparent bg-[#c8c8c8] text-white btn-card">Go
			somewhere</a>
	</div>
	<div class="card-footer py-4 px-6 border-t border-[#E6E6E6] dark:border-[#ffffff1a] sm:text-sm text-xs text-dark bg-transparent border-0">Last updateed 3 min ago
	</div>	
</div>

Dark card

Some quick example text to build on the card title and make up the bulk of the card's content.

Go somewhere

<div class="card dz-card dz-tab-area" id="dark-card">
	<div class="card-header flex flex-wrap justify-between items-center sm:p-5 sm:pt-6 p-4 pt-5 max-sm:pb-5 relative z-[2] border-b border-[#E6E6E6] dark:border-[#ffffff1a]">
		<h5 class="card-title capitalize">Dark card</h5>
	</div>
	<div class="p-[1.125rem] mb-0">
		<p class="card-text mb-4">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
		<a href="javascript:void(0);" class="inline-block lock rounded font-medium text-[15px] max-xl:text-xs leading-5 py-[0.719rem] max-xl:px-4 px-[1.563rem] max-xl:py-2.5 border border-transparent bg-[#6e6e6e] text-white btn-card">Go
			somewhere</a>
	</div>
	<div class="card-footer py-4 px-6 border-t border-[#E6E6E6] dark:border-[#444444] sm:text-sm text-xs bg-transparent border-0 text-white">Last updateed 3 min ago
	</div>	
</div>

Card image cap
Card title-4

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

Last updated 3 mins ago


<div class="card dz-card dz-tab-area overflow-hidden" id="card-title-4">
	<img class="w-full img-fluid" src="assets/images/card/1.png" alt="Card image cap">
	<div class="card-header flex flex-wrap justify-between items-center sm:p-5 sm:pt-6 p-4 pt-5 max-sm:pb-5 relative z-[2] border-b border-[#E6E6E6] dark:border-[#ffffff1a]">
		<h5 class="card-title capitalize">Card title-4</h5>
	</div>
	<div class="p-[1.125rem]">
		<p class="card-text mb-4">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
		<p class="card-text mb-4">Last updated 3 mins ago</p>
	</div>	
</div>

Card image cap
Card title-5

He lay on his armour-like back, and if he lifted his head a little


<div class="card dz-card dz-tab-area overflow-hidden" id="card-title-5">
	<img class="w-full img-fluid" src="assets/images/card/2.png" alt="Card image cap">
	<div class="card-header flex flex-wrap justify-between items-center sm:p-5 sm:pt-6 p-4 pt-5 max-sm:pb-5 relative z-[2] border-b border-[#E6E6E6] dark:border-[#ffffff1a]">
		<h5 class="card-title capitalize">Card title-5</h5>
	</div>
	<div class="p-[1.125rem]">
		<p class="card-text mb-4">He lay on his armour-like back, and if he lifted his head a little
		</p>
	</div>
	<div class="card-footer py-4 px-6 border-t border-[#E6E6E6] dark:border-[#444444] sm:text-sm text-xs text-body-color sm:flex justify-between items-center">
		<p class="card-text mb-4 inline">Card footer</p>
		<a href="javascript:void(0);" class="card-link float-right">Card link</a>
	</div>	
</div>

Card title-6

This is a wider card with supporting text and below as a natural lead-in to the additional content. This content is a little

Card image cap

<div class="card dz-card dz-tab-area" id="card-title-6">
	<div class="card-header flex flex-wrap justify-between items-center sm:p-5 sm:pt-6 p-4 pt-5 max-sm:pb-5 relative z-[2] border-b border-[#E6E6E6] dark:border-[#ffffff1a]">
		<h5 class="card-title capitalize">Card title-6</h5>
	</div>
	<div class="p-[1.125rem]">
		<p class="card-text mb-4">This is a wider card with supporting text and below as a natural lead-in to the additional content. This content is a little</p>
	</div>
	<img class="w-full img-fluid" src="assets/images/card/3.png" alt="Card image cap">
	<div class="card-footer py-4 px-6 border-t border-[#E6E6E6] dark:border-[#444444] sm:text-sm text-xs text-body-color sm:flex justify-between items-center">
		<p class="card-text mb-4 inline">Card footer</p>
		<a href="javascript:void(0);" class="card-link float-right">Card link</a>
	</div>		
</div>