Home
Michael Andreuzza
Tag input with Tailwind CSS and Alpinejs

Tag input with Tailwind CSS and Alpinejs

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

Form

Author Michael Andreuzza

3.1k

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

Comment form

Author:
Sophia Baker

3 years ago

12.5k
Login Form with Icon

Author:
Akai

4 months ago

165
Contact us form template

Author:
Lukas Müller

3 years ago

9.4k
Radio Input Group
Just fancy radio input group

Author:
farid

6 months ago

677
tailwind contact form
tailwind contact form

Author:
Geoffrey Callaghan

1 year ago

2.4k
File Upload

Author:
Rajesh Maheshwari

11 months ago

1k
Sign up form
simple full-height register form

Author:
Lukas Müller

3 years ago

12.9k
Multi-Step Form with Progress Indicator
reusable "Multi-Step Form with Progress Indicator" component built with HTML, CSS, and Tailwind CSS. It’s a practical component for forms like signups, surveys, or checkout processes.

Author:
Ayyamperumal S

1 year ago

2.1k
Credit / Debit card payment information form

Author:
Santos78

2 years ago

19.8k
Login template

Author:
Gabriel Urbano

2 years ago

6.6k
Simple Login Form
Very basic responsive login form. The form is centered within a white card with a shadow, featuring input fields for username and password. The design is clean and user-friendly.

Author:
Bunny

3 years ago

50.1k
Tailwind CSS Contact Form
A clean contact form with a supporting image, built using Tailwind CSS by ReadymadeUI. Browse more free UI components and templates at readymadeui.com.

Author:
ReadyMadeUI

2 months ago

141

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components