Inventory

management

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

Hero

Author Ramkesh Gupta

Tailwind v3.4 893 1

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

Simple Hero Section
Hero Section using Tailwind

Ahita Bisma Adlula

1 year ago

1.8k
Free SEO Audit & Analysis Tool
Instant SEO analysis of your website. Check 50+ ranking factors including on-page SEO, technical issues, and mobile performance.

MD Mostafa Niloy

10 months ago

758
Perspective 3D
Perspective 3D

Omer fils ELENGA

9 months ago

747
Trading
used to trade something

nii fanny

1 year ago

1.1k
Hero with SVG background
It has a nice 'Sign Up with Google' CTA button

Santiago Hernandez

2 years ago

2.5k
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?

Vernon Francis

2 years ago

2.5k
Smooth Slide-in Animation for Text in Tailwind CSS
Learn how to create a smooth slide-in animation for text using Tailwind CSS. This guide covers defining custom animations in tailwind.config.js and applying them to elements for a modern and engaging UI effect. 🚀

Vikas Kushwah

1 year ago

2.7k
Banner - Hero - Splash Section

ABDO-SY

1 year ago

1.9k
Product Page
Showcase for the product.

Prem..

4 years ago

34.7k
future ai robot
this an ai template by salvator

Baraka Salvator

1 year ago

1.7k
Hero with video background

Samuel Dawson

3 years ago

17.8k
test
test

Anonymous

1 year ago

1.1k