clothes

shopp clothes

This tailwind example is contributed by Nirere Esther, on 28-May-2025. Component is made with Tailwind CSS v3. It is responsive.

Shopping cart

Author Nirere Esther

673

Fork Fullscreen

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Market Seller Pulling Off Clothes</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f5f5f5;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            overflow: hidden;
        }

.market-scene {
            position: relative;
            width: 800px;
            height: 500px;
            background-color: #8bc34a;
            border-radius: 10px;
            box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
            overflow: hidden;
        }

.market-stall {
            position: absolute;
            bottom: 50px;
            left: 100px;
            width: 600px;
            height: 300px;
            background-color: #795548;
            border-radius: 5px;
        }

.stall-top {
            position: absolute;
            top: -20px;
            left: 0;
            width: 100%;
            height: 40px;
            background-color: #5d4037;
            border-radius: 5px 5px 0 0;
        }

.clothes-rack {
            position: absolute;
            top: 20px;
            left: 50px;
            width: 500px;
            height: 200px;
            background-color: #d7ccc8;
            border-radius: 5px;
            display: flex;
            justify-content: space-around;
            align-items: center;
        }

.clothes {
            width: 60px;
            height: 120px;
            background-color: #e91e63;
            border-radius: 3px;
            transition: transform 0.3s;
            position: relative;
        }

.clothes:nth-child(2) {
            background-color: #2196f3;
        }

.clothes:nth-child(3) {
            background-color: #4caf50;
        }

.clothes:nth-child(4) {
            background-color: #ffeb3b;
        }

.clothes:nth-child(5) {
            background-color: #9c27b0;
        }

.seller {
            position: absolute;
            bottom: 50px;
            right: 150px;
            width: 80px;
            height: 180px;
        }

.seller-head {
            position: absolute;
            top: 0;
            left: 20px;
            width: 40px;
            height: 40px;
            background-color: #ffdbac;
            border-radius: 50%;
        }

.seller-body {
            position: absolute;
            top: 40px;
            left: 10px;
            width: 60px;
            height: 80px;
            background-color: #3f51b5;
            border-radius: 5px;
        }

.seller-arm {
            position: absolute;
            top: 50px;
            left: -30px;
            width: 30px;
            height: 15px;
            background-color: #ffdbac;
            border-radius: 10px;
            transform-origin: right center;
            animation: pullArm 2s infinite;
        }

.seller-legs {
            position: absolute;
            top: 120px;
            left: 15px;
            width: 50px;
            height: 60px;
            display: flex;
            justify-content: space-between;
        }

.leg {
            width: 20px;
            height: 60px;
            background-color: #303f9f;
            border-radius: 0 0 5px 5px;
        }

.pulled-clothes {
            position: absolute;
            width: 60px;
            height: 120px;
            background-color: #e91e63;
            border-radius: 3px;
            top: 100px;
            right: 230px;
            opacity: 0;
            animation: pullClothes 2s infinite;
        }

@keyframes pullArm {
            0%, 100% {
                transform: rotate(0deg);
            }
            50% {
                transform: rotate(-45deg);
            }
        }

@keyframes pullClothes {
            0%, 60% {
                opacity: 0;
                transform: translateX(0) translateY(0);
            }
            30% {
                opacity: 1;
                transform: translateX(-80px) translateY(-20px);
            }
            100% {
                opacity: 0;
                transform: translateX(-150px) translateY(-50px);
            }
        }

.market-title {
            position: absolute;
            top: 20px;
            left: 0;
            width: 100%;
            text-align: center;
            font-size: 24px;
            color: white;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
        }
    </style>
</head>
<body>
    <div class="market-scene">
        <h1 class="market-title">Clothes Market Stall</h1>
        <div class="market-stall">
            <div class="stall-top"></div>
            <div class="clothes-rack">
                <div class="clothes"></div>
                <div class="clothes"></div>
                <div class="clothes"></div>
                <div class="clothes"></div>
                <div class="clothes"></div>
            </div>
        </div>
        <div class="seller">
            <div class="seller-head"></div>
            <div class="seller-body"></div>
            <div class="seller-arm"></div>
            <div class="seller-legs">
                <div class="leg"></div>
                <div class="leg"></div>
            </div>
        </div>
        <div class="pulled-clothes"></div>
    </div>
</body>
</html>

Related Examples

Shopping Cart -Card

Author:
ABDO-SY

11 months ago

1.6k
Shoping Cart Popup

Author:
ABDO-SY

11 months ago

1.2k
Shoping cart

Author:
Moriba Traore

2 years ago

13.3k
shopp of shoes
shopp style

Author:
Nezerwa Debora

8 months ago

962
Animated hero section template for a ecommerce store
A bold, animated hero section template that brings personality and energy to your ecommerce shoe store. Features floating 3D elements, vibrant gradients, and playful animations that make your products pop off the screen. Features: - Light & dark mode with smooth transitions and persistent theme preference - Fully responsive design optimized for mobile, tablet, and desktop - Eye-catching floating shoe display with rotating decorative elements - Animated gradient backgrounds and glowing CTAs - Modern color scheme with pink, purple, and yellow accents - Social proof stats section for building trust - Clean, semantic HTML with Tailwind CSS utility classes - Zero dependencies - just copy, customize, and deploy - Open source and free to use for commercial projects For: Sneaker stores, footwear brands, fashion ecommerce sites, streetwear shops, or any modern retail brand looking to make a memorable first impression with a hero section that doesn't take itself too seriously. Quick Setup: Simply replace the emoji placeholder with your product image, update the copy to match your brand voice, adjust the color gradients to your palette, and you're ready to launch!

Author:
Ijila Itunu

1 month ago

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

Author:
Abhiraj

1 year ago

1.6k
Shopping Cart
Shopping Cart

Author:
Tanvir Hasan Bappy (Tanvir)

9 months ago

1.2k
Shopping cart template

Author:
JaxStone

3 years ago

16.1k
shopping
Online shopping will help us find the things we want using our phone or computer and have them delivered to us.

Author:
Nishimwe Jeanine

8 months ago

968
Checkout card

Author:
JaxStone

2 years ago

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

Author:
Anonymous

2 years ago

8.3k
Product Details Page
This section will show all the information about a selected product, including its title, description, price, images, and specifications.

Author:
mohit kulkarni

4 months ago

940

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components