Palette2

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

Feature showcase

Author Lasse Strand Ringvold

Tailwind v3.4 774 1

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

Features section

ariaw

11 months ago

906
Video Player
Youtube Video Player

KULDEEP

1 year ago

1.2k
SaaS Feature Section
It has a Gradient text headline and CTA buttons

Junclarkaizen Pagu

2 years ago

10.1k
Premium High-Performance Web Gaming Hub
Experience the future of browser-based gaming. I’ve developed a premium arcade hub designed for speed, clarity, and zero-latency gameplay. Built with modern web technologies, Ayyamperumal Games brings AAA-inspired visuals and high-octane mechanics directly to your browser—no downloads, no lag, just pure performance. Explore a curated library of titles ranging from minimalist logic puzzles like Sudoku Elite to fast-paced action in Neon Drift. This is where clean code meets high-level entertainment.

Ayyamperumal S

8 months ago

942
Features

Matti

1 year ago

1.7k
Feature cards for company website
Each card provides a brief description of a specific feature, making it easy for users to understand the benefits and capabilities of our services

Anonymous

2 years ago

7.8k
Features list with icons

L.J. Weber

3 years ago

15.2k
Showcase
A version of an showcase.

Matti

1 year ago

1.9k
Pricing Table with Tailwind CSS and Alpinejs

Michael Andreuzza

2 years ago

4.1k
tailwind contact form
tailwind contact form

Geoffrey Callaghan

2 years ago

3k
Responsive Features Section

Abdul Baset Bappy

1 year ago

1.5k
Hotel rooms
A simple room overview

Matti

1 year ago

2.1k