Home
Mitchrey Dablo
first draft for color correction

first draft for color correction

Adiman appears to be a name or term that could have multiple interpretations depending on context. Since you're using it for a dashboard system, here are the possible definitions and how we can frame it:

This tailwind example is contributed by Mitchrey Dablo, on 22-Jul-2025. Component is made with Tailwind CSS v3. It is responsive. similar terms for this example are Typography, Title, h1, h2, h3

Heading

Author Mitchrey Dablo

Fork Fullscreen

<div class="flex-1 p-6 bg-[#000000]">
    
    <div class="flex justify-between items-center mb-6">
      <div class="flex items-center bg-[#1A1A1A] px-4 py-2 rounded shadow-inner w-1/3">
        <i class="fas fa-search text-[#CCCCCC] mr-2"></i>
        <input type="text" placeholder="Search..." class="bg-transparent w-full outline-none text-[#FFFFFF] placeholder-[#999999]" />
      </div>
      <div class="flex items-center space-x-6">
        <div class="relative">
          <i class="fas fa-bell text-[#66CC00] text-xl"></i>
          <span class="absolute -top-2 -right-2 bg-[#FF3366] text-xs px-1 rounded-full">3</span>
        </div>
        <div class="flex items-center space-x-2 bg-[#1A1A1A] px-3 py-1 rounded cursor-pointer hover:bg-[#99FF33] hover:text-[#000000]">
          <div class="bg-[#66CC00] text-black w-8 h-8 rounded-full flex items-center justify-center font-bold">AD</div>
          <span>Admin User</span>
          <i class="fas fa-chevron-down ml-1"></i>
        </div>
      </div>
    </div>

<div class="grid grid-cols-4 gap-4 mb-6">
      <div class="p-4 bg-[#1A1A1A] rounded shadow-md flex justify-between items-center">
        <div>
          <div class="text-2xl font-bold">1,248</div>
          <div class="text-[#CCCCCC]">Total Users</div>
        </div>
        <div class="bg-[#66CC00] p-3 rounded-full text-black">
          <i class="fas fa-users"></i>
        </div>
      </div>
      <div class="p-4 bg-[#1A1A1A] rounded shadow-md flex justify-between items-center">
        <div>
          <div class="text-2xl font-bold">342</div>
          <div class="text-[#CCCCCC]">Active Sessions</div>
        </div>
        <div class="bg-[#00FF00] p-3 rounded-full text-black">
          <i class="fas fa-signal"></i>
        </div>
      </div>
      <div class="p-4 bg-[#1A1A1A] rounded shadow-md flex justify-between items-center">
        <div>
          <div class="text-2xl font-bold">98%</div>
          <div class="text-[#CCCCCC]">System Health</div>
        </div>
        <div class="bg-[#99FF33] p-3 rounded-full text-black">
          <i class="fas fa-heartbeat"></i>
        </div>
      </div>
      <div class="p-4 bg-[#1A1A1A] rounded shadow-md flex justify-between items-center">
        <div>
          <div class="text-2xl font-bold">5</div>
          <div class="text-[#CCCCCC]">Recent Alerts</div>
        </div>
        <div class="bg-[#FF3366] p-3 rounded-full text-white">
          <i class="fas fa-exclamation-triangle"></i>
        </div>
      </div>
    </div>

<div class="grid grid-cols-3 gap-6">
      
      <div class="col-span-2 space-y-6">
        <div class="bg-[#1A1A1A] rounded shadow-md p-4">
          <div class="flex justify-between items-center mb-4">
            <h3 class="text-lg font-semibold">Activity Overview</h3>
            <select class="bg-transparent border border-[#CCCCCC] px-2 py-1 rounded text-[#FFFFFF]">
              <option>Last 7 Days</option>
              <option>Last 30 Days</option>
              <option>Last 90 Days</option>
            </select>
          </div>
          <div class="text-center text-[#999999] py-12">[Activity Chart Will Appear Here]</div>
        </div>

<div class="bg-[#1A1A1A] rounded shadow-md p-4">
          <div class="flex justify-between items-center mb-4">
            <h3 class="text-lg font-semibold">Recent Actions</h3>
            <button class="text-[#66CC00] hover:underline">View All</button>
          </div>
          <div class="space-y-4">
            <div class="flex items-center space-x-4">
              <i class="fas fa-user-plus text-[#66CC00]"></i>
              <div>
                <div>New user registered</div>
                <div class="text-sm text-[#999999]">2 minutes ago</div>
              </div>
            </div>
            <div class="flex items-center space-x-4">
              <i class="fas fa-file-upload text-[#66CC00]"></i>
              <div>
                <div>Document uploaded</div>
                <div class="text-sm text-[#999999]">15 minutes ago</div>
              </div>
            </div>
            <div class="flex items-center space-x-4">
              <i class="fas fa-cog text-[#66CC00]"></i>
              <div>
                <div>System settings updated</div>
                <div class="text-sm text-[#999999]">1 hour ago</div>
              </div>
            </div>
            <div class="flex items-center space-x-4">
              <i class="fas fa-shield-alt text-[#66CC00]"></i>
              <div>
                <div>

// Notification click handler
            const notification = document.querySelector('.notification');
            notification.addEventListener('click', function() {
                alert('You have 3 new notifications');
            });

// User profile dropdown (simplified)
            const userProfile = document.querySelector('.user-profile');
            userProfile.addEventListener('click', function() {
                alert('User profile menu would open here');
            });
        });

Related Examples

Fancy heading

Author:
Freja Jensen

2 years ago

15.7k
Fancy heading with borders

Author:
Freja Jensen

2 years ago

10.7k
Heading example

Author:
Freja Jensen

2 years ago

9.3k
Acode Master - FB & WhatsApp UI Combo
Description (meta description) ni tag ikoreshwa mu mutwe (head) wa HTML igaragaza mu ncamake icyo urubuga cyangwa urupapuro rwawe ruvuga. Iyi description ikoreshwa cyane na search engines (nka Google) mu kwerekana summary y’urubuga mu bisubizo by’ubushakashatsi.

Author:
Code Master(Mfuranziza Dusabe Hamza)

1 month ago

198
Contact Us / Enquiry-form Responsive

Author:
KULDEEP

3 weeks ago

219
Heading
Subtle Script Background - Large, very light script font in the background ("Amazing") Light-to-Dark Gradient Heading - Main heading fades from light gray to dark gray Layered Typography - Secondary heading in medium weight for contrast Elegant Divider - With centered italic text Minimalist Border Accents - Thin borders in corners for sophistication Responsive Design - Scales beautifully on all devices

Author:
KULDEEP

1 month ago

48
A Code Master Academy
A Code Master Academy – Empowering the Next Generation of Tech Leaders in Rwanda 👨‍💻 I'm Acode Master, the founder of A Code Master Academy, a practical and inclusive coding school based in Rubavu, Rwanda. The academy is dedicated to transforming lives by equipping unemployed youth and passionate learners with job-ready skills in modern software development.

Author:
Code Master(Mfuranziza Dusabe Hamza)

1 month ago

318
Heading

Author:
KULDEEP

4 weeks ago

210
Multicolor heading

Author:
Sienna

2 years ago

8k
Text with gradient underline
Gradient Underline Text. Decorate your text with a gradient underline for a modern touch.

Author:
Anonymous

1 year ago

9.8k
Stars: Sun and Moon Illustrations
I Created Sun and Moon Illustrations with Tailwind CSS, Embracing Light and Dark Modes

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

1 year ago

3.8k
Hero Section
Home hero section search bar

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

1 year ago

6.7k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components