All Prompts
All Prompts
uicard3dworkspacedashboardtailwindinteractiveanimated
3D Workspace UI Card with Tasks & AI Suggestion
3D UI Card для рабочего пространства: список задач, AI-подсказки. Интерактивный дизайн для дашбордов и промо-макетов. Tailwind CSS.
Prompt
<section class="lg:w-[48%] w-full relative perspective-distant mx-auto m-8">
<!-- Outer glow -->
<div
class="pointer-events-none absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[120%] h-[120%] bg-indigo-500/20 blur-[100px] rounded-full -z-10">
</div>
<!-- 3D Card Container -->
<div
class="relative transform-style-preserve-3d -rotate-y-10 rotate-x-5 hover:-rotate-y-5 hover:rotate-x-0 transition-transform duration-700 ease-out w-full">
<!-- Main card -->
<div
class="font-jakarta bg-[#0A0A0B] rounded-2xl p-1 relative shadow-[0_0_0_1px_rgba(255,255,255,0.08),0_20px_50px_rgba(0,0,0,0.5),0_1px_0_rgba(255,255,255,0.2)_inset]"
style="">
<!-- Inner Bezel -->
<div class="bg-[#0F1012] rounded-xl border border-white/5 overflow-hidden">
<!-- Window header -->
<div class="flex items-center justify-between bg-[#141518] px-4 py-3 border-b border-white/5">
<div class="flex items-center space-x-3">
<div class="flex space-x-1.5">
<div class="w-2.5 h-2.5 rounded-full bg-red-500/20 border border-red-500/50"></div>
<div class="w-2.5 h-2.5 rounded-full bg-amber-500/20 border border-amber-500/50"></div>
<div class="w-2.5 h-2.5 rounded-full bg-emerald-500/20 border border-emerald-500/50"></div>
</div>
<div class="h-4 w-[1px] bg-white/10 mx-2"></div>
<div class="flex items-center space-x-2 text-xs text-slate-400">
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
class="text-indigo-400">
<path d="m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" class=""></path>
<polyline points="9 22 9 12 15 12 15 22" class=""></polyline>
</svg>
<span class="font-medium text-slate-300">Neuro Workspace</span>
<span class="text-slate-600">/</span>
<span>Product Delivery</span>
</div>
</div>
<div class="flex items-center space-x-2">
<div class="flex -space-x-1.5">
<img src="https://images.unsplash.com/photo-1534528741775-53994a69daeb?w=64&h=64&fit=crop&crop=faces" class="w-5 h-5 rounded-full border border-[#141518]" alt="">
<img src="https://images.unsplash.com/photo-1506794778202-cad84cf45f1d?w=64&h=64&fit=crop&crop=faces" class="w-5 h-5 rounded-full border border-[#141518]" alt="">
<div
class="w-5 h-5 rounded-full bg-slate-800 border border-[#141518] flex items-center justify-center text-[8px] text-slate-400">
+2</div>
</div>
<button class="bg-indigo-500 hover:bg-indigo-400 transition-colors text-white text-[10px] font-medium px-2 py-1 rounded ml-2 shadow-[0_0_10px_rgba(99,102,241,0.3)]">Share</button>
</div>
</div>
<!-- App Content -->
<div class="bg-[#0A0A0B] p-4 min-h-[380px] relative">
<!-- Sidebar / Main Layout simulation -->
<div class="flex gap-4 h-full">
<!-- Sidebar -->
<div class="w-48 hidden sm:flex flex-col gap-4 border-r border-white/5 pr-4">
<div class="space-y-1">
<div
class="px-2 py-1.5 rounded-md bg-white/5 text-xs font-medium text-white flex items-center justify-between cursor-pointer border border-white/5 shadow-sm">
<span class="flex items-center gap-2"><svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-indigo-400"><rect width="7" height="7" x="3" y="3" rx="1" class=""></rect><rect width="7" height="7" x="14" y="3" rx="1" class=""></rect><rect width="7" height="7" x="14" y="14" rx="1" class=""></rect><rect width="7" height="7" x="3" y="14" rx="1" class=""></rect></svg> Overview</span>
<span class="bg-indigo-500/20 text-indigo-300 text-[9px] px-1.5 py-0.5 rounded-full">4</span>
</div>
<div
class="px-2 py-1.5 rounded-md text-xs font-medium text-slate-500 hover:text-slate-300 cursor-pointer flex items-center gap-2">
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="">
<path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" class=""></path>
</svg> Discussions
</div>
<div
class="px-2 py-1.5 rounded-md text-xs font-medium text-slate-500 hover:text-slate-300 cursor-pointer flex items-center gap-2">
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="">
<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" class=""></path>
<polyline points="14 2 14 8 20 8" class=""></polyline>
<line x1="16" x2="8" y1="13" y2="13" class=""></line>
<line x1="16" x2="8" y1="17" y2="17" class=""></line>
<polyline points="10 9 9 9 8 9" class=""></polyline>
</svg> Documents
</div>
</div>
<div class="mt-auto space-y-2">
<div class="h-px w-full bg-white/5"></div>
<div class="flex items-center gap-2 px-2 py-1 text-[10px] text-slate-600">
<div class="w-1.5 h-1.5 rounded-full bg-emerald-500 animate-pulse"></div> System Online
</div>
</div>
</div>
<!-- Main Feed -->
<div class="flex-1 space-y-3">
<!-- AI Suggestion Card -->
<div
class="rounded-xl border border-indigo-500/20 bg-gradient-to-br from-indigo-500/10 to-transparent p-3 relative overflow-hidden">
<div class="absolute top-0 right-0 p-2 opacity-20">
<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"
class="text-indigo-400">
<path d="M12 2a3 3 0 0 0-3 3v7a3 3 0 0 0 6 0V5a3 3 0 0 0-3-3Z" class=""></path>
<path d="M19 10v2a7 7 0 0 1-14 0v-2" class=""></path>
<line x1="12" x2="12" y1="19" y2="22" class=""></line>
</svg>
</div>
<div class="flex items-center gap-2 mb-2">
<span class="text-[10px] font-semibold text-indigo-300 uppercase tracking-wider">Neuro Insight</span>
</div>
<p class="text-xs text-slate-300 leading-relaxed">
Based on recent commits, I've drafted the
<span class="text-white font-medium border-b border-indigo-500/50 cursor-pointer">Release Notes</span>
for v2.4. Would you like to review?
</p>
<div class="mt-3 flex gap-2">
<button class="bg-indigo-500 hover:bg-indigo-400 text-white text-[10px] px-2.5 py-1 rounded font-medium transition-colors">Review Draft</button>
<button class="bg-white/5 hover:bg-white/10 text-slate-400 text-[10px] px-2.5 py-1 rounded font-medium transition-colors">Dismiss</button>
</div>
</div>
<!-- Task List -->
<div class="space-y-2 pt-2">
<div
class="flex items-center justify-between text-[10px] text-slate-500 font-medium uppercase tracking-wider mb-1">
<span>Active Tasks</span>
<span>Due Today</span>
</div>
<!-- Task Item 1 -->
<div
class="group flex items-center justify-between p-2 rounded-lg bg-white/[0.02] border border-white/5 hover:bg-white/[0.04] hover:border-white/10 transition-all cursor-pointer">
<div class="flex items-center gap-3">
<div
class="w-4 h-4 rounded border border-slate-600 flex items-center justify-center group-hover:border-indigo-400 transition-colors">
</div>
<div class="flex flex-col">
<span class="text-xs text-slate-200 font-medium">Update Q3 Roadmap</span>
<div class="flex items-center gap-1.5 mt-0.5">
<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
class="text-[#0ACF83]">
<path d="M5 12h14" class=""></path>
<path d="m12 5 7 7-7 7" class=""></path>
</svg>
<span class="text-[9px] text-slate-500">Linear • High Priority</span>
</div>
</div>
</div>
<div class="flex -space-x-1 opacity-0 group-hover:opacity-100 transition-opacity">
<div
class="w-5 h-5 rounded-full bg-purple-500/20 border border-slate-800 flex items-center justify-center text-[8px] text-purple-300">
JD</div>
</div>
</div>
<!-- Task Item 2 -->
<div
class="group flex items-center justify-between p-2 rounded-lg bg-white/[0.02] border border-white/5 hover:bg-white/[0.04] hover:border-white/10 transition-all cursor-pointer">
<div class="flex items-center gap-3">
<div
class="w-4 h-4 rounded border border-slate-600 flex items-center justify-center group-hover:border-indigo-400 transition-colors">
</div>
<div class="flex flex-col">
<span class="text-xs text-slate-200 font-medium">Review Marketing Copy</span>
<div class="flex items-center gap-1.5 mt-0.5">
<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
class="text-[#4285F4]">
<path d="M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z" class="">
</path>
<polyline points="14 2 14 8 20 8" class=""></polyline>
</svg>
<span class="text-[9px] text-slate-500">GDocs • In Progress</span>
</div>
</div>
</div>
</div>
<!-- Task Item 3 -->
<div
class="group flex items-center justify-between p-2 rounded-lg bg-white/[0.02] border border-white/5 hover:bg-white/[0.04] hover:border-white/10 transition-all cursor-pointer">
<div class="flex items-center gap-3">
<div
class="w-4 h-4 rounded border border-slate-600 flex items-center justify-center group-hover:border-indigo-400 transition-colors">
<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"
class="text-indigo-400 opacity-0 group-hover:opacity-100">
<polyline points="20 6 9 17 4 12" class=""></polyline>
</svg>
</div>
<div class="flex flex-col">
<span class="text-xs text-slate-200 font-medium">Design System Sync</span>
<div class="flex items-center gap-1.5 mt-0.5">
<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
class="text-[#F24E1E]">
<path d="M5 12h14" class=""></path>
<path d="m12 5 7 7-7 7" class=""></path>
</svg>
<span class="text-[9px] text-slate-500">Figma • 2pm EST</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Bottom Gradient Fade -->
<div
class="absolute bottom-0 left-0 right-0 h-16 bg-gradient-to-t from-[#0A0A0B] to-transparent pointer-events-none">
</div>
</div>
</div>
<!-- Floating badges/elements around the card for depth -->
<div
class="absolute -right-4 top-12 bg-[#1A1B1E] border border-white/10 p-2 rounded-lg shadow-xl transform rotate-6 animate-float hidden lg:block">
<div class="flex items-center gap-2">
<div class="w-2 h-2 rounded-full bg-green-500"></div>
<span class="text-[10px] text-slate-300 font-medium">Sync Complete</span>
</div>
</div>
</div>
</div>
</section>