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

3D login form and responsive designe
Made a resposnvie form and 3d animation

Author:
Sufyan jutt

3 weeks ago

37
animation login form
An animated login form enhances the user experience by making the interaction visually engaging and modern. Below is a breakdown of key animation techniques used in animated login forms, plus examples you can use or customize.

Author:
Nicole Shalom

8 months ago

1.1k
form text

Author:
Severino Victtorino

9 months ago

904
Login Form with Icon

Author:
Prashant

3 years ago

18k
Responsive Classes List Table with Edit and Delete buttons using Tailwind CSS
This responsive classes list table is built using Tailwind CSS and features: - A clean layout with a header displaying column titles. - Action buttons for editing and deleting entries. - Responsive design that adapts to various screen sizes. - Easy customization options to fit your project's needs.

Author:
Anum Shahana

1 year ago

3.3k
LOGIN TEMPLATE
it is a login template

Author:
Sergio Gonzalez

7 months ago

763
LinkedIn Post UI Mockup
A static HTML and Tailwind CSS component designed to replicate the user interface of a LinkedIn post. This mockup accurately represents the post structure including the header (avatar, name, headline, timestamp), content area (text, optional media), engagement statistics (likes, comments, reposts), and the action bar (Like, Comment, Repost, Send). It's fully responsive, supports light and dark themes, and uses appropriate iconography and styling to closely mimic the LinkedIn feed experience.

Author:
Hamza Atig

9 months ago

1.2k
Contact us form template with fabform

Author:
Ho O

1 year ago

1.1k
Responsive Registration Form with Tailwind CSS
A clean, mobile-friendly user registration form built using Tailwind CSS. It includes fields for full name, email, password, terms agreement, and styled components with hover and focus transitions.

Author:
Sudip chaudhary

8 months ago

1.1k
Review popup form with toggle and stars
Review popup form with toggle and stars

Author:
Ayman Reifoun

9 months ago

806
Contact Form with fabform.io
Contact form

Author:
Ho O

1 year ago

1.3k
Contact Us / Enquiry-form Responsive

Author:
KULDEEP

7 months ago

1.2k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components