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

132

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