4 models have responded to the "Linear App Clone" challenge. Compare their approaches side-by-side on RIVAL. This response is part of RIVAL's open dataset of 5,600+ AI model responses.
Linear App Clone
Qwen3 235B A22B Thinking 2507's response to the 'Linear App Clone' challenge.
Qwen: Qwen3 235B A22B Thinking 2507
July 25, 2025
Website
?Prompt
Recreate the Linear App UI using Tailwind CSS, keeping the layout and animations as close as possible. In a single-page self-contained HTML.
Response
Couldn't render this response
This model didn't return a displayable web page for this challenge.
View raw output
<!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>Linear App Clone
About Qwen: Qwen3 235B A22B Thinking 2507
Capabilities
ConversationReasoningCode GenerationAnalysisTool Use
Categories
TextCode
Specifications
- Provider
- Qwen
- Released
- 2025-07-25
- Size
- XLARGE
- Context
- 131,072 tokens
