search results:

    • Standard
    • React
    Pricing Learn Community
    • + D
    • Light
    • Dark
    • System
    logo TW Elements
    • Getting started
      • Quick start
      • Tutorials
      • Design system
      • Local installation
      • Optimization
      • Dark mode
      • Theming
      • Changelog
      • Migrating to v2
      • Internationalization guide
      • Class customization
      • Icons Integration
    • CommercialNew
      • Pricing
      • License
      • Installation
      • Git & repository
      • Premium Support
    • Integrations
      • Angular
      • ASP.NET
      • Django
      • Express
      • Laravel
      • Next
      • Nuxt
      • Qwik
      • React
      • Remix
      • Solid
      • Svelte
      • SvelteKit
      • Vue
    • Content & styles
      • Animations
      • Animations Extended
      • Colors
      • Dividers
      • Figures
      • Headings
      • Hover effects
      • Icons
      • Images
      • Mask
      • Shadows
      • Typography
    • Navigation
      • Breadcrumbs
      • Footer
      • Headers
      • Mega menu
      • Navbar
      • Offcanvas
      • Pagination
      • Pills
      • Scrollspy
      • Sidenav
      • Tabs
    • Components
      • Accordion
      • Alerts
      • Avatar
      • Badges
      • Button group
      • Buttons
      • Cards
      • Carousel
      • Chips
      • Collapse
      • Dropdown
      • Gallery
      • Jumbotron
      • Lightbox
      • Link
      • List group
      • Modal
      • Notifications
      • Paragraphs
      • Placeholders
      • Popconfirm
      • Popover
      • Progress
      • Rating
      • Scroll back to top button
      • Social buttons
      • Spinners
      • Stepper
      • Testimonials
      • Timeline
      • Toast
      • Tooltip
      • Video
      • Video carousel
    • Forms
      • Autocomplete
      • Checkbox
      • Datepicker
      • Datetimepicker
      • File input
      • Form templates
      • Input Group
      • Inputs
      • Login form
      • Multi range slider
      • Radio
      • Range
      • Registration form
      • Search
      • Select
      • Switch
      • Textarea
      • Timepicker
      • Validation
    • Data
      • Charts
      • Charts advanced
      • Datatables
      • Tables
    • Methods
      • Clipboard
      • Infinite scroll
      • Lazy loading
      • Loading management
      • Ripple
      • Scrollbar
      • Smooth scroll
      • Sticky
      • Touch
    • Design Blocks
      • Admin Charts
      • Admin Complex
      • Admin Forms
      • Admin Maps
      • Admin Navigation
      • Admin tables
      • Banners
      • Contact
      • Content
      • CTA
      • FAQ
      • Features
      • Headers
      • Hero / Intro sections
      • Logo clouds
      • Mega menu
      • News
      • Newsletter
      • Pricing
      • Projects
      • Stats
      • Stats admin
      • Team
      • Testimonials
    • Tools
      • Button generator
      • Card generator
      • Flexbox generator
      • Footer generator
      • Form builder
      • Grid generator
      • Icon generator
      • Instagram Filters generator
      • Logo generator
      • Table generator
      • Typography generator
    • Coming Soon
      • Angular
      • Builder
      • Templates
      • Vue
    • Resources
      • Playground
      • YouTube Channel
      • Private FB Group
      • Newsletter
      • UI Design course New
      • UI / UX tips

    Colors

    Tailwind CSS Colors

    TW elements are supported by an extensive Material Design color system that themes our styles and components. This enables more comprehensive customization and extension for any project.


    Theme

    Main color palette.

    Primary (#3B71CA)

    Secondary (#9FA6B2)

    Success (#14A44D)

    Danger (#DC4C64)

    Warning (#E4A11B)

    Info (#54B4D3)

    Light (#F9FAFB)

    Dark (#1F2937)

    • HTML
            
                
          <div class="grid gap-4 xl:grid-cols-4 xl:grid-rows-2">
            <div
              class="flex h-28 w-full items-center justify-center rounded-lg bg-primary">
              <p class="text-neutral-50">Primary (#3B71CA)</p>
            </div>
            <div
              class="flex h-28 w-full items-center justify-center rounded-lg bg-secondary">
              <p class="text-neutral-50">Secondary (#9FA6B2)</p>
            </div>
            <div
              class="flex h-28 w-full items-center justify-center rounded-lg bg-success">
              <p class="text-neutral-50">Success (#14A44D)</p>
            </div>
            <div
              class="flex h-28 w-full items-center justify-center rounded-lg bg-danger">
              <p class="text-neutral-50">Danger (#DC4C64)</p>
            </div>
            <div
              class="flex h-28 w-full items-center justify-center rounded-lg bg-warning">
              <p class="text-neutral-50">Warning (#E4A11B)</p>
            </div>
            <div
              class="flex h-28 w-full items-center justify-center rounded-lg bg-info">
              <p class="text-neutral-50">Info (#54B4D3)</p>
            </div>
            <div
              class="flex h-28 w-full items-center justify-center rounded-lg bg-neutral-50">
              <p class="text-neutral-800">Light (#F9FAFB)</p>
            </div>
            <div
              class="flex h-28 w-full items-center justify-center rounded-lg bg-neutral-800 dark:bg-neutral-900">
              <p class="text-neutral-50">Dark (#1F2937)</p>
            </div>
          </div>
          
            
        

    Hey there 👋 we're excited about TW elements and want to see it grow! If you enjoy it, help the project grow by sharing it with your peers. Every share counts, thank you!

    Shades

    Palette of color shades.

    Primary

    50

    #F1F5FB

    100

    #E3EBF7

    200

    #C7D7F0

    300

    #ABC2E8

    400

    #8FAEE0

    500

    #6590D5

    600

    #3061AF

    700

    #285192

    800

    #204075

    900

    #183058

    Secondary

    50

    #F8F9F9

    100

    #F1F2F4

    200

    #E4E6E9

    300

    #D6D9DE

    400

    #C8CCD3

    500

    #B3B9C2

    600

    #848D9C

    700

    #6B7585

    800

    #565D6B

    900

    #404650

    Success

    50

    #EAFCF2

    100

    #D6FAE4

    200

    #ACF5C9

    300

    #83F0AE

    400

    #59EA93

    500

    #1CE26B

    600

    #118C42

    700

    #0E7537

    800

    #0C5D2C

    900

    #094621

    Danger

    50

    #FCF2F4

    100

    #FAE5E9

    200

    #F5CCD3

    300

    #F0B2BD

    400

    #EB99A6

    500

    #E37285

    600

    #D42A46

    700

    #B0233A

    800

    #8D1C2F

    900

    #6A1523

    Warning

    50

    #FDF8EF

    100

    #FBF2DE

    200

    #F7E4BE

    300

    #F4D79D

    400

    #F0C97D

    500

    #EAB54C

    600

    #C48A17

    700

    #A37313

    800

    #825C0F

    900

    #62450B

    Info

    50

    #F3FAFC

    100

    #E7F4F9

    200

    #CEE9F2

    300

    #B6DFEC

    400

    #9ED4E6

    500

    #79C4DC

    600

    #34A4CA

    700

    #2B89A8

    800

    #236D86

    900

    #1A5265

    • HTML
            
                
          <div>
            <div class="mb-6 grid gap-4 xl:grid-cols-11 xl:grid-rows-1">
              <div class="h-16 w-full">Primary</div>
              <div>
                <div class="mb-4 h-16 w-full rounded-lg bg-primary-50"></div>
                <p class="text-xs font-medium">50</p>
                <p class="text-xs text-neutral-500 dark:text-neutral-400">
                  #F1F5FB
                </p>
              </div>
              <div>
                <div class="mb-4 h-16 w-full rounded-lg bg-primary-100"></div>
                <p class="text-xs font-medium">100</p>
                <p class="text-xs text-neutral-500 dark:text-neutral-400">
                  #E3EBF7
                </p>
              </div>
              <div>
                <div class="mb-4 h-16 w-full rounded-lg bg-primary-200"></div>
                <p class="text-xs font-medium">200</p>
                <p class="text-xs text-neutral-500 dark:text-neutral-400">
                  #C7D7F0
                </p>
              </div>
              <div>
                <div class="mb-4 h-16 w-full rounded-lg bg-primary-300"></div>
                <p class="text-xs font-medium">300</p>
                <p class="text-xs text-neutral-500 dark:text-neutral-400">
                  #ABC2E8
                </p>
              </div>
              <div>
                <div class="mb-4 h-16 w-full rounded-lg bg-primary-400"></div>
                <p class="text-xs font-medium">400</p>
                <p class="text-xs text-neutral-500 dark:text-neutral-400">
                  #8FAEE0
                </p>
              </div>
              <div>
                <div class="mb-4 h-16 w-full rounded-lg bg-primary-500"></div>
                <p class="text-xs font-medium">500</p>
                <p class="text-xs text-neutral-500 dark:text-neutral-400">
                  #6590D5
                </p>
              </div>
              <div>
                <div class="mb-4 h-16 w-full rounded-lg bg-primary-600"></div>
                <p class="text-xs font-medium">600</p>
                <p class="text-xs text-neutral-500 dark:text-neutral-400">
                  #3061AF
                </p>
              </div>
              <div>
                <div class="mb-4 h-16 w-full rounded-lg bg-primary-700"></div>
                <p class="text-xs font-medium">700</p>
                <p class="text-xs text-neutral-500 dark:text-neutral-400">
                  #285192
                </p>
              </div>
              <div>
                <div class="mb-4 h-16 w-full rounded-lg bg-primary-800"></div>
                <p class="text-xs font-medium">800</p>
                <p class="text-xs text-neutral-500 dark:text-neutral-400">
                  #204075
                </p>
              </div>
              <div>
                <div class="mb-4 h-16 w-full rounded-lg bg-primary-900"></div>
                <p class="text-xs font-medium">900</p>
                <p class="text-xs text-neutral-500 dark:text-neutral-400">
                  #183058
                </p>
              </div>
            </div>
            <div class="mb-6 grid gap-4 xl:grid-cols-11 xl:grid-rows-1">
              <div class="h-16 w-full">Secondary</div>
              <div>
                <div class="mb-4 h-16 w-full rounded-lg bg-secondary-50"></div>
                <p class="text-xs font-medium">50</p>
                <p class="text-xs text-neutral-500 dark:text-neutral-400">
                  #F8F9F9
                </p>
              </div>
              <div>
                <div class="mb-4 h-16 w-full rounded-lg bg-secondary-100"></div>
                <p class="text-xs font-medium">100</p>
                <p class="text-xs text-neutral-500 dark:text-neutral-400">
                  #F1F2F4
                </p>
              </div>
              <div>
                <div class="mb-4 h-16 w-full rounded-lg bg-secondary-200"></div>
                <p class="text-xs font-medium">200</p>
                <p class="text-xs text-neutral-500 dark:text-neutral-400">
                  #E4E6E9
                </p>
              </div>
              <div>
                <div class="mb-4 h-16 w-full rounded-lg bg-secondary-300"></div>
                <p class="text-xs font-medium">300</p>
                <p class="text-xs text-neutral-500 dark:text-neutral-400">
                  #D6D9DE
                </p>
              </div>
              <div>
                <div class="mb-4 h-16 w-full rounded-lg bg-secondary-400"></div>
                <p class="text-xs font-medium">400</p>
                <p class="text-xs text-neutral-500 dark:text-neutral-400">
                  #C8CCD3
                </p>
              </div>
              <div>
                <div class="mb-4 h-16 w-full rounded-lg bg-secondary-500"></div>
                <p class="text-xs font-medium">500</p>
                <p class="text-xs text-neutral-500 dark:text-neutral-400">
                  #B3B9C2
                </p>
              </div>
              <div>
                <div class="mb-4 h-16 w-full rounded-lg bg-secondary-600"></div>
                <p class="text-xs font-medium">600</p>
                <p class="text-xs text-neutral-500 dark:text-neutral-400">
                  #848D9C
                </p>
              </div>
              <div>
                <div class="mb-4 h-16 w-full rounded-lg bg-secondary-700"></div>
                <p class="text-xs font-medium">700</p>
                <p class="text-xs text-neutral-500 dark:text-neutral-400">
                  #6B7585
                </p>
              </div>
              <div>
                <div class="mb-4 h-16 w-full rounded-lg bg-secondary-800"></div>
                <p class="text-xs font-medium">800</p>
                <p class="text-xs text-neutral-500 dark:text-neutral-400">
                  #565D6B
                </p>
              </div>
              <div>
                <div class="mb-4 h-16 w-full rounded-lg bg-secondary-900"></div>
                <p class="text-xs font-medium">900</p>
                <p class="text-xs text-neutral-500 dark:text-neutral-400">
                  #404650
                </p>
              </div>
            </div>
            <div class="mb-6 grid gap-4 xl:grid-cols-11 xl:grid-rows-1">
              <div class="h-16 w-full">Success</div>
              <div>
                <div class="mb-4 h-16 w-full rounded-lg bg-success-50"></div>
                <p class="text-xs font-medium">50</p>
                <p class="text-xs text-neutral-500 dark:text-neutral-400">
                  #EAFCF2
                </p>
              </div>
              <div>
                <div class="mb-4 h-16 w-full rounded-lg bg-success-100"></div>
                <p class="text-xs font-medium">100</p>
                <p class="text-xs text-neutral-500 dark:text-neutral-400">
                  #D6FAE4
                </p>
              </div>
              <div>
                <div class="mb-4 h-16 w-full rounded-lg bg-success-200"></div>
                <p class="text-xs font-medium">200</p>
                <p class="text-xs text-neutral-500 dark:text-neutral-400">
                  #ACF5C9
                </p>
              </div>
              <div>
                <div class="mb-4 h-16 w-full rounded-lg bg-success-300"></div>
                <p class="text-xs font-medium">300</p>
                <p class="text-xs text-neutral-500 dark:text-neutral-400">
                  #83F0AE
                </p>
              </div>
              <div>
                <div class="mb-4 h-16 w-full rounded-lg bg-success-400"></div>
                <p class="text-xs font-medium">400</p>
                <p class="text-xs text-neutral-500 dark:text-neutral-400">
                  #59EA93
                </p>
              </div>
              <div>
                <div class="mb-4 h-16 w-full rounded-lg bg-success-500"></div>
                <p class="text-xs font-medium">500</p>
                <p class="text-xs text-neutral-500 dark:text-neutral-400">
                  #1CE26B
                </p>
              </div>
              <div>
                <div class="mb-4 h-16 w-full rounded-lg bg-success-600"></div>
                <p class="text-xs font-medium">600</p>
                <p class="text-xs text-neutral-500 dark:text-neutral-400">
                  #118C42
                </p>
              </div>
              <div>
                <div class="mb-4 h-16 w-full rounded-lg bg-success-700"></div>
                <p class="text-xs font-medium">700</p>
                <p class="text-xs text-neutral-500 dark:text-neutral-400">
                  #0E7537
                </p>
              </div>
              <div>
                <div class="mb-4 h-16 w-full rounded-lg bg-success-800"></div>
                <p class="text-xs font-medium">800</p>
                <p class="text-xs text-neutral-500 dark:text-neutral-400">
                  #0C5D2C
                </p>
              </div>
              <div>
                <div class="mb-4 h-16 w-full rounded-lg bg-success-900"></div>
                <p class="text-xs font-medium">900</p>
                <p class="text-xs text-neutral-500 dark:text-neutral-400">
                  #094621
                </p>
              </div>
            </div>
            <div class="mb-6 grid gap-4 xl:grid-cols-11 xl:grid-rows-1">
              <div class="h-16 w-full ">Danger</div>
              <div>
                <div class="mb-4 h-16 w-full rounded-lg bg-danger-50"></div>
                <p class="text-xs font-medium">50</p>
                <p class="text-xs text-neutral-500 dark:text-neutral-400">
                  #FCF2F4
                </p>
              </div>
              <div>
                <div class="mb-4 h-16 w-full rounded-lg bg-danger-100"></div>
                <p class="text-xs font-medium">100</p>
                <p class="text-xs text-neutral-500 dark:text-neutral-400">
                  #FAE5E9
                </p>
              </div>
              <div>
                <div class="mb-4 h-16 w-full rounded-lg bg-danger-200"></div>
                <p class="text-xs font-medium">200</p>
                <p class="text-xs text-neutral-500 dark:text-neutral-400">
                  #F5CCD3
                </p>
              </div>
              <div>
                <div class="mb-4 h-16 w-full rounded-lg bg-danger-300"></div>
                <p class="text-xs font-medium">300</p>
                <p class="text-xs text-neutral-500 dark:text-neutral-400">
                  #F0B2BD
                </p>
              </div>
              <div>
                <div class="mb-4 h-16 w-full rounded-lg bg-danger-400"></div>
                <p class="text-xs font-medium">400</p>
                <p class="text-xs text-neutral-500 dark:text-neutral-400">
                  #EB99A6
                </p>
              </div>
              <div>
                <div class="mb-4 h-16 w-full rounded-lg bg-danger-500"></div>
                <p class="text-xs font-medium">500</p>
                <p class="text-xs text-neutral-500 dark:text-neutral-400">
                  #E37285
                </p>
              </div>
              <div>
                <div class="mb-4 h-16 w-full rounded-lg bg-danger-600"></div>
                <p class="text-xs font-medium">600</p>
                <p class="text-xs text-neutral-500 dark:text-neutral-400">
                  #D42A46
                </p>
              </div>
              <div>
                <div class="mb-4 h-16 w-full rounded-lg bg-danger-700"></div>
                <p class="text-xs font-medium">700</p>
                <p class="text-xs text-neutral-500 dark:text-neutral-400">
                  #B0233A
                </p>
              </div>
              <div>
                <div class="mb-4 h-16 w-full rounded-lg bg-danger-800"></div>
                <p class="text-xs font-medium">800</p>
                <p class="text-xs text-neutral-500 dark:text-neutral-400">
                  #8D1C2F
                </p>
              </div>
              <div>
                <div class="mb-4 h-16 w-full rounded-lg bg-danger-900"></div>
                <p class="text-xs font-medium">900</p>
                <p class="text-xs text-neutral-500 dark:text-neutral-400">
                  #6A1523
                </p>
              </div>
            </div>
            <div class="mb-6 grid gap-4 xl:grid-cols-11 xl:grid-rows-1">
              <div class="h-16 w-full ">Warning</div>
              <div>
                <div class="mb-4 h-16 w-full rounded-lg bg-warning-50"></div>
                <p class="text-xs font-medium">50</p>
                <p class="text-xs text-neutral-500 dark:text-neutral-400">
                  #FDF8EF
                </p>
              </div>
              <div>
                <div class="mb-4 h-16 w-full rounded-lg bg-warning-100"></div>
                <p class="text-xs font-medium">100</p>
                <p class="text-xs text-neutral-500 dark:text-neutral-400">
                  #FBF2DE
                </p>
              </div>
              <div>
                <div class="mb-4 h-16 w-full rounded-lg bg-warning-200"></div>
                <p class="text-xs font-medium">200</p>
                <p class="text-xs text-neutral-500 dark:text-neutral-400">
                  #F7E4BE
                </p>
              </div>
              <div>
                <div class="mb-4 h-16 w-full rounded-lg bg-warning-300"></div>
                <p class="text-xs font-medium">300</p>
                <p class="text-xs text-neutral-500 dark:text-neutral-400">
                  #F4D79D
                </p>
              </div>
              <div>
                <div class="mb-4 h-16 w-full rounded-lg bg-warning-400"></div>
                <p class="text-xs font-medium">400</p>
                <p class="text-xs text-neutral-500 dark:text-neutral-400">
                  #F0C97D
                </p>
              </div>
              <div>
                <div class="mb-4 h-16 w-full rounded-lg bg-warning-500"></div>
                <p class="text-xs font-medium">500</p>
                <p class="text-xs text-neutral-500 dark:text-neutral-400">
                  #EAB54C
                </p>
              </div>
              <div>
                <div class="mb-4 h-16 w-full rounded-lg bg-warning-600"></div>
                <p class="text-xs font-medium">600</p>
                <p class="text-xs text-neutral-500 dark:text-neutral-400">
                  #C48A17
                </p>
              </div>
              <div>
                <div class="mb-4 h-16 w-full rounded-lg bg-warning-700"></div>
                <p class="text-xs font-medium">700</p>
                <p class="text-xs text-neutral-500 dark:text-neutral-400">
                  #A37313
                </p>
              </div>
              <div>
                <div class="mb-4 h-16 w-full rounded-lg bg-warning-800"></div>
                <p class="text-xs font-medium">800</p>
                <p class="text-xs text-neutral-500 dark:text-neutral-400">
                  #825C0F
                </p>
              </div>
              <div>
                <div class="mb-4 h-16 w-full rounded-lg bg-warning-900"></div>
                <p class="text-xs font-medium">900</p>
                <p class="text-xs text-neutral-500 dark:text-neutral-400">
                  #62450B
                </p>
              </div>
            </div>
            <div class="grid gap-4 xl:grid-cols-11 xl:grid-rows-1">
              <div class="h-16 w-full ">Info</div>
              <div>
                <div class="mb-4 h-16 w-full rounded-lg bg-info-50"></div>
                <p class="text-xs font-medium">50</p>
                <p class="text-xs text-neutral-500 dark:text-neutral-400">
                  #F3FAFC
                </p>
              </div>
              <div>
                <div class="mb-4 h-16 w-full rounded-lg bg-info-100"></div>
                <p class="text-xs font-medium">100</p>
                <p class="text-xs text-neutral-500 dark:text-neutral-400">
                  #E7F4F9
                </p>
              </div>
              <div>
                <div class="mb-4 h-16 w-full rounded-lg bg-info-200"></div>
                <p class="text-xs font-medium">200</p>
                <p class="text-xs text-neutral-500 dark:text-neutral-400">
                  #CEE9F2
                </p>
              </div>
              <div>
                <div class="mb-4 h-16 w-full rounded-lg bg-info-300"></div>
                <p class="text-xs font-medium">300</p>
                <p class="text-xs text-neutral-500 dark:text-neutral-400">
                  #B6DFEC
                </p>
              </div>
              <div>
                <div class="mb-4 h-16 w-full rounded-lg bg-info-400"></div>
                <p class="text-xs font-medium">400</p>
                <p class="text-xs text-neutral-500 dark:text-neutral-400">
                  #9ED4E6
                </p>
              </div>
              <div>
                <div class="mb-4 h-16 w-full rounded-lg bg-info-500"></div>
                <p class="text-xs font-medium">500</p>
                <p class="text-xs text-neutral-500 dark:text-neutral-400">
                  #79C4DC
                </p>
              </div>
              <div>
                <div class="mb-4 h-16 w-full rounded-lg bg-info-600"></div>
                <p class="text-xs font-medium">600</p>
                <p class="text-xs text-neutral-500 dark:text-neutral-400">
                  #34A4CA
                </p>
              </div>
              <div>
                <div class="mb-4 h-16 w-full rounded-lg bg-info-700"></div>
                <p class="text-xs font-medium">700</p>
                <p class="text-xs text-neutral-500 dark:text-neutral-400">
                  #2B89A8
                </p>
              </div>
              <div>
                <div class="mb-4 h-16 w-full rounded-lg bg-info-800"></div>
                <p class="text-xs font-medium">800</p>
                <p class="text-xs text-neutral-500 dark:text-neutral-400">
                  #236D86
                </p>
              </div>
              <div>
                <div class="mb-4 h-16 w-full rounded-lg bg-info-900"></div>
                <p class="text-xs font-medium">900</p>
                <p class="text-xs text-neutral-500 dark:text-neutral-400">
                  #1A5265
                </p>
              </div>
            </div>
          </div>
          
            
        

    Background

    Easily set the background by using .bg-* color classes

    .bg-primary

    .bg-secondary

    .bg-success

    .bg-danger

    .bg-warning

    .bg-info

    .bg-neutral-50

    .bg-neutral-800 .dark:bg-neutral-900

    • HTML
            
                
          <div class="grid-rows-8 grid gap-4">
            <div class="flex h-16 w-full items-center rounded-md bg-primary p-4">
              <p class="text-neutral-50">.bg-primary</p>
            </div>
            <div class="flex h-16 w-full items-center rounded-md bg-secondary p-4">
              <p class="text-neutral-50">.bg-secondary</p>
            </div>
            <div class="flex h-16 w-full items-center rounded-md bg-success p-4">
              <p class="text-neutral-50">.bg-success</p>
            </div>
            <div class="flex h-16 w-full items-center rounded-md bg-danger p-4">
              <p class="text-neutral-50">.bg-danger</p>
            </div>
            <div class="flex h-16 w-full items-center rounded-md bg-warning p-4">
              <p class="text-neutral-50">.bg-warning</p>
            </div>
            <div class="flex h-16 w-full items-center rounded-md bg-info p-4">
              <p class="text-neutral-50">.bg-info</p>
            </div>
            <div class="flex h-16 w-full items-center rounded-md bg-neutral-50 p-4">
              <p class="text-neutral-800">.bg-neutral-50</p>
            </div>
            <div
              class="flex h-16 w-full items-center rounded-md bg-neutral-800 p-4 dark:bg-neutral-900">
              <p class="text-neutral-50">.bg-neutral-800 .dark:bg-neutral-900</p>
            </div>
          </div>
          
            
        

    Text

    Colorize text with color utilities.

    Lorem ipsum dolor sit amet

    Lorem ipsum dolor sit amet

    Lorem ipsum dolor sit amet

    Lorem ipsum dolor sit amet

    Lorem ipsum dolor sit amet

    Lorem ipsum dolor sit amet

    Lorem ipsum dolor sit amet

    Lorem ipsum dolor sit amet

    • HTML
            
                
          <div class="grid-rows-8 grid gap-4">
            <p class="text-primary">Lorem ipsum dolor sit amet</p>
            <p class="text-secondary">Lorem ipsum dolor sit amet</p>
            <p class="text-success">Lorem ipsum dolor sit amet</p>
            <p class="text-danger">Lorem ipsum dolor sit amet</p>
            <p class="text-warning">Lorem ipsum dolor sit amet</p>
            <p class="text-info">Lorem ipsum dolor sit amet</p>
            <p class="bg-neutral-800 text-neutral-50 dark:bg-transparent">
              Lorem ipsum dolor sit amet
            </p>
            <p class="text-neutral-800 dark:bg-neutral-50 dark:text-neutral-900">
              Lorem ipsum dolor sit amet
            </p>
          </div>
          
            
        

    Related resources

    Tutorials:

    colors icons hover state focus active and others dark mode masks hsla colors buttons ripple effect cards pricing cards forms badges footer

    Extended Docs:

    hover effects icons mask typography alerts badges button group buttons notifications placeholders progress rating social buttons toast tables charts ripple border opacity borders color picker colors dark theme gradient text icons opacity text color

    Generators and builders:

    Form drag & drop Typography SVG icon Instagram Filters button card table flexbox logo grid footer

    Design System (Figma):

    introduction less is more The power of visual herarchy the art of proritization de emphasize with no mercy lowering the contrast low contrast vs low aesthetics user experience do not start with the roof project personality design system plan the process principles tips and tricks
    • Theme
    • Shades
    • Background
    • Text
    • Related resources
    Get useful tips & free resources directly to your inbox along with exclusive subscriber-only content.
    Join our mailing list now
    © 2024 Copyright: MDBootstrap.com

    Access restricted

    To view this section you must have an active PRO account

    Log in to your account or purchase an TWE subscription if you don't have one.

    Buy TWE PRO