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

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

1.7k
Feature Cards Section
showcase key features or benefits with cards.

Author:
Anonymous

2 years ago

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

Author:
Kavita Joshi

2 years ago

7k
Pricing Table with Tailwind CSS and Alpinejs

Author:
Michael Andreuzza

1 year ago

3.6k
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.6k
Services showcase Section
With hover effect on cards

Author:
Anonymous

1 year ago

2.5k
Feature Showcase
The feature showcase's responsive grid can also be used as testimonial cards.

Author:
Alok

3 years ago

25.6k
Features cards section
Features cards section with dark theme

Author:
Sophia Baker

3 years ago

10.5k
Product feature showccase section with images

Author:
R.P Ketan

2 years ago

16.5k
Feature overview cards
The component is designed to be responsive, featuring a title, a brief description, and a set of cards presenting key metrics.

Author:
Nikita

2 years ago

5.4k
Steps section
Show features or steps of your website. Each step Includes Icons.

Author:
Komal Jain

2 years ago

9.5k
Feature showcase cards

Author:
Lukas Müller

2 years ago

14.1k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components