react-input-chips/src/components/styles.css

A package with minimum dependencies and maximum customization.

.chip-input-wrapper {
   gap: 4px;
   flex: 2;
   padding: 5px;
   overflow: auto;
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   border: 1px solid #BBBBBB;
   border-radius: 4px;
   max-width: 650px;
   min-width: 300px;

   .chip {
      background: #e5e5e5;
      border-radius: 4px;
      color: #333333;
      display: flex;
      gap: 0.5rem;
      align-items: center;
      justify-content: space-between;
      max-width: max-content;
      padding: 6px;
   }

   .chip-input {
      border: none;
      outline: none;
      flex: 1;
      padding: 0 8px;
      height: 30px;
   }

   .closeBtn {
      outline: none;
      border: none;
      background: none;
      height: 18px;
      width: 18px;
      object-fit: cover;
      cursor: pointer;
      display: grid;
      place-items: center;
   }
}

.chip-input-wrapper-error {
   border: 2px solid red
}

.error-msg-wrapper {
   margin: 0;
   font-size: 12px;
   color: red
}