Home
Michael Andreuzza
Cart with alpinejs and tailwind css

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 CSS v3. It is responsive.

Input eCommerce

Author Michael Andreuzza

2.7k

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

Incentives
tailwind css Incentives

Author:
Anonymous

1 year ago

4.9k
Payment Form

Author:
ABDO-SY

5 months ago

846
Responsive Sign-Up Form with TailwindCSS
Create a visually appealing and fully responsive sign-up form using TailwindCSS. This form includes input fields for full name, mobile number, email, password, and confirm password, along with a gradient sign-up button. Designed with simplicity and flexibility, it is perfect for modern web applications and easy to integrate into any project.

Author:
SHARIFUL ISLAM

6 months ago

1.1k
Product Page
This is a product page, made with HTML and Tailwind CSS, in desktop have 3 columns, Models/Variants - Images with thumbnails - Product Details. On the other hand have 2 images technicals, finally descriptions and button to add to cart.

Author:
Andrés Abarzúa

3 weeks ago

134
beautiful tailwind contact form
beautiful tailwind contact form

Author:
Geoffrey Callaghan

1 year ago

5.5k
Radio Buttons
Users can click anywhere on the input field to select the radio option

Author:
Prajwal Hallale

3 years ago

16.7k
bardui.com badge

Author:
Muhammad Imran

10 months ago

1.4k
Domain For Sale Template
Domain For Sale Template

Author:
Geoffrey Callaghan

1 year ago

3.9k
File upload with icon

Author:
Fagundo67

2 years ago

17.1k
YouTube Community Post UI Mockup
A static HTML and Tailwind CSS component mimicking the user interface of a YouTube Community Post. This mockup features the channel header (avatar, name, verified badge, timestamp), post content (text and optional media), engagement actions (Like, Dislike, Comment, Share with counts), and the 'Add a comment' section. It's designed to be responsive, supports YouTube's light and dark themes via custom styling, and uses accurate iconography.

Author:
Hamza Atig

4 months ago

580
Modern E-commerce Product Card with TailwindCSS
This product card is designed for e-commerce platforms using TailwindCSS. It features a discount badge, product image carousel, quick view and quick order buttons, ratings, product name, brand details, dynamic pricing with a strike-through original price, and a prominent add-to-cart button. The clean and professional layout is perfect for showcasing products on online stores.

Author:
SHARIFUL ISLAM

6 months ago

1.4k
File upload input section with file preview

Author:
Noob

2 years ago

11.6k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components