Stepper - Copy this React, Tailwind Component to your project

<template> <div class="kavi-chip" :class="{ 'kavi-chip-selected': selected }"> <button @click="$emit('someEvent')"></button> <span>{{ label }}</span> <template v-if="closable"> <Kavicon :icon="prependIcon" @click="removeChip"/> </template> <slot /> </div> </template> <script setup> import { defineProps, defineEmits } from 'vue'; import Kavicon from '../icon/Kavicon'; const props = defineProps({ label: String, icon: String, selected: Boolean, closable: { type: Boolean, default: true }, prependIcon: { type: String, default: "mdi-close" } }); const emit = defineEmits(['someEvent', 'removeChip']); const removeChip = () => { emit('removeChip'); }; </script> <style scoped> .kavi-chip { display: inline-flex; align-items: center; padding: 4px 8px; border-radius: 16px; background-color: #f0f0f0; margin: 4px; cursor: pointer; } .kavi-chip-selected { background-color: #1976d2; color: #fff; } .kavi-chip i { font-size: 14px; margin-left: 8px; cursor: pointer; } button{ color: #000; } </style> solve the issue