Home
Hamza Atig
Atlas AI Analyst Workspace

Atlas AI Analyst Workspace

A premium, document-centric AI chat interface that moves beyond standard bubbles into a professional "editor" layout. Designed for power users, it features a floating glassmorphic command bar, a dedicated "Memory & Context" sidebar with interactive widgets, and rich data visualization blocks. The aesthetic combines a deep charcoal base with luxury bronze/orange accents, making it ideal for high-end SaaS tools, financial analysis dashboards, or enterprise AI assistants.

This tailwind example is contributed by Hamza Atig, on 27-Dec-2025. Component is made with Tailwind CSS v3. It is responsive. similar terms for this example are simulation,copy,dummy,miniature,like

Other Mockup

Author Hamza Atig

Fork Fullscreen

<main class="flex-1 flex flex-col relative bg-[#09090b]">
        
        <header class="h-16 flex items-center justify-between px-8 border-b border-white/5 bg-[#09090b]/50 backdrop-blur-md z-10 sticky top-0">
            <div class="flex items-center gap-2 text-sm">
                <span class="text-zinc-500 font-medium">Workspace</span>
                <span class="text-zinc-700">/</span>
                <span class="text-zinc-500 font-medium">Projects</span>
                <span class="text-zinc-700">/</span>
                <div class="flex items-center gap-2 text-zinc-200 font-medium bg-white/5 px-3 py-1 rounded-full border border-white/5">
                    <span class="w-2 h-2 rounded-full bg-orange-500 animate-pulse"></span>
                    Q1 Strategic Plan
                </div>
            </div>

<div class="flex items-center gap-3">
                 <button class="text-zinc-500 hover:text-white transition-colors text-xs font-medium tracking-wide uppercase border border-white/5 px-3 py-1.5 rounded-lg hover:bg-white/5">
                    Export
                </button>
                <button class="text-zinc-500 hover:text-white transition-colors">
                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
                    </svg>
                </button>
            </div>
        </header>

<div class="flex-1 overflow-y-auto px-8 md:px-24 lg:px-48 py-10 space-y-12 pb-40 scroll-smooth custom-scrollbar">
            
            <div class="flex items-center gap-4">
                <div class="h-px bg-gradient-to-r from-transparent via-zinc-800 to-transparent flex-1"></div>
                <span class="text-xs font-mono text-zinc-600 uppercase tracking-widest">Today, 10:42 AM</span>
                <div class="h-px bg-gradient-to-r from-transparent via-zinc-800 to-transparent flex-1"></div>
            </div>

<div class="flex items-center justify-between mb-2">
                    <h3 class="text-sm font-bold text-zinc-300">You</h3>
                </div>
                <div class="text-lg text-zinc-100 font-light leading-relaxed">
                    Analyze the Q4 sales data attached. I need a summary of the top performing regions and a projection for Q1 based on the current growth trajectory. Focus on recurring revenue.
                </div>
                
                <div class="mt-4 inline-flex items-center gap-3 bg-zinc-900 border border-white/5 rounded-xl p-2 pr-4 hover:border-orange-500/30 transition-colors cursor-pointer group/file">
                    <div class="w-10 h-10 bg-orange-500/10 rounded-lg flex items-center justify-center text-orange-500">
                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 14.25v-2.625a3.375 3.375 0 0 0-3.375-3.375h-1.5A1.125 1.125 0 0 1 13.5 7.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H8.25m2.25 0H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 0 0-9-9Z" />
                        </svg>
                    </div>
                    <div>
                        <div class="text-sm font-medium text-zinc-200 group-hover/file:text-orange-400 transition-colors">Q4_Financials_Final.csv</div>
                        <div class="text-xs text-zinc-600">2.4 MB • Spreadsheet</div>
                    </div>
                </div>
            </div>

<div class="flex items-center gap-3 mb-6">
                    <span class="text-sm font-bold text-orange-100">Atlas AI</span>
                    <span class="text-xs bg-orange-500/10 text-orange-400 px-2 py-0.5 rounded border border-orange-500/20">Analysis Mode</span>
                </div>

<div class="space-y-6 text-zinc-300">
                    <p class="leading-relaxed">Based on the <strong>Q4 Financials</strong>, here is the breakdown. The recurring revenue model has shown resilience despite the seasonal dip in North America.</p>
                    
                    <div class="grid grid-cols-3 gap-px bg-white/10 rounded-xl overflow-hidden border border-white/5">
                        <div class="bg-zinc-900/80 p-4">
                            <div class="text-xs text-zinc-500 uppercase tracking-widest mb-1">Total Rev</div>
                            <div class="text-xl font-bold text-white">$4.2M</div>
                            <div class="text-xs text-emerald-400 mt-1">↑ 12% YoY</div>
                        </div>
                        <div class="bg-zinc-900/80 p-4">
                            <div class="text-xs text-zinc-500 uppercase tracking-widest mb-1">Top Region</div>
                            <div class="text-xl font-bold text-white">APAC</div>
                            <div class="text-xs text-zinc-400 mt-1">45% Share</div>
                        </div>
                        <div class="bg-zinc-900/80 p-4">
                            <div class="text-xs text-zinc-500 uppercase tracking-widest mb-1">Churn</div>
                            <div class="text-xl font-bold text-white">2.1%</div>
                            <div class="text-xs text-emerald-400 mt-1">↓ 0.4%</div>
                        </div>
                    </div>

<div class="space-y-2">
                        <h4 class="text-zinc-100 font-medium">Q1 Projections</h4>
                        <p class="leading-relaxed text-sm text-zinc-400">
                            Assuming current ARR holds, we are looking at a conservative 8% growth. The expansion in the APAC region is driving this, offsetting the slight contraction in EMEA services.
                        </p>
                    </div>
                </div>
                
                <div class="flex gap-3 mt-6">
                    <button class="px-4 py-2 bg-zinc-800 hover:bg-zinc-700 rounded-lg text-xs font-medium text-white transition-colors border border-white/5">Generate PDF Report</button>
                    <button class="px-4 py-2 bg-zinc-800 hover:bg-zinc-700 rounded-lg text-xs font-medium text-white transition-colors border border-white/5">View Raw Data</button>
                </div>
            </div>
            
        </div>

<div class="flex justify-between items-center px-3 pt-2 border-t border-white/5">
                    <div class="flex gap-2">
                        <button class="text-xs text-zinc-500 hover:text-zinc-300 px-2 py-1 rounded bg-white/5 border border-white/5 transition-colors">Search Web</button>
                        <button class="text-xs text-zinc-500 hover:text-zinc-300 px-2 py-1 rounded bg-white/5 border border-white/5 transition-colors">Deep Think</button>
                    </div>
                    <div class="text-[10px] text-zinc-600 uppercase tracking-widest font-medium">
                        Model: GPT-4 Omni
                    </div>
                </div>
            </div>
        </div>

</main>

<div class="w-80 border-l border-white/5 bg-[#09090b] hidden xl:flex flex-col z-20">
        
        <div class="flex border-b border-white/5">
            <button class="flex-1 py-4 text-sm font-medium text-orange-400 border-b-2 border-orange-500">Context</button>
            <button class="flex-1 py-4 text-sm font-medium text-zinc-500 hover:text-zinc-300">Memory</button>
        </div>

<div class="p-6 space-y-8 overflow-y-auto">
            
            <div>
                <h4 class="text-xs font-medium text-zinc-500 uppercase tracking-wider mb-4">Live Assets</h4>
                <div class="space-y-3">
                    <div class="p-3 bg-zinc-900 rounded-xl border border-white/5 hover:border-zinc-700 transition-colors cursor-pointer group">
                        <div class="flex items-center gap-3 mb-2">
                            <div class="w-2 h-2 rounded-full bg-emerald-500"></div>
                            <span class="text-sm font-medium text-zinc-200">Financials.csv</span>
                        </div>
                        <div class="h-1 w-full bg-zinc-800 rounded-full overflow-hidden">
                            <div class="h-full bg-emerald-500/50 w-full"></div>
                        </div>
                        <div class="mt-2 text-xs text-zinc-500 flex justify-between">
                            <span>Analysis Complete</span>
                            <span class="opacity-0 group-hover:opacity-100 transition-opacity text-orange-400">View</span>
                        </div>
                    </div>
                </div>
            </div>

<div>
                 <h4 class="text-xs font-medium text-zinc-500 uppercase tracking-wider mb-4">Scratchpad</h4>
                 <div class="bg-yellow-500/5 border border-yellow-500/10 rounded-xl p-4 min-h-[150px] relative">
                     <p class="text-sm text-yellow-100/70 font-mono leading-relaxed">
                        > Meeting with Sarah at 2 PM.<br>
                        > Ask about the Q1 churn rate anomalies.<br>
                        > <strong>TODO:</strong> Export the PDF report.
                     </p>
                     <div class="absolute bottom-2 right-2 opacity-50">
                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4 text-yellow-500">
                            <path stroke-linecap="round" stroke-linejoin="round" d="m16.862 4.487 1.687-1.688a1.875 1.875 0 1 1 2.652 2.652L10.582 16.07a4.5 4.5 0 0 1-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 0 1 1.13-1.897l8.932-8.931Zm0 0L19.5 7.125" />
                        </svg>
                     </div>
                 </div>
            </div>
            
            <div>
                <h4 class="text-xs font-medium text-zinc-500 uppercase tracking-wider mb-4">Related Topics</h4>
                <div class="flex flex-wrap gap-2">
                    <span class="px-2 py-1 bg-zinc-800 rounded text-xs text-zinc-400 border border-white/5">#finance</span>
                    <span class="px-2 py-1 bg-zinc-800 rounded text-xs text-zinc-400 border border-white/5">#Q4</span>
                    <span class="px-2 py-1 bg-zinc-800 rounded text-xs text-zinc-400 border border-white/5">#projections</span>
                </div>
            </div>

</div>
    </div>

</div>

Related Examples

Show credit card details

Author:
Manuela Bianka

3 years ago

12.2k
Calculator
This calculator uses CSS although it can be passed directly to tailwind

Author:
Ameth Galarcio

1 year ago

2.1k
DailyDev Card
Card -based card used in the Dailydev Card, this is created to be modified to taste of each user

Author:
Ameth Galarcio

11 months ago

1.8k
Active Beauty Main Page

Author:
Maxim

9 months ago

1.1k
Tailwind CSS Service Card Component
An HTML and Tailwind CSS code snippet for creating a responsive service card component. Ideal for marketplaces, portfolios, or listing pages. Includes sections for image/video preview, seller info, rating, pricing, and additional details. Easy to customize using Tailwind utility classes.

Author:
Hamza Atig

8 months ago

1.1k
Responsive Multi-Tier Pricing Table Component
flexible and responsive 3-tier pricing table component built with HTML and Tailwind CSS. Features distinct visual styles for different plans (e.g., highlighting a recommended option), adapts to various screen sizes, and supports both light and dark color schemes. Uses generic placeholders for easy adaptation to any product or service.

Author:
Hamza Atig

8 months ago

1.3k
Instagram Post UI Mockup
A static HTML and Tailwind CSS component that visually replicates the user interface of an Instagram post. This mockup includes the post header (avatar, username, options), image area, action buttons (like, comment, share, save), like count, caption, and comment section. It features responsive constraints and supports both light and dark mode, closely mimicking the look and feel of the actual Instagram app. Ideal for UI prototyping, style guides, or frontend development practice.

Author:
Hamza Atig

8 months ago

1.2k
Twitter Post (Tweet) UI Mockup
A detailed static HTML and Tailwind CSS component replicating the user interface of a single Twitter post (Tweet). This mockup includes the user avatar, tweet header (name, handle, timestamp), tweet text with styled hashtags/mentions, optional media display, and the action bar with icons and counts (Reply, Retweet, Like, Views, Share). It is responsive, supports light and dark modes, and uses accurate iconography and hover states to closely resemble the real Twitter UI.

Author:
Hamza Atig

8 months ago

712
LinkedIn Post UI Mockup
A static HTML and Tailwind CSS component designed to replicate the user interface of a LinkedIn post. This mockup accurately represents the post structure including the header (avatar, name, headline, timestamp), content area (text, optional media), engagement statistics (likes, comments, reposts), and the action bar (Like, Comment, Repost, Send). It's fully responsive, supports light and dark themes, and uses appropriate iconography and styling to closely mimic the LinkedIn feed experience.

Author:
Hamza Atig

8 months ago

1.2k
YouTube Community Post UI Mockup
A static HTML and Tailwind CSS component mimicking the user interface of a YouTube Community Post. This mockup features the channel header (avatar, name, verified badge, timestamp), post content (text and optional media), engagement actions (Like, Dislike, Comment, Share with counts), and the 'Add a comment' section. It's designed to be responsive, supports YouTube's light and dark themes via custom styling, and uses accurate iconography.

Author:
Hamza Atig

8 months ago

941
Comparison Pricing Table Component
A responsive pricing table built with HTML and Tailwind CSS, comparing two plans (Free and Unlimited) with a clear feature checklist. Includes distinct styling for the premium plan and a toggle for monthly/annual pricing display.

Author:
Hamza Atig

8 months ago

1.4k
Responsive 3-Tier Pricing Card Section
A clean and responsive pricing table component featuring three distinct tiers (e.g., Basic, Standard, Premium) presented in a card layout. Built with HTML and Tailwind CSS, it stacks vertically on small screens and transitions to a side-by-side view on medium screens (md breakpoint - 768px) and up. Each plan card includes a placeholder icon, title, description, price details, a call-to-action button, and a bulleted list of features with checkmarks. The generic content makes it easy to adapt for various websites or applications needing a clear pricing comparison structure.

Author:
Hamza Atig

8 months ago

598

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components