Tailwind ile Şık Admin Dashboard Kodla!
Modern kullanıcı arayüzleri konusunda uzman bir tam yığın geliştirici rolünde, Tailwind CSS kullanarak profesyonel bir yönetici paneli prototipi oluşturulmasını sağlar. Tek bir HTML dosyası içinde, CDN aracılığıyla Tailwind CSS entegrasyonu ile tamamen duyarlı bir tasarım elde edilir, bu da herhangi bir derleme aracına ihtiyaç duymadan hızlı geliştirme imkanı sunar. Oluşturulan panel, mobil ve masaüstü cihazlar için tam uyumluluk, koyu mod geçişi, yan gezinme çubuğu, üst gezinme çubuğu ve ana içerik alanı gibi temel bileşenleri içerir.
Geliştiriciler ve profesyoneller için ideal olan bu araç, modern ve temiz bir tasarıma sahip, özelleştirilebilir birincil renk şemasıyla gelir. Yan gezinme çubuğunda yer alacak sayfalar ve bölümler, kullanıcı ihtiyaçlarına göre belirlenebilir. Panelde, Chart.js CDN kullanılarak örnek veri görselleştirmeleri için grafikler, arama ve sıralama özellikli veri tabloları, metrik kartları ve son etkinlik akışı gibi özellikler bulunur. Ayrıca, istatistikleri gösteren bir ana kontrol paneli, katlanabilir yan çubuk, bildirim zili ve kullanıcı profili açılır menüsü gibi interaktif öğeler de mevcuttur. Üretim için optimize edilmiş, anlamsal HTML yapısına sahip, erişilebilir ve hızlı yüklenen bir çözüm sunar.
{ }Değişken Açıklamaları:
- [PRIMARY COLOR SCHEME]: Tailwind CSS ile tasarlanan admin dashboard'un modern tema rengi şemasını belirler. Örnek: blue-indigo, purple-violet, green-emerald, teal-cyan.
- [SECTİONS LİKE DASHBOARD USERS]: Sidebar navigasyonunda yer alacak 4-6 ana sayfa/bölüm ve gerektiğinde alt menüleri tanımlar. Örnek: Dashboard, Users, Analytics, Settings, Billing; Dashboard > Overview, Users > List | Roles, Analytics > Reports | Charts, Settings > Profile | General, Products > Catalog.
Değişkenleri Düzenle
Key requirements:
- Theme: Modern, clean design with [PRIMARY COLOR SCHEME].
- Pages/Sections in sidebar: [SECTİONS LİKE DASHBOARD USERS].
- Features: Charts (use Chart.js CDN for sample data viz), data table with search/sort (use vanilla JS or lightweight lib), cards with metrics, recent activity feed.
- Include: Hero dashboard with stats, collapsible sidebar, notifications bell, user profile dropdown.
- Make it interactive: Hover effects, modals, form examples.
- Optimize for production: Semantic HTML, accessible, fast loading.
Output ONLY the full <html> code as plain text, ready to save as index.html and open in browser. No explanations.
You are an expert full-stack developer specializing in modern UIs. Generate a complete, single HTML file for a professional admin dashboard using Tailwind CSS via CDN (no build tools needed). Make it fully responsive for mobile/desktop, with dark mode toggle, sidebar navigation, top navbar, and main content area.
Key requirements:
- Theme: Modern, clean design with [PRIMARY COLOR SCHEME].
- Pages/Sections in sidebar: [SECTİONS LİKE DASHBOARD USERS].
- Features: Charts (use Chart.js CDN for sample data viz), data table with search/sort (use vanilla JS or lightweight lib), cards with metrics, recent activity feed.
- Include: Hero dashboard with stats, collapsible sidebar, notifications bell, user profile dropdown.
- Make it interactive: Hover effects, modals, form examples.
- Optimize for production: Semantic HTML, accessible, fast loading.
Output ONLY the full <html> code as plain text, ready to save as index.html and open in browser. No explanations.
Bu Prompt Seni Bekliyor
Claude için hazırlanmış bu promptu anında kopyala, kullan.
Ücretsiz üye ol, binlerce prompta eriş.
10 saniyede üye ol, sınırsız prompt keşfet
Nile
Bu prompt kullanmadan önce düzenlemeniz gereken 2 değişken içerir.
Keşfet
Alternatif Araçlar
Biliyor muydunuz?
Tekrarlanan görevlerde şablon prompt oluştur: Aynı formatta her seferinde sadece değişken kısmı (ürün adı, tarih vb.) değiştir.
En Popüler
İlgili Etiketler
Benzer promptlar
Topluluk Görüşleri
Bu içerik hakkında üyeler neler düşünüyor?
Topluluğa Katılın
Promptlarını paylaşmak, favorilerini kaydetmek ve içerik üreticileriyle etkileşime geçmek için hemen ücretsiz üye ol.