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

  1. Placeholder

  2. Placeholder

Placeholder.

Make use of Tailwind's unique placeholder styles to create visually consistent loading states that keep your interface looking polished while data is being loaded.

Placeholder
Basic Placeholder
Card image cap
Card title

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

Go somewhere
Card image cap

														
<div class="card overflow-hidden">
	<img class="card-img-top img-fluid" src="assets/images/product.jpg" alt="Card image cap">
	<div class="p-7.5">
		<h5 class="text-lg mb-2">Card title</h5>
		<p class="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 btn-primary">Go somewhere</a>
	</div>
</div>
<div class="card overflow-hidden">
		<img class="card-img-top img-fluid" src="assets/images/product.jpg" alt="Card image cap">
		<div class="p-7.5">
			<h5 class="text-lg mb-2">
				<span class="inline-block min-h-3.5 align-middle cursor-wait bg-current opacity-50 animate-placeholderglow w-1/2"></span>
			</h5>
			<p class="mb-4">
				<span class="inline-block min-h-3.5 align-middle cursor-wait bg-current opacity-50 animate-placeholderglow w-7/12"></span>
				<span class="inline-block min-h-3.5 align-middle cursor-wait bg-current opacity-50 animate-placeholderglow w-1/3"></span>
				<span class="inline-block min-h-3.5 align-middle cursor-wait bg-current opacity-50 animate-placeholderglow w-1/3"></span>
				<span class="inline-block min-h-3.5 align-middle cursor-wait bg-current opacity-50 animate-placeholderglow w-1/2"></span>
			</p>
			<a class="btn btn-primary min-h-3.5 align-middle cursor-wait pointer-events-none opacity-50 animate-placeholderglow w-1/2 before:inline-block"></a>
		</div>
	</div>
</div>
														
													
Placeholder Width
														
<div class="card shadow-none! rounded-none! h-auto! mb-0! border-b border-bordercolor">
	<span class="inline-block min-h-3.5 align-middle cursor-wait bg-current opacity-50 animate-placeholderglow w-1/2"></span>
	<span class="inline-block min-h-3.5 align-middle cursor-wait bg-current opacity-50 animate-placeholderglow w-3/4"></span>
	<span class="inline-block min-h-3.5 align-middle cursor-wait bg-current opacity-50 animate-placeholderglow" style="width: 25%;"></span>
</div>
														
													
Placeholder Animation

														
<div class="card shadow-none! rounded-none! h-auto! mb-0! border-b border-bordercolor">
	<span class="inline-block min-h-3.5 align-middle cursor-wait bg-current opacity-50 animate-placeholderglow w-full"></span>
	<span class="inline-block min-h-3.5 align-middle cursor-wait bg-current opacity-50 animate-placeholderwave w-full"></span>
</div>
														
													
Placeholder Sizes
														
<div class="card shadow-none! rounded-none! h-auto! mb-0! border-b border-bordercolor">
	<span class="inline-block min-h-[1.2em] align-middle cursor-wait bg-current opacity-50 animate-placeholderglow w-full"></span>
	<span class="inline-block min-h-3.5 align-middle cursor-wait bg-current opacity-50 animate-placeholderglow w-full"></span>
	<span class="inline-block min-h-[.8em] align-middle cursor-wait bg-current opacity-50 animate-placeholderglow w-full"></span>
	<span class="inline-block min-h-[.6em] align-middle cursor-wait bg-current opacity-50 animate-placeholderglow w-full"></span>
</div>
														
													
Placeholder Colors
														
<div class="card shadow-none! rounded-none! h-auto! mb-0! border-b border-bordercolor">
	<span class="inline-block min-h-3.5 align-middle cursor-wait bg-current opacity-50 animate-placeholderglow w-full"></span>
	<span class="inline-block min-h-3.5 align-middle cursor-wait opacity-50 animate-placeholderglow w-full bg-primary"></span>
	<span class="inline-block min-h-3.5 align-middle cursor-wait opacity-50 animate-placeholderglow w-full bg-secondary"></span>
	<span class="inline-block min-h-3.5 align-middle cursor-wait opacity-50 animate-placeholderglow w-full bg-success"></span>
	<span class="inline-block min-h-3.5 align-middle cursor-wait opacity-50 animate-placeholderglow w-full bg-danger"></span>
	<span class="inline-block min-h-3.5 align-middle cursor-wait opacity-50 animate-placeholderglow w-full bg-warning"></span>
	<span class="inline-block min-h-3.5 align-middle cursor-wait opacity-50 animate-placeholderglow w-full bg-info"></span>
	<span class="inline-block min-h-3.5 align-middle cursor-wait opacity-50 animate-placeholderglow w-full bg-light"></span>
	<span class="inline-block min-h-3.5 align-middle cursor-wait opacity-50 animate-placeholderglow w-full bg-dark"></span>
</div>