Palette2

This tailwind example is contributed by Lasse Strand Ringvold, on 08-Feb-2026. Component is made with Tailwind CSS v3. It is responsive. similar terms for this example are Services,Why choose us

Feature showcase

Author Lasse Strand Ringvold

Fork Fullscreen

<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>

<header class="space-y-2">
      <h1 class="text-3xl font-semibold tracking-tight">Palette Kitchen Sink</h1>
      <p class="text-charcoal-400">
        Scales, surfaces, text, borders, rings, components, and contrast-safe pairings.
      </p>
    </header>

<div class="grid gap-4 md:grid-cols-3">
      <div class="rounded-2xl border border-sand-300 bg-sand-100 p-5">
        <p class="text-sm font-medium text-charcoal-500">Default text</p>
        <p class="mt-1 text-sm text-charcoal-400">Use <code class="font-mono">text-charcoal-500</code> / <code class="font-mono">text-charcoal-400</code></p>
      </div>
      <div class="rounded-2xl border border-sand-300 bg-sand-100 p-5">
        <p class="text-sm font-medium text-charcoal-500">Primary action</p>
        <p class="mt-1 text-sm text-charcoal-400">Use <code class="font-mono">bg-brand-600 text-white</code></p>
      </div>
      <div class="rounded-2xl border border-sand-300 bg-sand-100 p-5">
        <p class="text-sm font-medium text-charcoal-500">Semantic accents</p>
        <p class="mt-1 text-sm text-charcoal-400">success / warning / danger (600+)</p>
      </div>
    </div>

<div class="space-y-6">
      <h2 class="text-xl font-semibold">Color scales</h2>

<div class="space-y-5">
        
        <div>
          <div class="mb-2 flex items-end justify-between">
            <div class="font-medium">brand</div>
            <div class="text-xs text-charcoal-400 font-mono">50 → 950</div>
          </div>
          <div class="grid grid-cols-5 md:grid-cols-10 gap-2">
            <div class="h-12 rounded-xl bg-brand-50 border border-sand-300"></div>
            <div class="h-12 rounded-xl bg-brand-100 border border-sand-300"></div>
            <div class="h-12 rounded-xl bg-brand-200 border border-sand-300"></div>
            <div class="h-12 rounded-xl bg-brand-300 border border-sand-300"></div>
            <div class="h-12 rounded-xl bg-brand-400 border border-sand-300"></div>
            <div class="h-12 rounded-xl bg-brand-500 border border-sand-300"></div>
            <div class="h-12 rounded-xl bg-brand-600 border border-sand-300"></div>
            <div class="h-12 rounded-xl bg-brand-700 border border-sand-300"></div>
            <div class="h-12 rounded-xl bg-brand-800 border border-sand-300"></div>
            <div class="h-12 rounded-xl bg-brand-900 border border-sand-300"></div>
          </div>
        </div>

<div>
          <div class="mb-2 flex items-end justify-between">
            <div class="font-medium">teal</div>
            <div class="text-xs text-charcoal-400 font-mono">50 → 950</div>
          </div>
          <div class="grid grid-cols-5 md:grid-cols-10 gap-2">
            <div class="h-12 rounded-xl bg-teal-50 border border-sand-300"></div>
            <div class="h-12 rounded-xl bg-teal-100 border border-sand-300"></div>
            <div class="h-12 rounded-xl bg-teal-200 border border-sand-300"></div>
            <div class="h-12 rounded-xl bg-teal-300 border border-sand-300"></div>
            <div class="h-12 rounded-xl bg-teal-400 border border-sand-300"></div>
            <div class="h-12 rounded-xl bg-teal-500 border border-sand-300"></div>
            <div class="h-12 rounded-xl bg-teal-600 border border-sand-300"></div>
            <div class="h-12 rounded-xl bg-teal-700 border border-sand-300"></div>
            <div class="h-12 rounded-xl bg-teal-800 border border-sand-300"></div>
            <div class="h-12 rounded-xl bg-teal-900 border border-sand-300"></div>
          </div>
        </div>

<div class="grid gap-5 md:grid-cols-3">
          <div>
            <div class="mb-2 flex items-end justify-between">
              <div class="font-medium">success</div>
              <div class="text-xs text-charcoal-400 font-mono">50 → 950</div>
            </div>
            <div class="grid grid-cols-5 gap-2">
              <div class="h-12 rounded-xl bg-success-50 border border-sand-300"></div>
              <div class="h-12 rounded-xl bg-success-200 border border-sand-300"></div>
              <div class="h-12 rounded-xl bg-success-400 border border-sand-300"></div>
              <div class="h-12 rounded-xl bg-success-600 border border-sand-300"></div>
              <div class="h-12 rounded-xl bg-success-900 border border-sand-300"></div>
            </div>
          </div>
          <div>
            <div class="mb-2 flex items-end justify-between">
              <div class="font-medium">warning</div>
              <div class="text-xs text-charcoal-400 font-mono">50 → 950</div>
            </div>
            <div class="grid grid-cols-5 gap-2">
              <div class="h-12 rounded-xl bg-warning-50 border border-sand-300"></div>
              <div class="h-12 rounded-xl bg-warning-200 border border-sand-300"></div>
              <div class="h-12 rounded-xl bg-warning-400 border border-sand-300"></div>
              <div class="h-12 rounded-xl bg-warning-600 border border-sand-300"></div>
              <div class="h-12 rounded-xl bg-warning-900 border border-sand-300"></div>
            </div>
          </div>
          <div>
            <div class="mb-2 flex items-end justify-between">
              <div class="font-medium">danger</div>
              <div class="text-xs text-charcoal-400 font-mono">50 → 950</div>
            </div>
            <div class="grid grid-cols-5 gap-2">
              <div class="h-12 rounded-xl bg-danger-50 border border-sand-300"></div>
              <div class="h-12 rounded-xl bg-danger-200 border border-sand-300"></div>
              <div class="h-12 rounded-xl bg-danger-400 border border-sand-300"></div>
              <div class="h-12 rounded-xl bg-danger-600 border border-sand-300"></div>
              <div class="h-12 rounded-xl bg-danger-900 border border-sand-300"></div>
            </div>
          </div>
        </div>

<div class="grid gap-5 md:grid-cols-2">
          <div class="space-y-5">
            <div>
              <div class="mb-2 flex items-end justify-between">
                <div class="font-medium">purple</div>
                <div class="text-xs text-charcoal-400 font-mono">50 → 950</div>
              </div>
              <div class="grid grid-cols-5 md:grid-cols-10 gap-2">
                <div class="h-12 rounded-xl bg-purple-50 border border-sand-300"></div>
                <div class="h-12 rounded-xl bg-purple-100 border border-sand-300"></div>
                <div class="h-12 rounded-xl bg-purple-200 border border-sand-300"></div>
                <div class="h-12 rounded-xl bg-purple-300 border border-sand-300"></div>
                <div class="h-12 rounded-xl bg-purple-400 border border-sand-300"></div>
                <div class="h-12 rounded-xl bg-purple-500 border border-sand-300"></div>
                <div class="h-12 rounded-xl bg-purple-600 border border-sand-300"></div>
                <div class="h-12 rounded-xl bg-purple-700 border border-sand-300"></div>
                <div class="h-12 rounded-xl bg-purple-800 border border-sand-300"></div>
                <div class="h-12 rounded-xl bg-purple-900 border border-sand-300"></div>
              </div>
            </div>

<div>
              <div class="mb-2 flex items-end justify-between">
                <div class="font-medium">magenta</div>
                <div class="text-xs text-charcoal-400 font-mono">50 → 950</div>
              </div>
              <div class="grid grid-cols-5 md:grid-cols-10 gap-2">
                <div class="h-12 rounded-xl bg-magenta-50 border border-sand-300"></div>
                <div class="h-12 rounded-xl bg-magenta-100 border border-sand-300"></div>
                <div class="h-12 rounded-xl bg-magenta-200 border border-sand-300"></div>
                <div class="h-12 rounded-xl bg-magenta-300 border border-sand-300"></div>
                <div class="h-12 rounded-xl bg-magenta-400 border border-sand-300"></div>
                <div class="h-12 rounded-xl bg-magenta-500 border border-sand-300"></div>
                <div class="h-12 rounded-xl bg-magenta-600 border border-sand-300"></div>
                <div class="h-12 rounded-xl bg-magenta-700 border border-sand-300"></div>
                <div class="h-12 rounded-xl bg-magenta-800 border border-sand-300"></div>
                <div class="h-12 rounded-xl bg-magenta-900 border border-sand-300"></div>
              </div>
            </div>
          </div>

<div class="space-y-5">
            <div>
              <div class="mb-2 flex items-end justify-between">
                <div class="font-medium">neutrals (sand / charcoal / navy)</div>
                <div class="text-xs text-charcoal-400 font-mono">surfaces + text</div>
              </div>

<div class="grid gap-3">
                <div class="rounded-2xl border border-sand-300 bg-sand-50 p-4">
                  <div class="text-sm font-medium">Sand surface</div>
                  <div class="text-sm text-charcoal-400">bg-sand-50 · border-sand-300</div>
                </div>
                <div class="rounded-2xl border border-sand-300 bg-sand-200 p-4">
                  <div class="text-sm font-medium">Muted surface</div>
                  <div class="text-sm text-charcoal-400">bg-sand-200</div>
                </div>
                <div class="rounded-2xl border border-sand-300 bg-white p-4">
                  <div class="text-sm font-medium">Card surface</div>
                  <div class="text-sm text-charcoal-400">bg-white (still ok)</div>
                </div>

<div class="rounded-2xl border border-sand-300 bg-sand-100 p-4">
                  <div class="flex items-center justify-between">
                    <div>
                      <div class="text-sm font-medium">Text tokens</div>
                      <div class="text-sm text-charcoal-400">primary / secondary / inverse</div>
                    </div>
                    <div class="flex gap-2">
                      <span class="rounded-lg bg-charcoal-500 px-3 py-1 text-xs font-medium text-white">text inverse</span>
                      <span class="rounded-lg bg-navy-500 px-3 py-1 text-xs font-medium text-white">navy</span>
                    </div>
                  </div>
                  <div class="mt-3 space-y-1">
                    <div class="text-charcoal-500">Primary: text-charcoal-500</div>
                    <div class="text-charcoal-400">Secondary: text-charcoal-400</div>
                    <div class="text-navy-600">Link-ish: text-navy-600</div>
                  </div>
                </div>
              </div>

</div>
          </div>
        </div>

</div>
    </div>

<div class="space-y-6">
      <h2 class="text-xl font-semibold">Components (AA-friendly defaults)</h2>

<div class="grid gap-6 lg:grid-cols-2">
        
        <div class="rounded-2xl border border-sand-300 bg-white p-6 space-y-4">
          <div class="flex items-center justify-between">
            <div class="font-medium">Buttons</div>
            <div class="text-xs text-charcoal-400 font-mono">use 600+ for bg</div>
          </div>

<div class="flex flex-wrap gap-3">
            <button class="rounded-xl bg-brand-600 px-4 py-2 text-sm font-semibold text-white hover:bg-brand-700 focus:outline-none focus:ring-2 focus:ring-brand-500 focus:ring-offset-2 focus:ring-offset-white">
              Primary
            </button>
            <button class="rounded-xl bg-teal-600 px-4 py-2 text-sm font-semibold text-white hover:bg-teal-700 focus:outline-none focus:ring-2 focus:ring-teal-500 focus:ring-offset-2 focus:ring-offset-white">
              Teal
            </button>
            <button class="rounded-xl bg-success-600 px-4 py-2 text-sm font-semibold text-white hover:bg-success-700 focus:outline-none focus:ring-2 focus:ring-success-500 focus:ring-offset-2 focus:ring-offset-white">
              Success
            </button>
            <button class="rounded-xl bg-warning-600 px-4 py-2 text-sm font-semibold text-white hover:bg-warning-700 focus:outline-none focus:ring-2 focus:ring-warning-500 focus:ring-offset-2 focus:ring-offset-white">
              Warning
            </button>
            <button class="rounded-xl bg-danger-600 px-4 py-2 text-sm font-semibold text-white hover:bg-danger-700 focus:outline-none focus:ring-2 focus:ring-danger-500 focus:ring-offset-2 focus:ring-offset-white">
              Danger
            </button>

<button class="rounded-xl border border-sand-300 bg-sand-50 px-4 py-2 text-sm font-semibold text-charcoal-500 hover:bg-sand-100 focus:outline-none focus:ring-2 focus:ring-brand-500 focus:ring-offset-2 focus:ring-offset-white">
              Secondary
            </button>
          </div>
        </div>

<div class="rounded-2xl border border-sand-300 bg-white p-6 space-y-4">
          <div class="flex items-center justify-between">
            <div class="font-medium">Badges & pills</div>
            <div class="text-xs text-charcoal-400 font-mono">tint bg + strong text</div>
          </div>
          <div class="flex flex-wrap gap-2">
            <span class="rounded-full bg-brand-100 px-3 py-1 text-xs font-medium text-brand-800 border border-brand-200">Brand</span>
            <span class="rounded-full bg-teal-100 px-3 py-1 text-xs font-medium text-teal-800 border border-teal-200">Teal</span>
            <span class="rounded-full bg-success-100 px-3 py-1 text-xs font-medium text-success-800 border border-success-200">Success</span>
            <span class="rounded-full bg-warning-100 px-3 py-1 text-xs font-medium text-warning-800 border border-warning-200">Warning</span>
            <span class="rounded-full bg-danger-100 px-3 py-1 text-xs font-medium text-danger-800 border border-danger-200">Danger</span>
            <span class="rounded-full bg-purple-100 px-3 py-1 text-xs font-medium text-purple-800 border border-purple-200">Purple</span>
            <span class="rounded-full bg-magenta-100 px-3 py-1 text-xs font-medium text-magenta-800 border border-magenta-200">Magenta</span>
          </div>
        </div>

<div class="rounded-2xl border border-sand-300 bg-white p-6 space-y-4">
          <div class="font-medium">Alerts</div>

<div class="rounded-2xl border border-brand-200 bg-brand-50 p-4">
            <div class="font-semibold text-brand-900">Info</div>
            <div class="text-sm text-brand-800">Use light tint backgrounds with 800–900 text.</div>
          </div>

<div class="rounded-2xl border border-success-200 bg-success-50 p-4">
            <div class="font-semibold text-success-900">Success</div>
            <div class="text-sm text-success-800">This pairing stays readable without being neon.</div>
          </div>

<div class="rounded-2xl border border-warning-200 bg-warning-50 p-4">
            <div class="font-semibold text-warning-900">Warning</div>
            <div class="text-sm text-warning-800">Great for “caution” states. Avoid using warning as body text.</div>
          </div>

<div class="rounded-2xl border border-danger-200 bg-danger-50 p-4">
            <div class="font-semibold text-danger-900">Danger</div>
            <div class="text-sm text-danger-800">For destructive actions and error states.</div>
          </div>
        </div>

<div class="rounded-2xl border border-sand-300 bg-white p-6 space-y-4">
          <div class="font-medium">Inputs</div>

<div class="space-y-3">
            <label class="block text-sm font-medium text-charcoal-500">Default</label>
            <input class="w-full rounded-xl border border-sand-300 bg-sand-50 px-3 py-2 text-sm text-charcoal-500 placeholder:text-charcoal-300 focus:outline-none focus:ring-2 focus:ring-brand-500 focus:border-transparent"
              placeholder="Placeholder text" />

<label class="block text-sm font-medium text-charcoal-500">Error</label>
            <input class="w-full rounded-xl border border-danger-300 bg-danger-50 px-3 py-2 text-sm text-charcoal-500 placeholder:text-danger-400 focus:outline-none focus:ring-2 focus:ring-danger-500 focus:border-transparent"
              placeholder="This field is required" />

<label class="block text-sm font-medium text-charcoal-500">Success</label>
            <input class="w-full rounded-xl border border-success-300 bg-success-50 px-3 py-2 text-sm text-charcoal-500 placeholder:text-success-400 focus:outline-none focus:ring-2 focus:ring-success-500 focus:border-transparent"
              placeholder="Looks good" />
          </div>
        </div>
      </div>
    </div>

<div class="space-y-4">
      <h2 class="text-xl font-semibold">Contrast-safe pairings</h2>
      <div class="grid gap-3 md:grid-cols-2">
        <div class="rounded-2xl border border-sand-300 bg-white p-5">
          <div class="text-sm font-medium">On light surfaces</div>
          <div class="mt-2 text-sm text-charcoal-400 space-y-1">
            <div><span class="font-mono">text-charcoal-500</span> on <span class="font-mono">bg-sand-50/100/200</span></div>
            <div><span class="font-mono">text-navy-600</span> for links</div>
            <div><span class="font-mono">border-sand-300</span> for structure</div>
          </div>
        </div>
        <div class="rounded-2xl border border-sand-300 bg-white p-5">
          <div class="text-sm font-medium">On strong accents</div>
          <div class="mt-2 text-sm text-charcoal-400 space-y-1">
            <div><span class="font-mono">text-white</span> on <span class="font-mono">bg-*-600+</span></div>
            <div>Primary CTA: <span class="font-mono">bg-brand-600 text-white</span></div>
            <div>Status: <span class="font-mono">success|warning|danger</span> at 600+</div>
          </div>
        </div>
      </div>
    </div>

<footer class="pt-4 text-xs text-charcoal-400">
      Tip: for charts, prefer <span class="font-mono">teal/purple/magenta</span> midtones, but keep text on neutrals.
    </footer>
  </div>
</section>

Related Examples

Feature: Switch-Special
Here a special feature-showcase. I hope you like it ;)

Author:
Matti

1 year ago

1.7k
Facts
Large fact counters with the "centered" title, a quarter overstand to the right site. Die JS-Line set the titles, so you only have to change the text -- and or modify the counters- or the titles background-color. [VIEW-NOTICE] If you change the from XS over MD to XL ... right-click here into the showcase and click "reload frame" or test it on you own site directly.

Author:
Matti

1 year ago

2k
Product features list with inner border

Author:
Lîmåã M

2 years ago

14.4k
Feature Card
Shows off a feature, great for homepages and grid layout, or can be used in dashboards for "example use" grids. Enjoy! Part of the Coastal UI collection.

Author:
Coastal UI

10 months ago

432
Video Player
Youtube Video Player

Author:
KULDEEP

8 months ago

834
Responsive Features section

Author:
Piet Vriend

3 years ago

11.1k
Applications Showcase
This is a stylish and interactive application showcase component designed for web use. It features the following elements: Background Styling: The main container has a rounded-rectangle shape (rounded-3xl) with a subtle white base overlaying a high-resolution background image, styled with background-size: 600px for an artistic touch. The image itself dynamically serves as a backdrop, giving the component a layered appearance. Main Icon: A small circular icon, located at the top-right corner, appears with smooth hover effects: Enlarges to double its size (scale-[2]). Rotates (rotate-[410deg]). Moves diagonally upwards-right (translate-x-3, -translate-y-3). These transitions occur over a duration of 1 second (transition duration-1000). Overlay Gradient: A transparent gradient overlay (bg-gradient-to-l) adds a polished depth effect, transitioning from black (from-black/80) to lighter shades. App Icon and Info: Icon: The app icon is a smaller, bordered square image (rounded-2xl) with hover shrink animations (group-hover:scale-95). Text: A bold application title (text-md font-semibold) with hover-animated underline effects that gradually expand from left to right. A short app description styled as secondary text. Call-to-Action Button: Below the card is a subtle, rounded button (rounded-full) encouraging interaction. It features: A hover effect with color inversion (gray to black). A lift effect (hover:-translate-y-1) when hovered. This component is perfect for modern app showcases, offering a dynamic, user-friendly visual experience. It ensures a professional look while engaging users through smooth animations and clear calls to action.

Author:
Banshee

1 year ago

2.8k
Responsive Card Grid
Tailwind CSS responsive grid for feature listing. The cards have a teal background, rounded corners, and a concise display of feature titles, descriptions, and a "Learn More" link.

Author:
kzsamir849

1 year ago

2.4k
Showcase Your Services with Interactive Animations: A Modern HTML and Tailwind CSS Example
Discover how to create an eye-catching services section using plain HTML and Tailwind CSS. This modern example features interactive animations that bring your services to life. With smooth hover effects and responsive design, this section is perfect for enhancing your website's user experience. Easily customize the content to fit your needs, and let Tailwind CSS handle the styling and transitions for a polished, professional look.

Author:
Hezron Okoko

1 year ago

2.9k
Services

$$@(\/)(\/)¥$ Author:
$@(\/)(\/)¥

1 year ago

2.1k
Modern Testimonial
A simple and easy to use component for reviews and testimonials.

Author:
Coastal UI

1 year ago

1.1k
Features section
Showcase your key features

Author:
Manon Daniel

3 years ago

16.9k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components