Home
JaxStone
Checkout card

Checkout card

This tailwind example is contributed by JaxStone, on 07-Mar-2023. Component is made with Tailwind CSS v3. It is responsive.

Shopping cart

Author JaxStone

10.2k

Fork Fullscreen

<div class="flex flex-col justify-center items-center min-h-screen">
    <div class="bg-gray-100 rounded-lg shadow-lg p-6">
        <h1 class="text-2xl font-bold mb-6">Shopping Cart</h1>
        <div class="flex justify-between mb-4">
            <div class="flex items-center">
                <img src="https://via.placeholder.com/80" alt="Product Image" class="mr-4">
                <div>
                    <h2 class="font-bold">Product Name</h2>
                    <p class="text-gray-700">Product Description</p>
                </div>
            </div>
            <div class="flex items-center">
                <button class="text-red-500 hover:text-red-700"><i class="fas fa-trash"></i></button>
                <div class="mx-4">
                    <input type="number" value="1" class="w-16 text-center">
                </div>
                <span class="font-bold">$19.99</span>
            </div>
        </div>
        <hr class="my-4">
        <div class="flex justify-between items-center">
            <span class="font-bold">Subtotal:</span>
            <span class="font-bold">$19.99</span>
        </div>
        <div class="flex justify-between items-center mt-4">
            <span>Taxes:</span>
            <span>$1.00</span>
        </div>
        <hr class="my-4">
        <div class="flex justify-between items-center">
            <span class="font-bold">Total:</span>
            <span class="font-bold">$20.99</span>
        </div>
        <div class="flex justify-center mt-6">
            <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">Checkout</button>
        </div>
    </div>
</div>

Related Examples

Checkout page template

Author:
JaxStone

2 years ago

22.9k
Shopping cart template

Author:
JaxStone

2 years ago

15.5k
Shoping cart

Author:
Moriba Traore

2 years ago

12.6k
Shopping cart

Author:
Ron Hicks

2 years ago

15.3k
Shopping cart page
this is the responsible shopping cart page

Author:
Anonymous

1 year ago

6.6k
Shopping Cart
Shopping Cart

Author:
Tanvir Hasan Bappy (Tanvir)

2 weeks ago

144
Shoping Cart Popup

Author:
ABDO-SY

1 month ago

360
shopping cart page product
Product page design single product, connect me for jsx https://abhirajk.vercel.app/

Author:
Abhiraj

3 months ago

818
shoping products
Shopping products

Author:
Abhiraj

3 months ago

833
Shopping Cart -Card

Author:
ABDO-SY

2 months ago

597
Button With Loader
Tailwind Loader

Author:
Md. Tofayel islam

1 year ago

2.2k
Cards - Users Card
This Users Card design includes: 1. Responsive layout using Flexbox 2. Indigo-800 and Blue-900 color scheme 3. Dark mode support 4. User list with avatars, names, and roles 5. Hover effects on user items 6. "Add Member" button 7. Card footer with team member count 8. Subtle animations and transitions 9. Accessibility considerations (proper heading structure, color contrast) Key features: - The background uses a gradient from Indigo-800 to Blue-900 - The card has a white background in light mode and dark gray in dark mode - Text colors are adjusted for readability in both light and dark modes - User avatars have a border color that changes in dark mode - User items have a hover effect that scales them slightly - The "Add Member" button uses Indigo-800 with a Blue-900 hover state - Dark mode is automatically applied based on system preferences - The entire card fades in on load for a smooth entrance - The card has a hover effect that enhances its shadow This design provides a clean, professional look for displaying team members while incorporating the requested color scheme and maintaining good usability across different devices and color modes.

Author:
nejaa badr

6 months ago

1.5k

Explore components by Tags

Didn't find component you were looking for?

Search from 2100+ components