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

Responsive Hero Section
Key features of this hero section: 1. Responsive layout: Uses a column layout on mobile and switches to a row layout on medium screens and larger. 2. Left side: - Company name as a large heading - Brief description - "Learn More" button 3. Right side: - "Why Choose Us?" section with bullet points - Two call-to-action buttons: "Get Started" and "Contact Sales" 4. Styling: - Uses Tailwind's utility classes for responsive design, colors, spacing, and typography - Incorporates a shadow and rounded corners for the right-side content box - Includes hover effects on buttons for better interactivity This hero section will be fully responsive: - On mobile devices, it will stack vertically with the company info on top and the details below. - On larger screens, it will display in a two-column layout. The use of Tailwind CSS classes ensures that the design is consistent and easily adjustable. You can further customize the colors, fonts, and spacing to match your brand's specific design guidelines. Would you like me to explain any part of this code or make any adjustments?

Author:
zobaidul kaziex

1 year ago

2.8k
home
html , css

Author:
Hacker Development

9 months ago

1.9k
HERO

Author:
ABDO-SY

10 months ago

963
Minimalistic hero section

Author:
Sophia Baker

3 years ago

11.8k
less is more
less is more by salvator

Author:
Baraka Salvator

7 months ago

1.1k
Hero section
Hero section for your project

Author:
Prajwal Hallale

3 years ago

9.1k
Hero section - Htmlwind
Simple centered hero section

Author:
Htmlwind

8 months ago

932
Tailwind Pricing Section 2
Fully Responsive Pricing Section

Author:
AKASH GANDHAR

1 year ago

2.2k
Hero section with button

Author:
Samuel Dawson

3 years ago

12.8k
Creative Hero Section

Author:
Ijila Itunu

9 months ago

1.4k
Landi page template
con un cuerpo libre

Author:
Raul antonio de la cruz hernandez

1 month ago

60
Brutalist Hero

Author:
threehymns

1 year ago

2.6k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components