Chat List

Show All

  • A
  • B
  • D
  • J
  • O
Chat with Khelesh

Online

  • View profile
  • Add to btn-close friends
  • Add to group
  • Block
Hi, how are you samim? 8:40 AM, Today
Hi Khalid i am good tnx how about you? 8:55 AM, Today
I am good too, thank you for your chat template 9:00 AM, Today
You are welcome 9:05 AM, Today
I am looking for your next templates 9:07 AM, Today
Ok, thank you have a good day 9:10 AM, Today
Bye, see you 9:12 AM, Today
Hi, how are you samim? 8:40 AM, Today
Hi Khalid i am good tnx how about you? 8:55 AM, Today
I am good too, thank you for your chat template 9:00 AM, Today
You are welcome 9:05 AM, Today
I am looking for your next templates 9:07 AM, Today
Ok, thank you have a good day 9:10 AM, Today
Bye, see you 9:12 AM, Today
Notications

Show All

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

Show All

Live Documentation Help & getting started
Dark Mode
Card

Card.

Make use of Tailwind's unique Card styles to enhance actions in forms, dialogs, and various other elements, featuring comprehensive support for multiple sizes, states, and additional functionalities.

Card
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 !shadow-none !rounded-none !h-auto !border-x-0 !border-t-0 !mb-0">
    <div class="relative sm:p-7.5 p-4 !pb-0 flex justify-between items-center flex-wrap">
        <h5 class="uppercase text-sm">Card title</h5>
    </div>
    <div class="sm:p-7.5 p-4">
        <p class="sm:text-sm">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

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

Last updated 3 mins ago

Go somewhere 
														
<div class="card !shadow-none !rounded-none !h-auto !border-x-0 !border-t-0 !mb-0">
	<div class="relative sm:p-7.5 p-4 !pb-0 flex justify-between items-center flex-wrap">
		<h5 class="uppercase text-sm">Card title</h5>
	</div>
	<div class="sm:p-7.5 p-4">
		<p class="sm:text-sm">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="border-t border-border py-4 px-5 sm:flex justify-between items-center">
		<div class="mb-6 sm:mb-0">
			<p class="sm:text-sm inline">Last updated 3 mins ago</p>
		</div>

		<a href="javascript:void(0);" class="btn bg-primary hover:bg-primaryhover hover:shadow-btnprimary text-white">Go
			somewhere</a>
	</div>
</div>
Card Title

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

Go somewhere

Last updateed 3 min ago

													
<div class="card !shadow-none !rounded-none !h-auto !border-x-0 !border-t-0 !mb-0">
    <div class="relative sm:p-7.5 p-4 !pb-0 flex justify-between items-center flex-wrap">
        <h5 class="uppercase text-sm">Card title</h5>
    </div>
    <div class="sm:p-7.5 p-4">
        <p class="sm:text-sm mb-4">This is a wider card with supporting text and below
            as a natural lead-in to the additional content. This content</p>
        <a href="javascript:void(0);" class="btn bg-primary hover:bg-primaryhover hover:shadow-btnprimary text-white">Go
            somewhere</a>
    </div>
    <div class="border-t border-border py-4 px-5">
        <p class="sm:text-sm">Last updateed 3 min ago</p>
    </div>
</div>
Special title treatment

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

Go somewhere 
													
<div class="card !shadow-none !rounded-none !h-auto !border-x-0 !border-t-0 !mb-0">
    <div class="relative sm:p-7.5 p-4 !pb-0 flex justify-between items-center flex-wrap">
        <h5 class="uppercase text-sm">Card title</h5>
    </div>
    <div class="sm:p-7.5 p-4 custom-tab-1">
        <ul class="nav flex flex-wrap border-b border-border mb-4">
            <li class="nav-item">
                <a class="block border-b-[3px] text-primary border-primary py-2 px-4" href="javascript:void(0);">Active</a>
            </li>
            <li class="nav-item">
                <a class="block border-b-[3px] text-primary border-transparent hover:border-primary py-2 px-4" href="javascript:void(0);">Link</a>
            </li>
            <li class="nav-item">
                <a class="block border-b-[3px] border-transparent py-2 px-4 pointer-events-none opacity-65" href="javascript:void(0);">Disabled</a>
            </li>
        </ul>
        <p class="sm:text-sm mb-4">With supporting text below as a natural lead-in to additional content.</p>
        <a href="javascript:void(0);" class="btn bg-primary hover:bg-primaryhover hover:shadow-btnprimary text-white btn-card">Go somewhere</a>
    </div>
</div>
Primary card title

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

Go somewhere
Last updateed 3 min ago 
													
<div class="card !shadow-none !rounded-none !h-auto !border-x-0 !border-t-0 !mb-0 text-white !bg-primary">
    <div class="relative sm:p-7.5 p-4 !pb-0 flex justify-between items-center flex-wrap">
        <h5 class="uppercase text-sm text-white">Primary Card title</h5>
    </div>
    <div class="sm:p-7.5 p-4 mb-0">
        <p class="sm:text-sm mb-4 text-white">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="btn bg-white hover:shadow-btnprimary text-primary btn-card">Go
            somewhere</a>
    </div>
    <div class="border-t border-border py-4 px-5 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
Last updateed 3 min ago 
													
<div class="card !shadow-none !rounded-none !h-auto !border-x-0 !border-t-0 !mb-0 text-white !bg-[#1F2025]">
    <div class="relative sm:p-7.5 p-4 !pb-0 flex justify-between items-center flex-wrap">
        <h5 class="uppercase text-sm text-white">Secondary Card title</h5>
    </div>
    <div class="sm:p-7.5 p-4 mb-0">
        <p class="sm:text-sm mb-4 text-white">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="btn text-secondary bg-white btn-card">Go
            somewhere</a>
    </div>
    <div class="border-t border-border py-4 px-5 bg-transparent border-0 text-white">Last updateed 3
        min ago
    </div>
</div>
Success card title

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

Go somewhere
Last updateed 3 min ago 
													
<div class="card !shadow-none !rounded-none !h-auto !border-x-0 !border-t-0 !mb-0 text-white !bg-success">
    <div class="relative sm:p-7.5 p-4 !pb-0 flex justify-between items-center flex-wrap">
        <h5 class="uppercase text-sm text-white">Success Card title</h5>
    </div>
    <div class="sm:p-7.5 p-4 mb-0">
        <p class="sm:text-sm mb-4 text-white">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="btn text-success bg-white btn-card">Go
            somewhere</a>
    </div>
    <div class="border-t border-border py-4 px-5 bg-transparent border-0 text-white">Last updateed 3
        min ago
    </div>
</div>
Danger card title

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

Go somewhere
Last updateed 3 min ago 
													
<div class="card !shadow-none !rounded-none !h-auto !border-x-0 !border-t-0 !mb-0 text-white !bg-danger">
    <div class="relative sm:p-7.5 p-4 !pb-0 flex justify-between items-center flex-wrap">
        <h5 class="uppercase text-sm text-white">Danger Card title</h5>
    </div>
    <div class="sm:p-7.5 p-4 mb-0">
        <p class="sm:text-sm mb-4 text-white">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=" btn text-danger bg-white btn-card">Go
            somewhere</a>
    </div>
    <div class="border-t border-border py-4 px-5 bg-transparent border-0 text-white">Last updateed 3
        min ago
    </div>
</div>
Warning card title

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

Go somewhere
Last updateed 3 min ago 
													
<div class="card !shadow-none !rounded-none !h-auto !border-x-0 !border-t-0 !mb-0 text-white !bg-warning">
    <div class="relative sm:p-7.5 p-4 !pb-0 flex justify-between items-center flex-wrap">
        <h5 class="uppercase text-sm text-white">Warning Card title</h5>
    </div>
    <div class="sm:p-7.5 p-4 mb-0">
        <p class="sm:text-sm mb-4 text-white">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="btn text-warning bg-white btn-card">Go
            somewhere</a>
    </div>
    <div class="border-t border-border py-4 px-5 bg-transparent border-0 text-white">Last updateed 3
        min ago
    </div>
</div>
Info card title

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

Go somewhere
Last updateed 3 min ago 
													
<div class="card !shadow-none !rounded-none !h-auto !border-x-0 !border-t-0 !mb-0 text-white !bg-info">
    <div class="relative sm:p-7.5 p-4 !pb-0 flex justify-between items-center flex-wrap">
        <h5 class="uppercase text-sm text-white">Info Card title</h5>
    </div>
    <div class="sm:p-7.5 p-4 mb-0">
        <p class="sm:text-sm mb-4 text-white">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="btn text-info bg-white btn-card">Go
            somewhere</a>
    </div>
    <div class="border-t border-border py-4 px-5 bg-transparent border-0 text-white">Last updateed 3
        min ago
    </div>
</div>
Light card title

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

Go somewhere
Last updateed 3 min ago 
													
<div class="card !shadow-none !rounded-none !h-auto !border-x-0 !border-t-0 !mb-0 !bg-light">
    <div class="relative sm:p-7.5 p-4 !pb-0 flex justify-between items-center flex-wrap">
        <h5 class="uppercase text-sm">Light Card title</h5>
    </div>
    <div class="sm:p-7.5 p-4 mb-0">
        <p class="sm:text-sm 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="btn bg-white btn-card">Go
            somewhere</a>
    </div>
    <div class="border-t border-border py-4 px-5 bg-transparent border-0">Last updateed 3 min ago
    </div>
</div>
Dark card title

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

Go somewhere
Last updateed 3 min ago 
													
<div class="card !shadow-none !rounded-none !h-auto !border-x-0 !border-t-0 !mb-0 text-white !bg-dark">
    <div class="relative sm:p-7.5 p-4 !pb-0 flex justify-between items-center flex-wrap">
        <h5 class="uppercase text-sm text-white">Dark Card title</h5>
    </div>
    <div class="sm:p-7.5 p-4 mb-0">
        <p class="sm:text-sm mb-4 text-white">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="btn text-dark bg-white btn-card">Go
            somewhere</a>
    </div>
    <div class="border-t border-border py-4 px-5 bg-transparent border-0 text-white">Last updateed 3
        min ago
    </div>
</div>
Card image cap
Card title

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 !shadow-none !rounded-none !h-auto !border-x-0 !border-t-0 !mb-0 !bg-light">
    <img class="w-full" src="assets/images/card/1.png" alt="Card image cap">
    <div class="relative sm:p-7.5 p-4 !pb-0 flex justify-between items-center flex-wrap">
        <h5 class="uppercase text-sm">Card title</h5>
    </div>
    <div class="sm:p-7.5 p-4">
        <p class="sm:text-sm">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="sm:text-sm">Last updated 3 mins ago</p>
    </div>
</div>
Card image cap
Card title

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

Card footer

Card link 
													
<div class="card !shadow-none !rounded-none !h-auto !border-x-0 !border-t-0 !mb-0 !bg-light">
    <img class="w-full" src="assets/images/card/2.png" alt="Card image cap">
    <div class="relative sm:p-7.5 p-4 !pb-0 flex justify-between items-center flex-wrap">
        <h5 class="uppercase text-sm">Card title</h5>
    </div>
    <div class="sm:p-7.5 p-4">
        <p class="sm:text-sm">He lay on his armour-like back, and if he lifted
            his head a little
        </p>
    </div>
    <div class="border-t border-border py-4 px-5">
        <p class="sm:text-sm inline">Card footer</p>
        <a href="javascript:void(0);" class="card-link float-end">Card link</a>
    </div>
</div>
Card title

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

Card footer

Card link 
													
<div class="card !shadow-none !rounded-none !h-auto !border-x-0 !border-t-0 !mb-0 !bg-light">
    <div class="relative sm:p-7.5 p-4 !pb-0 flex justify-between items-center flex-wrap">
        <h5 class="uppercase text-sm">Card title</h5>
    </div>
    <div class="sm:p-7.5 p-4">
        <p class="sm:text-sm">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" src="assets/images/card/3.png"
    <div class="border-t border-border py-4 px-5">
        <p class="sm:text-sm inline">Card footer</p>
        <a href="javascript:void(0);" class="card-link float-end">Card link</a>
    </div>
</div>

Copyright © Developed by DexignZone 2024