Home
Augustin
Adiman

Adiman

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 Augustin, on 22-May-2025. Component is made with Tailwind CSS v3. It is responsive. similar terms for this example are Typography, Title, h1, h2, h3

Heading

Author Augustin

886

Fork Fullscreen

<div class="main-content">
            
            <div class="header">
                <div class="search-bar">
                    <i class="fas fa-search"></i>
                    <input type="text" placeholder="Search...">
                </div>
                <div class="user-actions">
                    <div class="notification">
                        <i class="fas fa-bell"></i>
                        <span class="notification-badge">3</span>
                    </div>
                    <div class="user-profile">
                        <div class="user-avatar">AD</div>
                        <span>Admin User</span>
                        <i class="fas fa-chevron-down" style="margin-left: 10px;"></i>
                    </div>
                </div>
            </div>

<div class="stats-container">
                <div class="stat-card">
                    <div class="stat-card-header">
                        <div>
                            <div class="stat-value">1,248</div>
                            <div class="stat-label">Total Users</div>
                        </div>
                        <div class="stat-icon users">
                            <i class="fas fa-users"></i>
                        </div>
                    </div>
                </div>
                <div class="stat-card">
                    <div class="stat-card-header">
                        <div>
                            <div class="stat-value">342</div>
                            <div class="stat-label">Active Sessions</div>
                        </div>
                        <div class="stat-icon sessions">
                            <i class="fas fa-signal"></i>
                        </div>
                    </div>
                </div>
                <div class="stat-card">
                    <div class="stat-card-header">
                        <div>
                            <div class="stat-value">98%</div>
                            <div class="stat-label">System Health</div>
                        </div>
                        <div class="stat-icon health">
                            <i class="fas fa-heartbeat"></i>
                        </div>
                    </div>
                </div>
                <div class="stat-card">
                    <div class="stat-card-header">
                        <div>
                            <div class="stat-value">5</div>
                            <div class="stat-label">Recent Alerts</div>
                        </div>
                        <div class="stat-icon alerts">
                            <i class="fas fa-exclamation-triangle"></i>
                        </div>
                    </div>
                </div>
            </div>

<div class="content-grid">
                <div class="left-column">
                    
                    <div class="chart-container">
                        <div class="section-header">
                            <h3 class="section-title">Activity Overview</h3>
                            <select style="padding: 5px; border-radius: 5px; border: 1px solid #ddd;">
                                <option>Last 7 Days</option>
                                <option>Last 30 Days</option>
                                <option>Last 90 Days</option>
                            </select>
                        </div>
                        <div class="chart-placeholder">
                            [Activity Chart Will Appear Here]
                        </div>
                    </div>

<div class="recent-actions">
                        <div class="section-header">
                            <h3 class="section-title">Recent Actions</h3>
                            <button style="background: none; border: none; color: var(--primary); cursor: pointer;">
                                View All
                            </button>
                        </div>
                        <div class="actions-list">
                            <div class="action-item">
                                <div class="action-icon">
                                    <i class="fas fa-user-plus"></i>
                                </div>
                                <div class="action-details">
                                    <div class="action-title">New user registered</div>
                                    <div class="action-time">2 minutes ago</div>
                                </div>
                            </div>
                            <div class="action-item">
                                <div class="action-icon">
                                    <i class="fas fa-file-upload"></i>
                                </div>
                                <div class="action-details">
                                    <div class="action-title">Document uploaded</div>
                                    <div class="action-time">15 minutes ago</div>
                                </div>
                            </div>
                            <div class="action-item">
                                <div class="action-icon">
                                    <i class="fas fa-cog"></i>
                                </div>
                                <div class="action-details">
                                    <div class="action-title">System settings updated</div>
                                    <div class="action-time">1 hour ago</div>
                                </div>
                            </div>
                            <div class="action-item">
                                <div class="action-icon">
                                    <i class="fas fa-shield-alt"></i>
                                </div>
                                <div class="action-details">
                                    <div class="action-title">Security patch applied</div>
                                    <div class="action-time">3 hours ago</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

<div class="right-column">
                    
                    <div class="system-status">
                        <div class="section-header">
                            <h3 class="section-title">System Status</h3>
                            <i class="fas fa-sync-alt" style="color: var(--gray); cursor: pointer;"></i>
                        </div>
                        <div class="status-list">
                            <div class="status-item">
                                <span class="status-label">Server Uptime</span>
                                <span class="status-value good">99.9%</span>
                            </div>
                            <div class="status-item">
                                <span class="status-label">CPU Usage</span>
                                <span class="status-value">32%</span>
                            </div>
                            <div class="status-item">
                                <span class="status-label">Memory Usage</span>
                                <span class="status-value">45%</span>
                            </div>
                            <div class="status-item">
                                <span class="status-label">Database</span>
                                <span class="status-value good">Normal</span>
                            </div>
                            <div class="status-item">
                                <span class="status-label">Last Backup</span>
                                <span class="status-value warning">12 hours ago</span>
                            </div>
                        </div>
                    </div>

<div class="quick-actions">
                        <button class="action-btn">
                            <i class="fas fa-user-plus"></i>
                            <span>Add User</span>
                        </button>
                        <button class="action-btn">
                            <i class="fas fa-file-export"></i>
                            <span>Export Data</span>
                        </button>
                        <button class="action-btn">
                            <i class="fas fa-cog"></i>
                            <span>Settings</span>
                        </button>
                        <button class="action-btn">
                            <i class="fas fa-question-circle"></i>
                            <span>Help</span>
                        </button>
                    </div>
                </div>
            </div>
        </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

Modern Neon Gradient with Diagonal Script
(Purple/Blue/Pink Color Scheme)

Author:
KULDEEP

3 months ago

575
Heading design

Author:
Emily Tan

2 years ago

11.6k
Hero Section
Home hero section search bar

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

1 year ago

7.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)

4 months ago

289
Navbar
Navbar

Author:
TakaMorY

1 month ago

197
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:

Author:
Mitchrey Dablo

2 months ago

328
paying taxes
Tonny#_paying taxes in marketing Product and good

Author:
Nirere Esther

4 months ago

289
Heading Style

Author:
KULDEEP

4 months ago

345
Image embed in a text
This example combines text and images to create visually appealing content.

Author:
Zephyr

2 years ago

13.4k
Underline Gradient
underlined gradient using background color

Author:
Nikolai

1 year ago

2.6k
Multicolor heading

Author:
Sienna

2 years ago

8.2k
Text gradient
very subtle gradients for beautiful headings

Author:
Mr Robot

3 years ago

11.6k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components