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 776 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

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.

Amit Pachange

4 years ago

53.9k
Employee Data Management System TailwindCSS,Html
This project is made of only html and even tailwind is using CDN to save storage space. Best for SPA and routing with other components .

Siva Naga Malleswararao Kurakula

1 year ago

2.2k
Feature display cards (grid layout)

Sophia Baker

3 years ago

15.9k
Feature showcase cards

bara masalma

1 year ago

2.1k
Feature cards with icons on top

Manon Daniel

3 years ago

18.4k
Services

$$@(\/)(\/)¥$ $@(\/)(\/)¥

1 year ago

2.6k
Meet the Team Section with Team Member Cards
Meet the Team Section with Team Member Cards

Mike Varen

2 years ago

5.2k
Layout switcher with tailwindcss and alpinejs

Michael Andreuzza

2 years ago

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

Mike Varen

2 years ago

4.8k
Basic features section
Display your most important features

Dipti narayan

3 years ago

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

Matti

1 year ago

3.1k
Feature Showcase Section with Font Awesome Icons
showcase the features of a product or service. The features are presented in a grid.

Kavita Joshi

2 years ago

7.4k