Home
Ramkesh Gupta
Inventory

Inventory

management

This tailwind example is contributed by Ramkesh Gupta, on 25-Oct-2025. Component is made with Tailwind CSS v3. It is responsive.

Hero

Author Ramkesh Gupta

345

Fork Fullscreen

<div class="bg-white dark:bg-gray-900 relative z-20 overflow-hidden">
  <div class="container mx-auto px-6 py-16
              lg:grid lg:grid-cols-12 lg:items-center lg:gap-16
              flex flex-col-reverse">

<div class="lg:col-span-5 sm:w-full max-w-2xl">
      <span class="w-20 h-2 bg-gray-900 dark:bg-white mb-8 block"></span>

<h1 class="font-bebas-neue uppercase
                 text-5xl sm:text-7xl xl:text-7xl
                 font-black leading-[0.95] tracking-tight
                 text-gray-900 dark:text-white">
        Inventory
        <span class="block text-4xl sm:text-6xl text-emerald-600">
          Management
        </span>
      </h1>

<p class="mt-4 text-sm sm:text-base text-gray-700 dark:text-gray-300">
        Track stock in real-time, automate reorders, and see your true margins at a glance.
        No spreadsheets. No chaos. Just <span class="font-semibold">control</span>.
      </p>

<div class="flex mt-8">
        <a href="#" class="uppercase py-2 px-5 rounded-lg bg-emerald-600 border-2 border-transparent text-white text-md mr-4 hover:bg-emerald-500 transition">
          Open Dashboard
        </a>
        <a href="#" class="uppercase py-2 px-5 rounded-lg bg-transparent border-2 border-emerald-600 text-emerald-600 dark:text-white hover:bg-emerald-600 hover:text-white text-md transition">
          Live Demo
        </a>
      </div>

<div class="mt-6 flex flex-wrap gap-3 text-xs">
        <span class="px-3 py-1 rounded-full bg-emerald-50 text-emerald-700 dark:bg-emerald-900/40 dark:text-emerald-200">Low-stock alerts</span>
        <span class="px-3 py-1 rounded-full bg-emerald-50 text-emerald-700 dark:bg-emerald-900/40 dark:text-emerald-200">Barcode ready</span>
        <span class="px-3 py-1 rounded-full bg-emerald-50 text-emerald-700 dark:bg-emerald-900/40 dark:text-emerald-200">CSV import/export</span>
      </div>
    </div>

<div class="lg:col-span-7 w-full">
      <div class="max-w-lg md:max-w-2xl ml-auto
                  rounded-3xl border border-gray-200 dark:border-white/10
                  bg-white dark:bg-gray-800 shadow-xl p-5 animate-float">
        <div class="flex items-center justify-between mb-4">
          <div class="h-3 w-24 bg-gray-200 dark:bg-white/10 rounded"></div>
          <div class="flex gap-2">
            <span class="h-2.5 w-2.5 rounded-full bg-emerald-500"></span>
            <span class="h-2.5 w-2.5 rounded-full bg-amber-500"></span>
            <span class="h-2.5 w-2.5 rounded-full bg-rose-500"></span>
          </div>
        </div>
        <div class="grid grid-cols-3 gap-3 mb-5">
          <div class="p-4 rounded-2xl bg-emerald-50 dark:bg-emerald-900/30">
            <div class="text-xs text-emerald-700 dark:text-emerald-200">In Stock</div>
            <div class="text-2xl font-bold text-emerald-700 dark:text-emerald-200">1,284</div>
          </div>
          <div class="p-4 rounded-2xl bg-gray-50 dark:bg-white/5">
            <div class="text-xs text-gray-600 dark:text-gray-300">Low Stock</div>
            <div class="text-2xl font-bold text-gray-900 dark:text-white">23</div>
          </div>
          <div class="p-4 rounded-2xl bg-gray-50 dark:bg-white/5">
            <div class="text-xs text-gray-600 dark:text-gray-300">Value (Cost)</div>
            <div class="text-2xl font-bold text-gray-900 dark:text-white">₹ 4.6L</div>
          </div>
        </div>
        <div class="h-36 rounded-2xl bg-gray-50 dark:bg-white/5 flex items-center justify-center text-gray-400 dark:text-gray-500 text-sm">
          Sales & Stock Chart
        </div>
      </div>
    </div>

</div>
</div>

Related Examples

Hero Section with Dark Mode
Hero Section template using Tailwind CSS. It adapts to light and dark modes using the dark: variant and still fits seamlessly under your fixed navbar.

Author:
Rathanak Phan

8 months ago

789
Hero Section
Modern Gradient Color Scheme - Uses a professional purple-to-teal gradient for visual appeal Animated Elements: Floating decorative circles with subtle animation Fade-in effect for the main illustration Pulsing status indicator Engaging Typography: Gradient text for key phrases Responsive font sizing Clean Poppins font family Social Proof Elements: Client avatars Star ratings Trust indicators ("Trusted by 500+ businesses") Call-to-Action Buttons: Primary gradient button Secondary outlined button Hover effects and transitions Visual Hierarchy: Clear headline with emphasis on transformation Supporting subheading Balanced layout with image Performance Indicators: ROI badge Growth metric badge Responsive Design: Works on mobile and desktop Grid layout that adapts to screen size

Author:
KULDEEP

7 months ago

1k
Hero

Author:
Aman kumar

2 years ago

7k
My Coding Journey
To transform a standard timeline into an engaging, scroll-driven narrative experience.

Author:
Code Master(Mfuranziza Dusabe Hamza)

4 months ago

580
Hero Section with Tailwind CSS With Buttons
A modern, responsive Hero Section designed with Tailwind CSS to capture attention and drive engagement. Featuring a bold heading, compelling CTA buttons, and a high-quality image, this design enhances user experience and conversions. Ideal for landing pages, portfolios, and business websites, ensuring a strong first impression and higher interaction rates.

Author:
Abdul Baset Bappy

10 months ago

971
3d Box
Let's build a 3d world empowered by Orgin Dreams.these are 3d objects

Author:
ORGIN_DREAMS

8 months ago

686
Tailwind Pricing Section
Fully Responsive Pricing Section

Author:
AKASH GANDHAR

1 year ago

1.8k
Landing page

Author:
Maxim

10 months ago

1.8k
hero section fullpage

Author:
Leon Bachmann

3 years ago

11.7k
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

8 months ago

607
Travel Landing Page: Australia

Author:
Maxim

10 months ago

2.2k
Hero Banner
visually striking banner section It features pattern background with using SVG

Author:
Cosimo Fazio

1 year ago

6.6k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components