Tag input with Tailwind CSS and Alpinejs

This tailwind example is contributed by Michael Andreuzza, on 27-Apr-2024. Component is made with Tailwind v3.4. It is responsive.

Form

Author Michael Andreuzza

Tailwind v3.4 3.2k 6

Fork Fullscreen

<section class="bg-white">
 <div class="w-full mx-auto max-w-xl flex flex-col justify-center lg:h-svh py-24 lg:py-96 relative p-8">
  <div class="prose text-gray-500 prose-sm prose-headings:font-normal prose-headings:text-xl mx-auto">
   <div>
    <h1>Add you tags</h1>
    <p class="text-balance">
     Test the input by adding tags and removing them. You can also add
     tags by pressing the Enter key.
    </p>
   </div>
  </div> 
  <div class="w-full mx-auto mt-6 border-t pt-12" x-data="{
        tags: [],
        addTag(tag) {
            if (tag.trim() !== '') {
                this.tags.push(tag.trim());
            }
        },
        removeTag(index) {
            this.tags.splice(index, 1);
        }
    }">
   
   <div class="w-full border rounded-xl px-3 items-center" x-data="{ newTag: '', tags: [] }">
     <input x-model="newTag" @keydown.enter.prevent="
            if (newTag.trim() !== '') {
                tags.push(newTag.trim());
                newTag = '';
            }
        " class="w-full border-gray-300 rounded-md focus:border-orange-500 focus:ring-orange-500 mt-1" type="text" placeholder="Add tags (press Enter to add)"> 
    <div class="mt-4 flex gap-2 flex-wrap"> <template x-for="(tag, index) in tags" :key="index">
      <div class="inline-flex items-center gap-x-0.5 rounded-md bg-orange-50 px-2 py-1 text-xs font-medium text-orange-700 ring-1 ring-inset ring-orange-700/10"> <span x-text="tag"></span> <button @click="tags.splice(index, 1)" class="ml-2"> <svg class="h-4 w-4 text-red-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
        </svg> </button> </div>
     </template> </div>
   </div>
  </div> 
  
  <div class="pointer-events-none fixed inset-x-0 bottom-0 sm:flex sm:justify-center p-2 ">
   <div class="pointer-events-auto flex w-full max-w-md divide-x divide-neutral-200 rounded-lg bg-white shadow-xl border">
    <div class="flex w-0 flex-1 items-center p-4">
     <div class="w-full">
      <p class="text-sm font-medium text-neutral-900">Tutorial</p>
      <p class="mt-1 text-sm text-neutral-500">
       How to create a tag input with Tailwind CSS and Alpinejs
      </p>
      <p class="mt-2 text-xs text-orange-500 underline"> <a href="https://lexingtonthemes.com">
        by © Lexington Themes</a> </p>
     </div>
    </div>
    <div class="flex">
     <div class="flex flex-col divide-y divide-neutral-200">
      <div class="flex h-0 flex-1"> <a href="https://lexingtonthemes.com/tutorials/how-to-create-a-tag-input-with-alpine-js-and-tailwind-css/" type="button" class="flex w-full items-center justify-center rounded-none rounded-tr-lg border border-transparent px-4 py-3 text-sm font-medium text-orange-600 hover:text-orange-500 focus:z-10 focus:outline-none focus:ring-2 focus:ring-orange-500">Tutorial</a> </div>
      <div class="flex h-0 flex-1"> <a href="https://github.com/Lexington-Themes/lexington-tutorials/blob/main/src/pages/tag-input/index.astro" class="flex w-full items-center justify-center rounded-none rounded-br-lg border border-transparent px-4 py-3 text-sm font-medium text-neutral-700 hover:text-neutral-500 focus:outline-none focus:ring-2 focus:ring-orange-500">Get the code</a> </div>
     </div>
    </div>
   </div>
  </div> 
 </div>
</section>

Related Examples

Responsive login form
form with social login buttons

Anonymous

8 months ago

553
Reset Password UI
Reset password screen built with pure HTML and Tailwind CSS. Includes new password and confirm password fields, password strength indicator, security requirements checklist, inline SVG icons, and a premium glassmorphism SaaS interface.

JUGENDRA GANGWAR

11 hours ago

4
tailwind contact form template
tailwind contact form template

Ti To

2 years ago

6.3k
Responsive Contact Form with TailwindCSS
A sleek and fully responsive contact form built with TailwindCSS. This form includes input fields for name, email, subject, and message, along with a stylish submit button. The design features a decorative background, smooth focus effects, and optimized mobile responsiveness.

SHARIFUL ISLAM

1 year ago

2k
Contact us form template with fabform

Ho O

1 year ago

1.7k
Simple Form 3

Mr Robot

4 years ago

9.9k
update user
it is the layout for creating an event

seth dridi

2 years ago

2.4k
form Événement
form Événement

Omer fils ELENGA

6 months ago

382
Checkout form

Sienna

3 years ago

15k
Simple login page template

Freja Jensen

3 years ago

13.3k
Sign in / Login Form

Bunny

4 years ago

14.6k
Contact Us

ariaw

11 months ago

939