Linear App Clone | AI Challenge
Best AI for Linear App Clone
Single-shot · temp 0.7 · blind votes · identical prompts·How we test →
vs
Ask them anything yourself
Loading...
Single-shot · temp 0.7 · blind votes · identical prompts·How we test →
vsAsk them anything yourself
Tests an AI's ability to replicate an existing UI with Tailwind CSS
Recreate the Linear App UI using Tailwind CSS, keeping the layout and animations as close as possible.
We can't display this one. It's not us. Well... it might be us.
The model was asked for a web page. It produced something else. We're not going to define what.
# Linear App UI with Tailwind CSS
I'll recreate the Linear app UI with a clean sidebar, main content area, and animations similar to the original. Here's the implementation:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Linear App UI</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
@keyframes fadeIn {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
.animate-fade-in {
animation: fadeIn 0.3s ease-out;
}
.sidebar-item:hover .sidebar-item-icon {
transform: scale(1.1);
transition: transform 0.2s ease;
}
.issue-card:hover {
transform: translateY(-2px);
box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
transition: all 0.3s ease;
}
.project-icon {
transition: all 0.3s ease;
}
.project-icon:hover {
transform: scale(1.1);
}
</style>
</head>
<body class="bg-gray-50 text-gray-900 flex h-screen overflow-hidden">
<!-- Sidebar -->
<div class="w-64 bg-white border-r border-gray-200 flex flex-col">
<!-- Logo -->
<div class="p-6 flex items-center">
<div class="w-8 h-8 bg-gradient-to-r from-blue-500 to-purple-600 rounded flex items-center justify-center">
<span class="text-white font-bold">L</span>
</div>
<span class="ml-2 text-xl font-bold">Linear</span>
</div>
<!-- Navigation -->
<div class="px-4 py-2">
<div class="sidebar-item flex items-center py-2 px-4 rounded-lg hover:bg-gray-100 cursor-pointer">
<i class="sidebar-item-icon fas fa-inbox text-gray-600"></i>
<span class="ml-3 font-medium">Inbox</span>
<span class="ml-auto bg-blue-100 text-blue-800 text-xs font-medium px-2 py-0.5 rounded-full">3</span>
</div>
<div class="sidebar-item flex items-center py-2 px-4 rounded-lg hover:bg-gray-100 cursor-pointer">
<i class="sidebar-item-icon fas fa-tasks text-gray-600"></i>
<span class="ml-3 font-medium">Issues</span>
</div>
<div class="sidebar-item flex items-center py-2 px-4 rounded-lg hover:bg-gray-100 cursor-pointer">
<i class="sidebar-item-icon fas fa-project-diagram text-gray-600"></i>
<span class="ml-3 font-medium">Projects</span>
</div>
<div class="sidebar-item flex items-center py-2 px-4 rounded-lg hover:bg-gray-100 cursor-pointer">
<i class="sidebar-item-icon fas fa-chart-line text-gray-600"></i>
<span class="ml-3 font-medium">Roadmap</span>
</div>
<div class="sidebar-item flex items-center py-2 px-4 rounded-lg hover:bg-gray-100 cursor-pointer">
<i class="sidebar-item-icon fas fa-users text-gray-600"></i>
<span class="ml-3 font-medium">Team</span>
</div>
</div>
<!-- Projects Section -->
<div class="mt-4 px-4">
<div class="flex items-center justify-between mb-2">
<span class="text-xs font-semibold text-gray-500 uppercase tracking-wider">Projects</span>
<button class="text-gray-400 hover:text-gray-600">
<i class="fas fa-plus"></i>
</button>
</div>
<div class="space-y-1">
<div class="flex items-center py-2 px-4 rounded-lg hover:bg-gray-100 cursor-pointer">
<div class="project-icon w-4 h-4 bg-green-500 rounded-sm"></div>
<span class="ml-3 text-sm">Web App</span>
</div>
<div class="flex items-center py-2 px-4 rounded-lg hover:bg-gray-100 cursor-pointer">
<div class="project-icon w-4 h-4 bg-blue-500 rounded-sm"></div>
<span class="ml-3 text-sm">Mobile App</span>
</div>
<div class="flex items-center py-2 px-4 rounded-lg hover:bg-gray-100 cursor-pointer">
<div class="project-icon w-4 h-4 bg-yellow-500 rounded-sm"></div>
<span class="ml-3 text-sm">API</span>
</div>
<div class="flex items-center py-2 px-4 rounded-lg hover:bg-gray-100 cursor-pointer">
<div class="project-icon w-4 h-4 bg-purple-500 rounded-sm"></div>
<span class="ml-3 text-sm">Design System</span>
</div>
</div>
</div>
<!-- Teams Section -->
<div class="mt-8 px-4">
<div class="flex items-center justify-between mb-2">
<span class="text-xs font-semibold text-gray-500 uppercase tracking-wider">Teams</span>
<button class="text-gray-400 hover:text-gray-600">
<i class="fas fa-plus"></i>
</button>
</div>
<div class="space-y-1">
<div class="flex items-center py-2 px-4 rounded-lg hover:bg-gray-100 cursor-pointer">
<div class="w-6 h-6 bg-gradient-to-r from-blue-500 to-purple-600 rounded-full flex items-center justify-center">
<span class="text-white text-xs font-bold">E</span>
</div>
<span class="ml-3 text-sm">Engineering</span>
</div>
<div class="flex items-center py-2 px-4 rounded-lg hover:bg-gray-100 cursor-pointer">
<div class="w-6 h-6 bg-gradient-to-r from-green-500 to-blue-500 rounded-full flex items-center justify-center">
<span class="text-white text-xs font-bold">D</span>
</div>
<span class="ml-3 text-sm">Design</span>
</div>
<div class="flex items-center py-2 px-4 rounded-lg hover:bg-gray-100 cursor-pointer">
<div class="w-6 h-6 bg-gradient-to-r from-yellow-500 to-red-500 rounded-full flex items-center justify-center">
<span class="text-white text-xs font-bold">M</span>
</div>
<span class="ml-3 text-sm">Marketing</span>
</div>
</div>
</div>
<!-- User Profile -->
<div class="mt-auto p-4 border-t border-gray-200">
<div class="flex items-center">
<div class="w-8 h-8 bg-gradient-to-r from-blue-500 to-purple-600 rounded-full flex items-center justify-center">
<span class="text-white text-sm font-bold">JD</span>
</div>
<div class="ml-3">
<p class="text-sm font-medium">John Doe</p>
<p class="text-xs text-gray-500">john@company.com</p>
</div>
<button class="ml-auto text-gray-400 hover:text-gray-600">
<i class="fas fa-cog"></i>
</button>
</div>
</div>
</div>
<!-- Main Content -->
<div class="flex-1 flex flex-col overflow-hidden">
<!-- Header -->
<header class="bg-white border-b border-gray-200 px-6 py-4">
<div class="flex items-center justify-between">
<div class="flex items-center">
<h1 class="text-xl font-semibold">Issues</h1>
<div class="ml-4 flex space-x-2">
<button class="px-3 py-1 bg-gray-100 hover:bg-gray-200 text-gray-800 text-sm rounded-md transition-colors">
All
</button>
<button class="px-3 py-1 bg-gray-100 hover:bg-gray-200 text-gray-800 text-sm rounded-md transition-colors">
Open
</button>
<button class="px-3 py-1 bg-gray-100 hover:bg-gray-200 text-gray-800 text-sm rounded-md transition-colors">
Closed
</button>
</div>
</div>
<div class="flex items-center space-x-4">
<div class="relative">
<input type="text" placeholder="Search issues..." class="pl-10 pr-4 py-2 border border-gray-300
We can't display this one. It's not us. Well... it might be us.
The model was asked for a web page. It produced something else. We're not going to define what.
Here's a **self-contained HTML file** (single-page app) that mimics **Linear’s modern UI and interactions**, including the gradient background, blur effects, and neumorphic cards. It uses **pure Tailwind CSS + custom CSS** for animations and effects.
---
### 🔗 Key Features:
1. **Glassmorphism + Neumorphic Cards**
2. **Spline or Lottie (optional) animations**
3. **Animated Gradients (Hero Section)**
4. **Footer with Sparkle, Aurora, or Geometric graphics**
5. **Responsive & Dark Mode Ready**
---
### 🚀 Full HTML Code:
```html
<!DOCTYPE html>
<html lang="en" class="dark">
<head>
<meta charset="UTF-8">
<title>M2 - Linear-like UI</title>
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@3.0.0/dist/tailwind.min.css" rel="stylesheet">
<style>
:root {
--bg: #0B1120;
--primary: #6366F1;
--accent: #22D3EE;
}
html {
font-family: 'Inter', sans-serif;
}
body {
background: radial-gradient(at 70% 30%, #0A1221 0%, #111827 100%);
margin: 0;
min-height: 100vh;
color: white;
}
.glass-card {
backdrop-filter: blur(14px);
background-color: rgba(30, 41, 59, 0.6);
border: 1px solid rgba(255, 255, 255, 0.05);
border-radius: 16px;
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
padding: 28px;
}
.neo-card {
box-shadow: inset 3px 3px 6px rgba(255, 255, 255, 0.08),
inset -3px -3px 6px rgba(0, 0, 0, 0.4),
3px 3px 8px rgba(0, 0, 0, 0.3);
}
.gradient-text {
background: linear-gradient(to right, #6366F1, #22D3EE);
-webkit-background-clip: text;
color: transparent;
}
/* Hero Gradient */
.hero-gradient {
background: radial-gradient(ellipse at center, #1f2937 0%, #0B1120 100%);
}
@keyframes gradient-move {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
.animated-gradient {
animation: gradient-move 10s linear infinite;
background-size: 200% 200%;
}
@keyframes fadeUp {
0% {
opacity: 0;
transform: translateY(20px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
.fade-up {
animation: fadeUp 0.7s ease-out forwards;
}
/* Marquee */
@keyframes marquee {
0% { transform: translateX(0); }
100% { transform: translateX(-50%); }
}
.marquee-content {
animation: marquee 15s linear infinite;
}
</style>
</head>
<body class="overflow-x-hidden text-gray-100">
<!-- HEADER -->
<header class="sticky top-0 z-10 bg-[#0B1120]/70 backdrop-blur-sm py-4">
<nav class="container mx-auto flex justify-between items-center px-4">
<div class="text-xl font-semibold gradient-text">M2</div>
<div class="hidden md:flex items-center space-x-4">
<a href="#features" class="hover:text-gray-300 transition">Features</a>
<a href="#testimonials" class="hover:text-gray-300 transition">Testimonials</a>
<a href="#pricing" class="hover:text-gray-300 transition">Pricing</a>
<a href="#faq" class="hover:text-gray-300 transition">FAQ</a>
<button class="bg-indigo-500 hover:bg-indigo-600 text-white px-4 py-2 rounded-lg transition">Sign Up</button>
</div>
<!-- Mobile Menu -->
<div class="md:hidden">
<button id="menu-button" class="text-gray-300 focus:outline-none">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
</svg>
</button>
</div>
</nav>
<div id="mobile-menu" class="md:hidden hidden bg-[#0B1120] px-4 pt-2 pb-4">
<a href="#features" class="block hover:text-gray-300">Features</a>
<a href="#testimonials" class="block hover:text-gray-300">Testimonials</a>
<a href="#pricing" class="block hover:text-gray-300">Pricing</a>
<a href="#faq" class="block hover:text-gray-300">FAQ</a>
</div>
</header>
<!-- HERO SECTION -->
<section class="hero-gradient px-4 pt-16 pb-24 text-center animated-gradient">
<h1 class="text-4xl md:text-5xl font-bold fade-up leading-tight">
Build Your Ideas <span class="gradient-text">Faster.</span>
</h1>
<p class="mt-6 text-lg text-gray-300 max-w-2xl mx-auto fade-up">
A next-gen platform with a Linear-like interface. Drag & drop, collaborate, and ship products at light speed with our open-source framework.
</p>
<div class="mt-8 fade-up">
<button class="bg-indigo-500 hover:bg-indigo-600 px-6 py-3 rounded-lg text-white transition">Get Started</button>
<button class="ml-4 border border-indigo-500 text-indigo-500 hover:bg-indigo-500/10 px-6 py-3 rounded-lg transition">Learn More</button>
</div>
</section>
<!-- FEATURES SECTION -->
<section id="features" class="container mx-auto px-4 mt-16 md:mt-24 py-8">
<h2 class="text-3xl font-semibold text-center mb-8 gradient-text">Features</h2>
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
<div class="glass-card fade-up">
<div class="w-12 h-12 bg-indigo-500 rounded-lg flex items-center justify-center mb-4">
<span class="text-xl font-bold">⚡</span>
</div>
<h3 class="text-xl font-semibold mb-2">Instant Deployments</h3>
<p class="text-gray-300">Push to deploy with Git. Your project is live in seconds, not minutes.</p>
</div>
<div class="glass-card fade-up delay-[200ms]">
<div class="w-12 h-12 bg-teal-500 rounded-lg flex items-center justify-center mb-4">
<span class="text-xl font-bold">🌐</span>
</div>
<h3 class="text-xl font-semibold mb-2">Global CDN</h3>
<p class="text-gray-300">Low-latency performance worldwide thanks to a network of fast, distributed servers.</p>
</div>
<div class="glass-card fade-up delay-[400ms]">
<div class="w-12 h-12 bg-purple-500 rounded-lg flex items-center justify-center mb-4">
<span class="text-xl font-bold">🔐</span>
</div>
<h3 class="text-xl font-semibold mb-2">SSL for All</h3>
<p class="text-gray-300">Automatic SSL certificates ensure your project is secure and trusted by default.</p>
</div>
</div>
</section>
<!-- TESTIMONIALS MARQUEE -->
<section id="testimonials" class="mt-24 py-12 bg-gray-900/60 overflow-hidden">
<h2 class="text-3xl font-semibold text-center gradient-text mb-8">What Our Users Say</h2>
<div class="relative w-full h-40 flex items-center">
<div class="marquee-content absolute whitespace-nowrap">
<div class="glass-card inline-block mx-4 p-6 min-w-[300px]">
<div class="
We can't display this one. It's not us. Well... it might be us.
The model was asked for a web page. It produced something else. We're not going to define what.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Linear App UI with Tailwind CSS</title>
<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
<script src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js" defer></script>
</head>
<body class="container mx-auto font-sans text-black">
<header class="bg-gray-100 p-4 relative">
<nav class="grid-container max-w-5xl flex items-center justify-between mx-auto">
<h3 class="font-medium"><a href="#">Linear</a></h3>
<ul class="nav flex items-center text-center space-x-8 opacity-50 hover:opacity-100">
<li>Features</li>
<li>Pricing</li>
<li>FAQ</li>
</ul>
<button class="btn-blue shadow focus:shadow-inset px-6 uppercase ml-auto font-medium tracking-wide py-2 text-white rounded sm:min-w-max focus:outline-none focus:ring-2 sm:hover:bg-indigo-100 focus:ring-indigo-300 cursor-pointer hidden sm:inline-block" id="signup"> Sign Up
</button>
</nav>
</header>
<main class="h-screen my-28 flex gap-x-16 text-gray-900">
<section class="left mx-auto grid lg:grid-cols-2 sm:grid-cols-1 max-w-5xl gap-18 items-center px-0 sm:text-center lg:px-5">
<div class="flex flex-col text-left order-last sm:order-first lg:col-span-2 py-4">
<h1>Get more done with <b>Linear</b>.</h1>
<p class="mt-1 lg:max-w-prose font-normal">Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Suspendisse lacus tortor, viverra eu sapien euismod sodales.</p>
<a href="#">
<button class="btn-gray font-normal bg-gray-900 tracking-normal shadow mx-2 focus:shadow-inset px-9 whitespace-nowrap uppercase ml-0 font-medium py-3.5 lg:py-7 text-white lg:rounded-tl-xl rounded-full sm:min-w-max focus:outline-none focus:ring-2 sm:hover:bg-gray-400 focus:ring-gray-700 cursor-pointer" id="signup">
Try for free
</button>
</a>
<h2 class="pt-8 font-light opacity-80 italic max-w-prose leading-6 hidden sm:block">See how Linear fits into your workflow.<span class="pl-0.5 font-normal">→</span></h2>
</div>
<div class="order-first lg:col-span-1 overflow-hidden rounded-3xl p-5 mx-2 lg:mx-2 sm:block" data-image>
<img src="images/illustration-2.webp" alt="Illustration" class="max-w-full h-auto cursor-pointer" :class="{ 'animate-bounce': animation }" transition="spring -100ms">
</div>
</section>
<div class="my-6 mx-auto text-center opacity-20 max-w-lg flex-auto py-72" data-image>
<strong class="mb-5">Trusted by top companies</strong>
<ul class="grid grid-cols-4 my-10 gap-8 sm:justify-items-center lg:gap-x-20" x-data="{ logos: 'images/logos.png', index: 0 }">
<li data-toggle-animation @mouseenter="toggleAnimation()">
<img src="images/logos.webp" :src="logos" alt="logo" class="rounded-lg">
<!-- Truncated content from model response -->
We can't display this one. It's not us. Well... it might be us.
The model was asked for a web page. It produced something else. We're not going to define what.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Linear App UI Recreationtitle>
<script src="https://cdn.tailwindcss.com"></script>
<script>
tailwind.config = {
theme: {
extend: {
colors: {
'linear-blue': '#2F6FEE',
'linear-dark': '#18191C',
'linear-darker': '#0D0E11',
'linear-gray': '#232428',
'linear-border': '#313236'
},
animation: {
'slide-in': 'slideIn 0.25s ease-out',
'fade-in': 'fadeIn 0.2s ease-out'
},
keyframes: {
slideIn: {
'0%': { transform: 'translateX(100%)' },
'100%': { transform: 'translateX(0)' }
},
fadeIn: {
'0%': { opacity: '0' },
'100%': { opacity: '1' }
}
}
}
}
}
</script>
<style type="text/tailwindcss">
@layer utilities {
.sidebar-item {
@apply flex items-center px-6 py-3 text-gray-300 hover:bg-linear-gray hover:text-white cursor-pointer transition-colors duration-200 border-l-4 border-transparent;
}
.sidebar-item.active {
@apply bg-linear-gray text-white border-l-4 border-linear-blue;
}
.issue-card {
@apply bg-white rounded-lg p-4 mb-3 cursor-pointer transition-all duration-200 hover:shadow-md hover:-translate-y-px;
}
.status-pill {
@apply text-xs px-2 py-1 rounded-full font-medium;
}
}
</style>
head>
<body class="bg-gray-50 min-h-screen font-sans text-gray-800">
<div class="flex h-screen overflow-hidden">
<!-- Sidebar -->
<div class="fixed h-full w-64 bg-linear-darker border-r border-linear-border">
<div class="p-6 flex items-center border-b border-linear-border">
<div class="w-8 h-8 bg-linear-blue rounded flex items-center justify-center">
<span class="text-white font-bold">Lspan>
</div>
<span class="ml-3 text-white font-semibold">Linearspan>
</div>
<nav class="mt-6">
<a href="#" class="sidebar-item active">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M5 2a1 1 0 011 1v1h1a1 1 0 010 2H6v1a1 1 0 01-2 0V6H3a1 1 0 010-2h1V3a1 1 0 011-1zm0 10a1 1 0 011 1v1h1a1 1 0 110 2H6v1a1 1 0 11-2 0v-1H3a1 1 0 110-2h1v-1a1 1 0 011-1zm10-10a1 1 0 011 1v1h1a1 1 0 110 2h-1v1a1 1 0 11-2 0v-1h-1a1 1 0 110-2h1V3a1 1 0 011-1z" clip-rule="evenodd" />
</svg>
<span class="ml-3">Issuesspan>
</a>
<a href="#" class="sidebar-item">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
<path d="M11 17a1 1 0 001.447.894l4-2A1 1 0 0017 15V9.236a1 1 0 00-1.447-.894l-4 2a1 1 0 00-.553.894V17zM15.211 6.276a1 1 0 000-1.788l-4.764-2.382a1 1 0 00-.894 0L4.789 4.488a1 1 0 000 1.788l4.764 2.382a1 1 0 00.894 0l4.764-2.382zM4.447 8.342A1 1 0 003 9.236V15a1 1 0 00.553.894l4 2A1 1 0 009 17v-5.764a1 1 0 00-.553-.894l-4-2z" />
</svg>
<span class="ml-3">Projectsspan>
</a>
<a href="#" class="sidebar-item">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM4.332 8.027a6.012 6.012 0 011.912-2.706C6.512 5.73 6.974 6 7.5 6A1.5 1.5 0 019 7.5V8a2 2 0 014 0 2 2 0 011.523 2.661A5.988 5.988 0 0110 11a6 6 0 01-5.668-8.973z" clip-rule="evenodd" />
</svg>
<span class="ml-3">Cyclesspan>
</a>
</nav>
<div class="absolute bottom-0 w-64 p-4 border-t border-linear-border">
<div class="flex items-center">
<div class="w-8 h-8 bg-gray-300 rounded-full flex items-center justify-center">
<span class="text-sm font-medium">JDspan>
</div>
<div class="ml-3">
<div class="text-white font-medium">John Doediv>
<div class="text-gray-400 text-sm">johndoe@linear.appdiv>
</div>
</div>
</div>
</div>
<!-- Main Content -->
<div class="ml-64 flex-1 flex flex-col">
<!-- Top Bar -->
<div class="h-16 bg-white border-b border-gray-200 flex items-center px-6 shadow-sm">
<div class="relative flex-1 max-w-xl">
<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-gray-400" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z" clip-rule="evenodd" />
</svg>
</div>
<input type="text" class="pl-10 pr-4 py-2 w-full border border-gray-300 rounded-md focus:outline-none focus:ring-1 focus:ring-linear-blue" placeholder="Search issues, teams, or commands..." />
</div>
<div class="ml-6 flex items-center space-x-4">
<button class="p-2 text-gray-500 hover:text-gray-700 hover:bg-gray-100 rounded-full">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd" />
</svg>
</button>
<button class="p-2 text-gray-500 hover:text-gray-700 hover:bg-gray-100 rounded-full">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
<path d="M2 5a2 2 0 012-2h7a2 2 0 012 2v4a2 2 0 01-2 2H9l-3 3v-3H4a2 2 0 01-2-2V5z" />
<path d="M15 7v2a4 4 0 01-4 4H9.828l-1.766 1.767c.28.149.599.233.938.233h2l3 3v-3h2a2 2 0 002-2V9a2 2 0 00-2-2h-1z" />
</svg>
</button>
<div class="relative">
<button class="w-8 h-8 rounded-full bg-gray-200 flex items-center justify-center">
<span class="text-xs font-medium">JDspan>
</button>
</div>
</div>
</div>
<!-- Content Area -->
<div class="flex-1 overflow-hidden">
<div class="h-full flex">
<!-- Issue List -->
<div class="flex-1 overflow-y-auto p-6 bg-gray-50">
<div class="flex justify-between items-center mb-6">
<h1 class="text-2xl font-bold">Issuesh1>
<button class="bg-linear-blue text-white px-4 py-2 rounded-md hover:bg-blue-600 transition-colors flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-2" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-11a1 1 0 10-2 0v2H7a1 1 0 100 2h2v2a1 1 0 102 0v-2h2a1 1 0 100-2h-2V7z" clip-rule="evenodd" />
</svg>
New issue
</button>
</div>
<!-- Search Filters -->
<div class="mb-6 flex space-x-3 overflow-x-auto pb-2">
<button class="px-3 py-1.5 text-sm bg-white border border-gray-300 rounded-md shadow-sm hover:bg-gray-50">All issuesbutton>
<button class="px-3 py-1.5 text-sm bg-gray-100 border border-gray-200 rounded-md">Backlogbutton>
<button class="px-3 py-1.5 text-sm bg-gray-100 border border-gray-200 rounded-md">Todobutton>
<button class="px-3 py-1.5 text-sm bg-gray-100 border border-gray-200 rounded-md">In progressbutton>
<button class="px-3 py-1.5 text-sm bg-gray-100 border border-gray-200 rounded-md">Donebutton>
</div>
<!-- Issues -->
<div class="space-y-2">
<div class="issue-card animate-fade-in">
<div class="flex justify-between items-start">
<div>
<div class="flex items-center mb-1">
<span class="text-xs font-medium text-gray-500 mr-2">PROJ-123span>
<span class="status-pill bg-blue-100 text-blue-800">Bugspan>
</div>
<h3 class="font-medium text-gray-900">Fix login issueh3>
<p class="text-gray-600 text-sm mt-1">Users cannot log in after password resetp>
</div>
<div class="flex items-center space-x-2">
<div class="flex -space-x-2">
<div class="w-6 h-6 rounded-full bg-gray-300 border-2 border-white"></div>
<div class="w-6 h-6 rounded-full bg-blue-500 text-white flex items-center justify-center text-xs border-2 border-white">JDdiv>
</div>
<span class="text-gray-400 text-sm">2dspan>
</div>
</div>
</div>
<div class="issue-card animate-fade-in" style="animation-delay: 50ms;">
<div class="flex justify-between items-start">
<div>
<div class="flex items-center mb-1">
<span class="text-xs font-medium text-gray-500 mr-2">PROJ-456span>
<span class="status-pill bg-purple-100 text-purple-800">Featurespan>
</div>
<h3 class="font-medium text-gray-900">Add dark mode toggleh3>
<p class="text-gray-600 text-sm mt-1">Implement system-preference aware dark modep>
</div>
<div class="flex items-center space-x-2">
<div class="flex -space-x-2">
<div class="w-6 h-6 rounded-full bg-green-500 text-white flex items-center justify-center text-xs border-2 border-white">ASdiv>
</div>
<span class="text-gray-400 text-sm">1dspan>
</div>
</div>
</div>
<div class="issue-card animate-fade-in" style="animation-delay: 100ms;">
<div class="flex justify-between items-start">
<div>
<div class="flex items-center mb-1">
<span class="text-xs font-medium text-gray-500 mr-2">PROJ-789span>
<span class="status-pill bg-yellow-100 text-yellow-800">Improvementspan>
</div>
<h3 class="font-medium text-gray-900">Optimize image loadingh3>
<p class="text-gray-600 text-sm mt-1">Implement lazy loading for issue attachmentsp>
</div>
<div class="flex items-center space-x-2">
<div class="flex -space-x-2">
<div class="w-6 h-6 rounded-full bg-gray-300 border-2 border-white"></div>
<div class="w-6 h-6 rounded-full bg-red-500 text-white flex items-center justify-center text-xs border-2 border-white">TKdiv>
</div>
<span class="text-gray-400 text-sm">5hspan>
</div>
</div>
</div>
</div>
</div>
<!-- Issue Detail Panel -->
<div class="w-96 bg-white border-l border-gray-200 shadow-xl transform transition-transform duration-300 ease-in-out animate-slide-in" style="animation-delay: 150ms;">
<div class="h-full flex flex-col">
<div class="p-5 border-b border-gray-200">
<div class="flex justify-between items-start">
<div>
<div class="flex items-center mb-2">
<span class="text-xs font-medium text-gray-500 mr-2">PROJ-123span>
<span class="status-pill bg-blue-100 text-blue-800">Bugspan>
</div>
<h2 class="text-xl font-bold">Fix login issueh2>
</div>
<button class="text-gray-400 hover:text-gray-600">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd" />
</svg>
</button>
</div>
<div class="mt-4 flex items-center text-sm text-gray-600">
<span>Created 2 days ago byspan>
<div class="ml-1 w-5 h-5 rounded-full bg-blue-500 text-white flex items-center justify-center text-xs">JDdiv>
</div>
</div>
<div class="flex-1 overflow-y-auto p-5">
<div class="mb-6">
<h3 class="text-sm font-medium text-gray-500 mb-2">DESCRIPTIONh3>
<p class="text-gray-700">
Users are unable to log in after resetting their password. The system shows "Invalid credentials" even with the new password.
</p>
</div>
<div class="mb-6">
<h3 class="text-sm font-medium text-gray-500 mb-3">TASKSh3>
<div class="space-y-2">
<label class="flex items-start">
<input type="checkbox" class="mt-1 h-4 w-4 text-linear-blue rounded focus:ring-linear-blue" checked>
<span class="ml-2 text-gray-700">Verify password reset email contains correct tokenspan>
</label>
<label class="flex items-start">
<input type="checkbox" class="mt-1 h-4 w-4 text-linear-blue rounded focus:ring-linear-blue">
<span class="ml-2 text-gray-700">Check token validation logicspan>
</label>
<label class="flex items-start">
<input type="checkbox" class="mt-1 h-4 w-4 text-linear-blue rounded focus:ring-linear-blue">
<span class="ml-2 text-gray-700">Test password update flowspan>
</label>
</div>
</div>
<div>
<h3 class="text-sm font-medium text-gray-500 mb-3">ASSIGNEESh3>
<div class="flex -space-x-2">
<div class="w-8 h-8 rounded-full bg-gray-300 border-2 border-white"></div>
<div class="w-8 h-8 rounded-full bg-blue-500 text-white flex items-center justify-center text-sm border-2 border-white">JDdiv>
</div>
</div>
</div>
<div class="p-4 border-t border-gray-200">
<div class="flex items-center">
<div class="w-8 h-8 rounded-full bg-gray-300 flex items-center justify-center text-sm mr-2">JDdiv>
<input type="text" class="flex-1 border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-1 focus:ring-linear-blue" placeholder="Leave a comment...">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
body>
html>
