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

Reusable Skill Showcase Section With Pure Tailwind CSS
A fully responsive and modular "Skills & Tools" section, perfect for any developer portfolio. Built with static HTML and Tailwind CSS, this component can be easily integrated into any project and made dynamic using any frontend framework (Vue, React, Svelte, Angular) or vanilla JavaScript. Customize it to highlight your unique tech stack and create engaging portfolio pages.

Author:
Abdul Baset Bappy

11 months ago

1.9k
Feature showcase cards

Author:
bara masalma

1 year ago

1.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.8k
Our services component

Author:
Anonymous

1 year ago

1.8k
Highlights - Speakers Section

Author:
ABDO-SY

10 months ago

884
Features list with images and description

Author:
Noah Schmidt

2 years ago

14.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:
Amit Pachange

3 years ago

52.2k
Portfolio with buttons
Portfolio with buttons. Portfolio item has image, title and description.

Author:
Mike Varen

1 year ago

4k
Warb feature
Here another idea... [update] - mobile device fixed (curr iPh, Smg)

Author:
Matti

1 year ago

2.6k
Product Feature Section
present multiple product features in a grid layout. Each feature is represented by an icon, title, and description.

Author:
Elsabe Fourie

2 years ago

9.4k
Attractive Feature Section
With Gradient Color 6 Features

Author:
KULDEEP

7 months ago

835
Flour mill website landing page template
flour mill and services template website which comprise of many sections like about us, featured products, why us, visit us

Author:
Amit Pachange

1 year ago

15k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components