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

1.6k

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

Multicolor heading

Author:
Sienna

3 years ago

8.7k
Heading title

Author:
Laurits

3 years ago

19.4k
Underline Gradient
underlined gradient using background color

Author:
Nikolai

1 year ago

3k
CONTACT US - GET IN TOUCH - PORTFOLIO
Responsive "Contact us" section, dark-mode-friendly contact area featuring stylish cards with icons displaying essential contact details.

Author:
ABDO-SY

1 year ago

1.8k
vav bar
html , css

Author:
Hacker Development

9 months ago

1.1k
Fancy heading

Author:
Freja Jensen

3 years ago

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

Author:
KULDEEP

8 months ago

1k
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

7 months ago

622
Animated Text Rotator | Smooth Tailwindcss Text Transition Effects
Beautiful animated text rotation component with smooth fade transitions. Perfect for hero sections, showcasing features, and engaging website visitors with dynamic content.

Author:
Homayoun

3 months ago

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

Author:
Anonymous

2 years ago

10.8k
Heading design

Author:
Emily Tan

3 years ago

12k
Heading

Author:
KULDEEP

8 months ago

1k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components