UI Components

Badges
Default Badges
  • Indigo
  • Emerald
  • Red
  • Yellow
  • Blue
  • Sky
  • Cyan
  • Orange
  • Purple
  • Dark
  • Secondary
  • Light
Rounded Badges
  • Indigo
  • Emerald
  • Red
  • Yellow
  • Blue
  • Sky
  • Cyan
  • Orange
  • Purple
  • Dark
  • Secondary
  • Light
Outline Badges
  • Indigo
  • Emerald
  • Red
  • Yellow
  • Blue
  • Sky
  • Cyan
  • Orange
  • Purple
  • Dark
  • Secondary
  • Light
Outline Rounded Badges
  • Indigo
  • Emerald
  • Red
  • Yellow
  • Blue
  • Sky
  • Cyan
  • Orange
  • Purple
  • Dark
  • Secondary
  • Light
Soft Badges
  • Indigo
  • Emerald
  • Red
  • Yellow
  • Blue
  • Sky
  • Cyan
  • Orange
  • Purple
  • Dark
  • Secondary
  • Light
Soft Rounded Badges
  • Indigo
  • Emerald
  • Red
  • Yellow
  • Blue
  • Sky
  • Cyan
  • Orange
  • Purple
  • Dark
  • Secondary
  • Light
Alerts
Alerts
A simple alert—check it out!
A simple alert—check it out!
A simple alert—check it out!
A simple alert—check it out!
A simple alert—check it out!
A simple alert—check it out!
A simple alert—check it out!
Soft Alerts
A simple alert—check it out!
A simple alert—check it out!
A simple alert—check it out!
A simple alert—check it out!
A simple alert—check it out!
A simple alert—check it out!
A simple alert—check it out!
Alert with icon
A simple alert—check it out!
A simple alert—check it out!
A simple alert—check it out!
A simple alert—check it out!
A simple alert—check it out!
Alert with Link
A simple alert—check it out! Click here!
A simple alert—check it out! Click here!
A simple alert—check it out! Click here!
A simple alert—check it out! Click here!
A simple alert—check it out! Click here!
Text Colors
Text Colors
  • .text-indigo-600
  • .text-emerald-600
  • .text-red-600
  • .text-yellow-500
  • .text-amber-500
  • .text-blue-600
  • .text-sky-500
  • .text-cyan-500
  • .text-orange-600
  • .text-purple-600
  • .text-slate-900
Background Colors
Background Colors
  • .bg-indigo-600
  • .bg-emerald-600
  • .bg-red-600
  • .bg-yellow-500
  • .bg-blue-600
  • .bg-sky-500
  • .bg-cyan-500
  • .bg-orange-600
  • .bg-purple-600
  • .bg-slate-800
  • .bg-slate-900
  • .bg-gray-50
  • .bg-white
Opacity
Opacity
  • .bg-indigo-600
  • .bg-indigo-600 .opacity-95
  • .bg-indigo-600 .opacity-90
  • .bg-indigo-600 .opacity-85
  • .bg-indigo-600 .opacity-80
  • .bg-indigo-600 .opacity-75
  • .bg-indigo-600 .opacity-70
  • .bg-indigo-600 .opacity-65
  • .bg-indigo-600 .opacity-60
  • .bg-indigo-600 .opacity-55
  • .bg-indigo-600 .opacity-50
  • .bg-indigo-600 .opacity-45
  • .bg-indigo-600 .opacity-40
  • .bg-indigo-600 .opacity-35
  • .bg-indigo-600 .opacity-30
  • .bg-indigo-600 .opacity-25
  • .bg-indigo-600 .opacity-20
  • .bg-indigo-600 .opacity-15
  • .bg-indigo-600 .opacity-10
  • .bg-indigo-600 .opacity-5
  • .bg-indigo-600 .opacity-0
Accordions
Accordion

Form Inputs
Form Inputs
Form Checkbox
Form Radio
Shadows
Shadows
  • .shadow
  • .shadow-sm
  • .shadow-md
  • .shadow-lg
  • .shadow-xl
  • .shadow-2xl
  • .shadow-none
Borders
Borders
  • .border-0
  • .border-2
  • .border-4
  • .border-8
  • .border
  • .border-t
  • .border-s
  • .border-b
  • .border-e
  • .border-x
  • .border-y
Border Styles
  • .border-solid
  • .border-dashed
  • .border-dotted
  • .border-double
Border Radious
  • .rounded-none
  • .rounded-sm
  • .rounded
  • .rounded-md
  • .rounded-lg
  • .rounded-xl
  • .rounded-2xl
  • .rounded-3xl
  • .rounded-full
Pagination
Pagination
Modals
Modals
Modal

Add Payment Method

Your wishlist is empty.

Create your first wishlist request...

Create a new wishlist
Tables
Tables
Lessons Time
Lesson 1 Watch Free
Lesson 2
Lesson 3
Lesson 4
Heading
Heading
  • Hello (.text-xs)
  • Hello (.text-sm)
  • Hello (.text-base)
  • Hello (.text-lg)
  • Hello (.text-xl)
  • Hello (.text-2xl)
  • Hello (.text-3xl)
  • Hello (.text-4xl)
  • Hello (.text-5xl)
  • Hello (.text-6xl)
  • Hello (.text-7xl)
  • Hello (.text-8xl)
  • Hello (.text-9xl)
Font Weight
Font Weight

.font-thin : The quick brown fox jumps over the lazy dog.

.font-extralight : The quick brown fox jumps over the lazy dog.

.font-light : The quick brown fox jumps over the lazy dog.

.font-normal : The quick brown fox jumps over the lazy dog.

.font-medium : The quick brown fox jumps over the lazy dog.

.font-semibold : The quick brown fox jumps over the lazy dog.

.font-bold : The quick brown fox jumps over the lazy dog.

.font-extrabold : The quick brown fox jumps over the lazy dog.

Icons
Icons
Feather Icons

There are 280+ feather icons and you can get all icons info from here: https://feathericons.com/

Ex. <i data-feather="mail" class="size-8"> </i>
Material Design Icons

There are 4400+ Material Design icons and you can get all icons info from here: https://materialdesignicons.com/

Ex. <i class="mdi mdi-home"> </i>
Iconscout (Unicons) Icons

There are 1100+ Iconscout (Unicons) Icons and you can get all icons info from here: https://www.flaticon.com/packs/basic-icon

Ex.
<i class="uil uil-0-plus"></i>
</span>
LTR RTL