Cart with alpinejs and tailwind css

How to add items to your cart with Tailwind CSS and Alpinejs

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

Input eCommerce

Author Michael Andreuzza

Tailwind v3.4 4.2k 8

Fork Fullscreen

<div class="prose text-gray-500 prose-sm prose-headings:font-normal mt-6 border-t pt-6 prose-headings:text-xl mx-auto max-w-sm w-full">
     <h4>Your items</h4>
     <ul>
      <template x-for="(item, index) in cart" :key="index">
       <li>
        <span x-text="`${item.name} x${item.quantity}`"></span> - $<span x-text="item.price * item.quantity" class="mr-4"></span>
        <button @click="increaseQuantity(index)" class="px-3 py-1 bg-gray-100 rounded-md text-sm font-semibold text-gray-800 hover:bg-gray-300 focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-2">+</button>
        <button @click="decreaseQuantity(index)" class="px-3 py-1 bg-gray-100 rounded-md text-sm font-semibold text-gray-800 hover:bg-gray-300 focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-2">-</button>
        <button @click="removeFromCart(index)" class="px-3 py-1 bg-gray-200 rounded-md text-sm font-semibold text-gray-800 hover:bg-gray-300 focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-2">Remove</button>
       </li>
      </template>
     </ul>
     <div>Total Price: $<span x-text="totalPrice()"></span></div>
    </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 add items to your cart with Tailwind CSS and Alpinejs
      </p>
      <p class="mt-2 text-xs text-orange-600 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/hhow-to-add-item-to-your-cart-with-tailwind-css-and-alpinejs/" 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-600 focus:z-10 focus:outline-none focus:ring-2 focus:ring-orange-600">Tutorial</a>
      </div>
      <div class="flex h-0 flex-1">
       <a href="https://github.com/Lexington-Themes/lexington-tutorials/blob/main/src/pages/cart/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-600">Get the code</a>
      </div>
     </div>
    </div>
   </div>
  </div>
  
 </div>
</section>

Related Examples

Date picker
Date picker example using flatpickr library

Lîmåã M

3 years ago

18.2k
bardui.com feedback modal
feedback form will be engaging and user-friendly. Ideal for collecting valuable user opinions and improving your website’s interaction. Explore practical examples and templates for seamless integration.

Muhammad Imran

2 years ago

2.6k
Login form

Gopi Yadav

4 years ago

12.1k
File input field

Lyra Ravensong

3 years ago

14.1k
Search input asasasas
sasasasasas

Notify ahmedabad

2 years ago

1.8k
Payment form (Alpine JS)

Mr Robot

4 years ago

10.7k
Upload file input field

Gopi Yadav

3 years ago

15.9k
Stacked Checkboxes

kishan pc

2 years ago

3.9k
Product Form - Reverie

S V

1 year ago

1.2k
Animated Pizza Menu Grid
A beautiful, interactive pizza product grid featuring smooth 360-degree rotation animations on hover. This free open-source component includes automatic dark mode support, responsive design (mobile, tablet, desktop), and an elegant "Add to Cart" button reveal effect. Built with HTML and Tailwind CSS - no dependencies required. Ideal for restaurant websites, food delivery platforms, e-commerce stores, or any product showcase needing eye-catching interactivity.

Homayoun

11 months ago

1.3k
Range Slider

Alok

4 years ago

14.7k
Simple OTP box Form
A Simple OTP form with full responsiveness && dark mode supported

Shariar Hasan

2 years ago

4.2k