Chat List

Show All

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

Online

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
Live Documentation Help & getting started
Dark Mode
Colors

Colors.

Make use of Tailwind's unique Colors styles to improve accessibility. CSS offers a wide range of color properties and functions to customize and harmonize your website's visual appearance.

Colors

Solid Background Colors

.bg-primary
.bg-primarylight
.bg-secondary
.bg-secondarylight
.bg-success
.bg-successlight
.bg-danger
.bg-dangerlight
.bg-warning
.bg-warninglight
.bg-info
.bg-infolight
.bg-light
.bg-dark
.bg-darklight
.bg-bodybg
.bg-black
.bg-white
.bg-transparent
														
<div class="grid grid-cols-12 gap-6">
    <div class="xl:col-span-3 col-span-12 p-3 bg-primary text-white">.bg-primary</div>
    <div class="xl:col-span-3 col-span-12 p-3 bg-primarylight text-primary">.bg-primarylight</div>
    <div class="xl:col-span-3 col-span-12 p-3 bg-secondary dark:bg-[#1f2025] text-white">.bg-secondary</div>
    <div class="xl:col-span-3 col-span-12 p-3 bg-secondarylight text-secondary">.bg-secondarylight</div>
    <div class="xl:col-span-3 col-span-12 p-3 bg-success text-white">.bg-success</div>
    <div class="xl:col-span-3 col-span-12 p-3 bg-successlight text-success">.bg-successlight</div>
    <div class="xl:col-span-3 col-span-12 p-3 bg-danger text-white">.bg-danger</div>
    <div class="xl:col-span-3 col-span-12 p-3 bg-dangerlight text-danger">.bg-dangerlight</div>
    <div class="xl:col-span-3 col-span-12 p-3 bg-warning text-secondary">.bg-warning</div>
    <div class="xl:col-span-3 col-span-12 p-3 bg-warninglight text-warning">.bg-warninglight</div>
    <div class="xl:col-span-3 col-span-12 p-3 bg-info text-secondary">.bg-info</div>
    <div class="xl:col-span-3 col-span-12 p-3 bg-infolight text-info">.bg-infolight</div>
    <div class="xl:col-span-3 col-span-12 p-3 bg-light text-textdark">.bg-light</div>
    <div class="xl:col-span-3 col-span-12 p-3 bg-dark text-white">.bg-dark</div>
    <div class="xl:col-span-3 col-span-12 p-3 bg-darklight text-black">.bg-darklight</div>
    <div class="xl:col-span-3 col-span-12 p-3 bg-bodybg text-body">.bg-bodybg</div>
    <div class="xl:col-span-3 col-span-12 p-3 bg-black text-white">.bg-black</div>
    <div class="xl:col-span-3 col-span-12 p-3 bg-white text-black">.bg-white</div>
    <div class="xl:col-span-3 col-span-12 p-3 bg-transparent text-body">.bg-transparent</div>
</div>

Background Gradient

														
<div class="grid grid-cols-12 gap-6">
    <div class="xl:col-span-3 col-span-6 h-14 bg-gradient-to-r from-cyan-500 to-blue-500"></div>
    <div class="xl:col-span-3 col-span-6 h-14 bg-gradient-to-r from-sky-500 to-indigo-500"></div>
    <div class="xl:col-span-3 col-span-6 h-14 bg-gradient-to-r from-violet-500 to-fuchsia-500"></div>
    <div class="xl:col-span-3 col-span-6 h-14 bg-gradient-to-r from-fuchsia-500 to-pink-500"></div>
    <div class="xl:col-span-3 col-span-6 h-14 bg-gradient-to-r from-pink-500 to-rose-500"></div>
    <div class="xl:col-span-3 col-span-6 h-14 bg-gradient-to-r from-fuchsia-600 to-pink-600"></div>
    <div class="xl:col-span-3 col-span-6 h-14 bg-gradient-to-r from-blue-800 to-indigo-900"></div>
    <div class="xl:col-span-3 col-span-6 h-14 bg-gradient-to-r from-emerald-500 to-emerald-900"></div>
    <div class="xl:col-span-3 col-span-6 h-14 bg-gradient-to-r from-teal-200 to-teal-500"></div>
    <div class="xl:col-span-3 col-span-6 h-14 bg-gradient-to-r from-teal-400 to-yellow-200"></div>
    <div class="xl:col-span-3 col-span-6 h-14 bg-gradient-to-r from-violet-200 to-pink-200"></div>
    <div class="xl:col-span-3 col-span-6 h-14 bg-gradient-to-r from-pink-200 via-rose-400 to-pink-600"></div>
    <div class="xl:col-span-3 col-span-6 h-14 bg-gradient-to-b from-pink-200 via-rose-400 to-rose-600"></div>
    <div class="xl:col-span-3 col-span-6 h-14 bg-gradient-to-b from-pink-200 via-purple-400 to-indigo-600"></div>
    <div class="xl:col-span-3 col-span-6 h-14 bg-gradient-to-l from-gray-800 via-blue-700 to-gray-900"></div>
    <div class="xl:col-span-3 col-span-6 h-14 bg-gradient-to-r from-pink-500 via-rose-500 to-pink-500"></div>
    <div class="xl:col-span-3 col-span-6 h-14 bg-gradient-to-br from-cyan-200 via-blue-400 to-indigo-600"></div>
    <div class="xl:col-span-3 col-span-6 h-14 bg-gradient-to-r from-pink-200 via-rose-400 to-rose-600"></div>
    <div class="xl:col-span-3 col-span-6 h-14 bg-gradient-to-r from-blue-200 via-blue-400 to-blue-600"></div>
</div>

Background Opacity

This is default success background
This is 75% opacity success background
This is 50% opacity success background
This is 25% opacity success background
This is 10% opacity success background
														
<div class="bg-success p-2 text-white">This is default success background</div>
<div class="bg-success/75 p-2 text-white">This is 75% opacity success background</div>
<div class="bg-success/50 p-2 text-secondary">This is 50% opacity success background</div>
<div class="bg-success/25 p-2 text-secondary">This is 25% opacity success background</div>
<div class="bg-success/10 p-2 text-secondary">This is 10% opacity success background</div>

Other Colors

.blue-100
.blue-200
.blue-300
.blue-400
.blue-500
.blue-600
.blue-700
.blue-800
.blue-900
.indigo-100
.indigo-200
.indigo-300
.indigo-400
.indigo-500
.indigo-600
.indigo-700
.indigo-800
.indigo-900
.lime-100
.lime-200
.lime-300
.lime-400
.lime-500
.lime-600
.lime-700
.lime-800
.lime-900
.pink-100
.pink-200
.pink-300
.pink-400
.pink-500
.pink-600
.pink-700
.pink-800
.pink-900
.rose-100
.rose-200
.rose-300
.rose-400
.rose-500
.rose-600
.rose-700
.rose-800
.rose-900
.violet-100
.violet-200
.violet-300
.violet-400
.violet-500
.violet-600
.violet-700
.violet-800
.violet-900
.amber-100
.amber-200
.amber-300
.amber-400
.amber-500
.amber-600
.amber-700
.amber-800
.amber-900
.green-100
.green-200
.green-300
.green-400
.green-500
.green-600
.green-700
.green-800
.green-900
.teal-100
.teal-200
.teal-300
.teal-400
.teal-500
.teal-600
.teal-700
.teal-800
.teal-900
.cyan-100
.cyan-200
.cyan-300
.cyan-400
.cyan-500
.cyan-600
.cyan-700
.cyan-800
.cyan-900
.stone-100
.stone-200
.stone-300
.stone-400
.stone-500
.stone-600
.stone-700
.stone-800
.stone-900
.gray-100
.gray-200
.gray-300
.gray-400
.gray-500
.gray-600
.gray-700
.gray-800
.gray-900
.bg-black
.bg-white
														
<div class="grid grid-cols-12 gap-6">
    <div class="xl:col-span-3 sm:col-span-6 col-span-12">
        <div class="p-3 mb-2 bg-blue-100 text-white">.blue-100</div>
        <div class="p-3 mb-2 bg-blue-200 text-white">.blue-200</div>
        <div class="p-3 mb-2 bg-blue-300 text-white">.blue-300</div>
        <div class="p-3 mb-2 bg-blue-400 text-white">.blue-400</div>
        <div class="p-3 mb-2 bg-blue-500 text-white">.blue-500</div>
        <div class="p-3 mb-2 bg-blue-600 text-white">.blue-600</div>
        <div class="p-3 mb-2 bg-blue-700 text-white">.blue-700</div>
        <div class="p-3 mb-2 bg-blue-800 text-white">.blue-800</div>
        <div class="p-3 mb-2 bg-blue-900 text-white">.blue-900</div>
    </div>
    <div class="xl:col-span-3 sm:col-span-6 col-span-12">
        <div class="p-3 mb-2 bg-indigo-100 text-white">.indigo-100</div>
        <div class="p-3 mb-2 bg-indigo-200 text-white">.indigo-200</div>
        <div class="p-3 mb-2 bg-indigo-300 text-white">.indigo-300</div>
        <div class="p-3 mb-2 bg-indigo-400 text-white">.indigo-400</div>
        <div class="p-3 mb-2 bg-indigo-500 text-white">.indigo-500</div>
        <div class="p-3 mb-2 bg-indigo-600 text-white">.indigo-600</div>
        <div class="p-3 mb-2 bg-indigo-700 text-white">.indigo-700</div>
        <div class="p-3 mb-2 bg-indigo-800 text-white">.indigo-800</div>
        <div class="p-3 mb-2 bg-indigo-900 text-white">.indigo-900</div>
    </div>
    <div class="xl:col-span-3 sm:col-span-6 col-span-12">
        <div class="p-3 mb-2 bg-lime-100 text-white">.lime-100</div>
        <div class="p-3 mb-2 bg-lime-200 text-white">.lime-200</div>
        <div class="p-3 mb-2 bg-lime-300 text-white">.lime-300</div>
        <div class="p-3 mb-2 bg-lime-400 text-white">.lime-400</div>
        <div class="p-3 mb-2 bg-lime-500 text-white">.lime-500</div>
        <div class="p-3 mb-2 bg-lime-600 text-white">.lime-600</div>
        <div class="p-3 mb-2 bg-lime-700 text-white">.lime-700</div>
        <div class="p-3 mb-2 bg-lime-800 text-white">.lime-800</div>
        <div class="p-3 mb-2 bg-lime-900 text-white">.lime-900</div>
    </div>
    <div class="xl:col-span-3 sm:col-span-6 col-span-12">
        <div class="p-3 mb-2 bg-pink-100 text-white">.pink-100</div>
        <div class="p-3 mb-2 bg-pink-200 text-white">.pink-200</div>
        <div class="p-3 mb-2 bg-pink-300 text-white">.pink-300</div>
        <div class="p-3 mb-2 bg-pink-400 text-white">.pink-400</div>
        <div class="p-3 mb-2 bg-pink-500 text-white">.pink-500</div>
        <div class="p-3 mb-2 bg-pink-600 text-white">.pink-600</div>
        <div class="p-3 mb-2 bg-pink-700 text-white">.pink-700</div>
        <div class="p-3 mb-2 bg-pink-800 text-white">.pink-800</div>
        <div class="p-3 mb-2 bg-pink-900 text-white">.pink-900</div>
    </div>
    <div class="xl:col-span-3 sm:col-span-6 col-span-12">
        <div class="p-3 mb-2 bg-rose-100 text-white">.rose-100</div>
        <div class="p-3 mb-2 bg-rose-200 text-white">.rose-200</div>
        <div class="p-3 mb-2 bg-rose-300 text-white">.rose-300</div>
        <div class="p-3 mb-2 bg-rose-400 text-white">.rose-400</div>
        <div class="p-3 mb-2 bg-rose-500 text-white">.rose-500</div>
        <div class="p-3 mb-2 bg-rose-600 text-white">.rose-600</div>
        <div class="p-3 mb-2 bg-rose-700 text-white">.rose-700</div>
        <div class="p-3 mb-2 bg-rose-800 text-white">.rose-800</div>
        <div class="p-3 mb-2 bg-rose-900 text-white">.rose-900</div>
    </div>
    <div class="xl:col-span-3 sm:col-span-6 col-span-12">
        <div class="p-3 mb-2 bg-violet-100 text-white">.violet-100</div>
        <div class="p-3 mb-2 bg-violet-200 text-white">.violet-200</div>
        <div class="p-3 mb-2 bg-violet-300 text-white">.violet-300</div>
        <div class="p-3 mb-2 bg-violet-400 text-white">.violet-400</div>
        <div class="p-3 mb-2 bg-violet-500 text-white">.violet-500</div>
        <div class="p-3 mb-2 bg-violet-600 text-white">.violet-600</div>
        <div class="p-3 mb-2 bg-violet-700 text-white">.violet-700</div>
        <div class="p-3 mb-2 bg-violet-800 text-white">.violet-800</div>
        <div class="p-3 mb-2 bg-violet-900 text-white">.violet-900</div>
    </div>
    <div class="xl:col-span-3 sm:col-span-6 col-span-12">
        <div class="p-3 mb-2 bg-amber-100 text-white">.amber-100</div>
        <div class="p-3 mb-2 bg-amber-200 text-white">.amber-200</div>
        <div class="p-3 mb-2 bg-amber-300 text-white">.amber-300</div>
        <div class="p-3 mb-2 bg-amber-400 text-white">.amber-400</div>
        <div class="p-3 mb-2 bg-amber-500 text-white">.amber-500</div>
        <div class="p-3 mb-2 bg-amber-600 text-white">.amber-600</div>
        <div class="p-3 mb-2 bg-amber-700 text-white">.amber-700</div>
        <div class="p-3 mb-2 bg-amber-800 text-white">.amber-800</div>
        <div class="p-3 mb-2 bg-amber-900 text-white">.amber-900</div>
    </div>
    <div class="xl:col-span-3 sm:col-span-6 col-span-12">
        <div class="p-3 mb-2 bg-green-100 text-white">.green-100</div>
        <div class="p-3 mb-2 bg-green-200 text-white">.green-200</div>
        <div class="p-3 mb-2 bg-green-300 text-white">.green-300</div>
        <div class="p-3 mb-2 bg-green-400 text-white">.green-400</div>
        <div class="p-3 mb-2 bg-green-500 text-white">.green-500</div>
        <div class="p-3 mb-2 bg-green-600 text-white">.green-600</div>
        <div class="p-3 mb-2 bg-green-700 text-white">.green-700</div>
        <div class="p-3 mb-2 bg-green-800 text-white">.green-800</div>
        <div class="p-3 mb-2 bg-green-900 text-white">.green-900</div>
    </div>
    <div class="xl:col-span-3 sm:col-span-6 col-span-12">
        <div class="p-3 mb-2 bg-teal-100 text-white">.teal-100</div>
        <div class="p-3 mb-2 bg-teal-200 text-white">.teal-200</div>
        <div class="p-3 mb-2 bg-teal-300 text-white">.teal-300</div>
        <div class="p-3 mb-2 bg-teal-400 text-white">.teal-400</div>
        <div class="p-3 mb-2 bg-teal-500 text-white">.teal-500</div>
        <div class="p-3 mb-2 bg-teal-600 text-white">.teal-600</div>
        <div class="p-3 mb-2 bg-teal-700 text-white">.teal-700</div>
        <div class="p-3 mb-2 bg-teal-800 text-white">.teal-800</div>
        <div class="p-3 mb-2 bg-teal-900 text-white">.teal-900</div>
    </div>
    <div class="xl:col-span-3 sm:col-span-6 col-span-12">
        <div class="p-3 mb-2 bg-cyan-100 text-white">.cyan-100</div>
        <div class="p-3 mb-2 bg-cyan-200 text-white">.cyan-200</div>
        <div class="p-3 mb-2 bg-cyan-300 text-white">.cyan-300</div>
        <div class="p-3 mb-2 bg-cyan-400 text-white">.cyan-400</div>
        <div class="p-3 mb-2 bg-cyan-500 text-white">.cyan-500</div>
        <div class="p-3 mb-2 bg-cyan-600 text-white">.cyan-600</div>
        <div class="p-3 mb-2 bg-cyan-700 text-white">.cyan-700</div>
        <div class="p-3 mb-2 bg-cyan-800 text-white">.cyan-800</div>
        <div class="p-3 mb-2 bg-cyan-900 text-white">.cyan-900</div>
    </div>
    <div class="xl:col-span-3 sm:col-span-6 col-span-12">
        <div class="p-3 mb-2 bg-stone-100 text-white">.stone-100</div>
        <div class="p-3 mb-2 bg-stone-200 text-white">.stone-200</div>
        <div class="p-3 mb-2 bg-stone-300 text-white">.stone-300</div>
        <div class="p-3 mb-2 bg-stone-400 text-white">.stone-400</div>
        <div class="p-3 mb-2 bg-stone-500 text-white">.stone-500</div>
        <div class="p-3 mb-2 bg-stone-600 text-white">.stone-600</div>
        <div class="p-3 mb-2 bg-stone-700 text-white">.stone-700</div>
        <div class="p-3 mb-2 bg-stone-800 text-white">.stone-800</div>
        <div class="p-3 mb-2 bg-stone-900 text-white">.stone-900</div>
    </div>
    <div class="xl:col-span-3 sm:col-span-6 col-span-12">
        <div class="p-3 mb-2 bg-gray-100 text-white">.gray-100</div>
        <div class="p-3 mb-2 bg-gray-200 text-white">.gray-200</div>
        <div class="p-3 mb-2 bg-gray-300 text-white">.gray-300</div>
        <div class="p-3 mb-2 bg-gray-400 text-white">.gray-400</div>
        <div class="p-3 mb-2 bg-gray-500 text-white">.gray-500</div>
        <div class="p-3 mb-2 bg-gray-600 text-white">.gray-600</div>
        <div class="p-3 mb-2 bg-gray-700 text-white">.gray-700</div>
        <div class="p-3 mb-2 bg-gray-800 text-white">.gray-800</div>
        <div class="p-3 mb-2 bg-gray-900 text-white">.gray-900</div>
    </div>
    <div class="xl:col-span-3 sm:col-span-6 col-span-12">
        <div class="p-3 mb-2 bg-black text-white">.bg-black</div>
        <div class="p-3 mb-2 bg-white border">.bg-white</div>
    </div>
</div>

Copyright © Developed by DexignZone 2024

Customize

Customize Your Style And Preferences
THEME
Dark Mode
Sidebar Position Static
Header Static
Header Horizontal

Sidebar Style

Primary Color

Navigation Header

Header Color

Sidebar Color

ResetPreview
*Note : This theme switcher is not part of product. It is only for demo. you will get all guideline in documentation. please check documentation.
Delete All Cookie

Select A Demo

Demo 1
Demo 1
Demo 2
Demo 2
Demo 3
Demo 3
Demo 4
Demo 4
Demo 5
Demo 5
Demo 6
Demo 6
Demo 7
Demo 7
Demo 8
Demo 8
*Note : This theme switcher is not part of product. It is only for demo. you will get all guideline in documentation. please check documentation.