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

413

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

AcodeMaster GameZone – Play Your Favorite Games Online
AcodeMaster GameZone is a modern gaming website where you can discover, explore, and play exciting games anytime, anywhere. Designed with smooth animations and a stylish dark theme using Tailwind CSS, it offers a fast and fun experience for every gamer.

Author:
Code Master(Mfuranziza Dusabe Hamza)

9 months ago

1.1k
Animated bento box.
A Coastal UI component (coastalui.com). This can be used as part of a bento box, great for showing connectivity between context, could be used beyond just showing tech stacks.

Author:
Coastal UI

11 months ago

1.4k
HERO

Author:
ABDO-SY

11 months ago

1k
flower
by salvator

Author:
Baraka Salvator

9 months ago

1.4k
Digital banking hero
Create a professional and trustworthy hero section for a banking landing page using TailwindCSS. This section features a bold, confidence-inspiring headline, a clear subheading emphasizing security and ease of banking, and a call-to-action button for account sign-ups or exploring services. With a modern, clean design, a background that reflects stability and innovation, and visually appealing elements, this hero section establishes credibility and trust. Ideal for online banking, fintech startups, and financial institutions, ensuring a seamless and engaging user experience.

Author:
SHARIFUL ISLAM

1 year ago

1.8k
Advance Designed hero section
We create a Advance animated hero section using tailwindcss and custom css

Author:
Akram Khan

1 year ago

2.3k
Nature Hero

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

1 year ago

2k
Full-page header for landing pages
an attention-grabbing header with a strong message and clear calls to action.

Author:
Junclarkaizen Pagu

2 years ago

11.9k
Hero section for website

Author:
Anonymous

1 year ago

2.1k
bears/beats/battlestar gallactica
bears beats battlestar gallactica

Author:
Anonymous

2 years ago

9.7k
A Fullscreen Hero Section

Author:
Hasan AlDoy (McDoy)

1 year ago

1.4k
Portfolio Hero Section

Author:
KULDEEP

8 months ago

671

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components