Compare Grok 3 Mini Beta by xAI against Qwen: Qwen3 235B A22B Thinking 2507 by Qwen, context windows of 131K vs 131K, tested across 5 shared challenges. Updated March 2026.
This comparison gets 800+ views/month. Your brand could be here.
Advertise5 fights queued
Tests an AI's ability to generate vector graphics
Tests an AI's ability to create detailed SVG illustrations of gaming hardware
Tests an AI's ability to generate a complete, working landing page
Tests an AI's ability to replicate an existing UI with Tailwind CSS
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>Tests an AI's ability to create interactive web elements
