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
Deepseek V3.2 Exp's response to the 'Linear App Clone' challenge.
DeepSeek V3.2 Exp
September 29, 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
# 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-300Linear App Clone
About DeepSeek V3.2 Exp
Capabilities
ConversationReasoningCode GenerationAnalysis
Categories
TextCode
Specifications
- Provider
- Deepseek
- Released
- 2025-09-29
- Size
- LARGE
- Context
- 163,840 tokens
