Home
Bonimater
car delivary

car delivary

it is used especially in e-commerce when you you are going to deliver

This tailwind example is contributed by Bonimater, on 27-May-2025. Component is made with Tailwind CSS v3. It is responsive. similar terms for this example is Transitions

Animation

Author Bonimater

697

Fork Fullscreen

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>Responsive Truck Animation with Wheels</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <style>
    @keyframes drive {
      0% { left: -40%; }
      100% { left: 110%; }
    }
    @keyframes spin {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
    }
    .truck-animation {
      animation: drive 10s linear infinite;
    }
    .wheel-spin {
      animation: spin 1s linear infinite;
    }
  </style>
</head>
<body class="bg-blue-200 h-screen overflow-hidden relative">

<div class="absolute bottom-20 w-full h-24 bg-gray-800">
    <div class="h-1 w-full bg-yellow-300 mt-11 animate-pulse"></div>
  </div>

<div
    class="absolute bottom-36 truck-animation flex items-end space-x-1"
    style="left: -40%;"
  >
    
    <div
      class="relative bg-yellow-400 rounded-l-md shadow-md
             w-28 h-14 sm:w-36 sm:h-20 md:w-40 md:h-20"
    >
      
      <div
        class="absolute top-3 right-3 sm:top-4 sm:right-4 md:top-4 md:right-4
               w-2 h-5 sm:w-3 sm:h-7 md:w-3 md:h-8 bg-yellow-600 rounded-sm"
      ></div>

<div class="absolute bottom-[-20px] left-6 flex space-x-10">
        <div
          class="wheel-spin w-6 h-6 sm:w-8 sm:h-8 md:w-8 md:h-8
                 bg-black rounded-full border-2 border-white"
        ></div>
        <div
          class="wheel-spin w-6 h-6 sm:w-8 sm:h-8 md:w-8 md:h-8
                 bg-black rounded-full border-2 border-white"
        ></div>
      </div>
    </div>

<div
      class="relative bg-red-600 rounded-r-2xl shadow-md
             w-16 h-14 sm:w-20 sm:h-18 md:w-20 md:h-20"
    >
      
      <div
        class="absolute top-2 left-2 sm:top-3 sm:left-3 md:top-3 md:left-3
               w-5 h-4 sm:w-7 sm:h-5 md:w-7 md:h-5 bg-white rounded-sm"
      ></div>
      <div
        class="absolute top-2 right-2 sm:top-3 sm:right-3 md:top-3 md:right-3
               w-5 h-4 sm:w-7 sm:h-5 md:w-7 md:h-5 bg-white rounded-sm"
      ></div>

<div
        class="absolute bottom-2 left-4 sm:bottom-3 sm:left-5 md:bottom-3 md:left-5
               w-7 h-6 sm:w-9 sm:h-7 md:w-9 md:h-7 bg-red-700 rounded-sm"
      ></div>

<div class="absolute bottom-[-20px] left-1 flex space-x-2">
        <div
          class="wheel-spin w-6 h-6 sm:w-8 sm:h-8 md:w-8 md:h-8
                 bg-black rounded-full border-2 border-white"
        ></div>
        <div
          class="wheel-spin w-6 h-6 sm:w-8 sm:h-8 md:w-8 md:h-8
                 bg-black rounded-full border-2 border-white"
        ></div>
      </div>
    </div>
  </div>

</body>
</html>

Related Examples

Why Us section with hover animation
Why to choose us section, responsive and hove animation

Author:
Amit Pachange

1 year ago

5k
REGISTER - CTA - SECTION animation

Author:
ABDO-SY

8 months ago

617
Button
Button When Hover and page Reload then Button text will show the animation

Author:
Chitranshu

1 year ago

2.6k
chair
by salvator

Author:
Baraka Salvator

7 months ago

815
Loading dots
Black Loading dots

Author:
Никита (Whiso)

11 months ago

1.9k
Animated Light/Dark Mode Toggle
👉🏻3D glow effects on knob & track 👉🏻Gradient transitions that look holographic 👉🏻Animated pulse when active 👉🏻Dark background gradient instead of a flat color 👉🏻Emoji swap (☀️ → 🌙)

Author:
UI-Templates

2 months ago

264
Plug and Play Animated Button for Hero Statements / Landing Pages
REMOVE the bg-black from the outside <button/> div, if you are already using a black background. Besides this, the button is plug and play! Know errors: You may need to remove animate-spin for your usecase, depending on framework rendering. For SvelteKit, animate-spin is NOT needed. But the [animation:spin_4s]... is always necessary for a smooth effect. Check out my profile to join my community online or add me on LinkedIn.

Author:
Coastal UI

1 year ago

1.9k
Scooby’s Hello – A Tailwind CSS Cartoon Animation
A playful animation built with Tailwind CSS and minimal custom CSS, featuring a cartoon-style Scooby-inspired dog sliding in from the left, wagging its tail, and cheerfully saying "Hello!"—perfect for adding personality to a fun web project.

Author:
Bonimater

7 months ago

580
Journey Through the Solar System 🚀
Embark on a stunning animated voyage across our solar system. Watch as your spaceship glides past the Sun, planets, and distant Pluto — all brought to life with simple, clean Tailwind CSS. A fun and educational journey through the cosmos!

Author:
Bonimater

7 months ago

531
ForK blocks animations
ForK blocks animations

Author:
Yor Rodriguez

11 months ago

1.6k
Animated cards

Author:
Michael Andreuzza

1 year ago

6.8k
car delivary
car delivary

Author:
Bonimater

6 months ago

588

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components