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

297

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

Donate Hero section
Best New tailwindcss,help save the children

Author:
ORGIN_DREAMS

8 months ago

698
Hero

Author:
ABDO-SY

10 months ago

1.4k
Nature Hero

$$@(\/)(\/)¥$ Author:
$@(\/)(\/)¥

1 year ago

1.9k
Générateur de Certificat Officiel
Générateur de Certificat Officiel

Author:
Omer fils ELENGA

2 weeks ago

15
animated hero

Author:
Crimson

1 year ago

3.2k
Startup page

Author:
ORGIN_DREAMS

8 months ago

579
Hero (with dark mode)
Full-width hero section with background image overlay. Includes headline, description text and CTA buttons. Supports dark mode and responsive design.

Author:
Maxim

1 year ago

1.4k
Single Page Portfolio

$$@(\/)(\/)¥$ Author:
$@(\/)(\/)¥

1 year ago

2.3k
Hero

Author:
Hasan AlDoy (McDoy)

1 year ago

1.5k
strawbery
by salvator

Author:
Baraka Salvator

7 months ago

855
Macbook Air 13" Mockup
A gorgeous component that can be used for landing pages, hero statements and more. Interested in our UI library? Check out the discord link in my bio.

Author:
Coastal UI

1 year ago

2.4k
Hero

Author:
ariaw

3 months ago

606

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components