Tailwind CSS Chips

Get started on your web projects with our Tailwind CSS chip which is a compact elements that represent an input, attribute, or action. This element appears dynamically as a group of multiple interactive elements and allows users to enter information, make selections, filter content, or trigger actions.

See below our simple chip component example that you can use for your Tailwind CSS project.

chip pink
<div class="chip chip-pink mr-2">chip pink</div>

Chips Variation

Use this example to create a simple and versatile badge component.

chip pink
chip blue
chip green
chip red
chip orange
chip purple
<div class="chip chip-pink mr-2">chip pink</div>
<div class="chip chip-blue mr-2">chip blue</div>
<div class="chip chip-green mr-2">chip green</div>
<div class="chip chip-red mr-2">chip red</div>
<div class="chip chip-orange mr-2">chip orange</div>
<div class="chip chip-purple">chip purple</div>
Edit this page on Github