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
PaLM 2 Chat's response to the Linear App Clone challenge...
PaLM 2 Chat
April 20, 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" />
<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.png" 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.png" :src="logos" alt="logo" class="rounded-lg">
<!-- Truncated content from model response -->
Linear App Clone
About PaLM 2 Chat
Capabilities
ConversationReasoningCode Generation
Categories
TextCode
Specifications
- Provider
- Released
- 2023-07-20
- Size
- LARGE
- Parameters
- 340B
- Context
- 8,192 tokens
