search results:

    Get started License Playground Services Free hosting Community
    • + D
    • Light
    • Dark
    Tailwind Elements
    • Getting started
      • Quick start
      • Dark mode
      • Theming
      • Changelog
      • Contribute
    • Integrations
      • Angular
      • Django
      • Express
      • Laravel
      • Next
      • Nuxt
      • React
      • Svelte
      • Vue
    • Content & styles
      • Animations
      • 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
      • Link
      • List group
      • Modal
      • Notifications
      • Paragraphs
      • Placeholders
      • Popover
      • Progress
      • Rating
      • Scroll back to top button
      • Social buttons
      • Spinners
      • Stepper
      • Testimonials
      • Timeline
      • Toast
      • Tooltip
      • Video
      • Video carousel
    • Forms
      • Checkbox
      • Datepicker
      • File input
      • Form templates
      • Input Group
      • Inputs
      • Login form
      • Radio
      • Range
      • Registration form
      • Search
      • Select
      • Switch
      • Textarea
      • Timepicker
    • Data
      • Charts
      • Tables
    • Methods
      • Ripple
    • Design Blocks
      • Banners
      • Contact
      • Content
      • CTA
      • FAQ
      • Features
      • Headers
      • Hero / Intro sections
      • Logo clouds
      • Mega menu
      • News
      • Newsletter
      • Pricing
      • Projects
      • Stats
      • Team
      • Testimonials
    • Coming Soon
      • Angular
      • Builder
      • React
      • Templates
      • Vue

    Colors

    Tailwind CSS Colors

    Tailwind 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 want to make Tailwind Elements a community-driven project. It's open source and free, and we would like it to stay that way. If you enjoy it, help the project grow by sharing it with your peers. Every share counts, thank you!

    Share via Dev.to Share via Twitter Share via Facebook Share via Pinterest Share via Reddit Share via StumbleUpon Share via Vkontakte Share via Weibo Share via HackerNews Share via Gmail Share via Email

    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>
          
            
        
    • Theme
    • Shades
    • Background
    • Text
    Get useful tips & free resources directly to your inbox along with exclusive subscriber-only content.
    Join our mailing list now
    © 2023 Copyright: MDBootstrap.com