4 models have responded to the "Random Tailwind Webapp" challenge. Compare their approaches side-by-side on RIVAL. This response is part of RIVAL's open dataset of 5,600+ AI model responses.
Random Tailwind Webapp
Qwen3 Coder Plus's response to the 'Random Tailwind Webapp' challenge.
Qwen3 Coder Plus
September 17, 2025
Website
?Prompt
Write code for a Webapp on a random category/industry/niche of your choosing using Tailwind CSS. 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
# Pet Adoption Center - Tailwind CSS Web App
I'll create a pet adoption web application for a fictional animal shelter. This single-page app will showcase adoptable pets with filtering capabilities and detailed pet profiles.
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Paws & Claws Adoption Center</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">
<script>
tailwind.config = {
theme: {
extend: {
colors: {
primary: '#4F46E5',
secondary: '#10B981',
accent: '#F59E0B',
light: '#F9FAFB',
dark: '#1F2937'
}
}
}
}
</script>
<style>
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
body {
font-family: 'Poppins', sans-serif;
background-color: #F9FAFB;
}
.pet-card:hover {
transform: translateY(-5px);
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}
.active-filter {
background-color: #4F46E5;
color: white;
}
.hero-pattern {
background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm56-76c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM12 86c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm28-65c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm23-11c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-6 60c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm29 22c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zM32 63c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm57-13c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-9-21c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM60 91c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM35 41c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM12 60c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2z' fill='%234F46E5' fill-opacity='0.05' fill-rule='evenodd'/%3E%3C/svg%3E");
}
.pet-image {
transition: all 0.3s ease;
}
.pet-card:hover .pet-image {
transform: scale(1.05);
}
</style>
</head>
<body class="bg-light">
<!-- Header -->
<header class="bg-white shadow-md sticky top-0 z-50">
<div class="container mx-auto px-4 py-4 flex justify-between items-center">
<div class="flex items-center">
<div class="bg-primary w-10 h-10 rounded-full flex items-center justify-center mr-3">
<i class="fas fa-paw text-white text-xl"></i>
</div>
<h1 class="text-2xl font-bold text-dark">Paws & Claws</h1>
</div>
<nav class="hidden md:flex space-x-8">
<a href="#" class="text-dark font-medium hover:text-primary transition">Home</a>
<a href="#" class="text-dark font-medium hover:text-primary transition">Pets</a>
<a href="#" class="text-dark font-medium hover:text-primary transition">Adoption Process</a>
<a href="#" class="text-dark font-medium hover:text-primary transition">Success Stories</a>
<a href="#" class="text-dark font-medium hover:text-primary transition">Contact</a>
</nav>
<button class="bg-primary text-white px-6 py-2 rounded-full font-medium hover:bg-indigo-700 transition">
Donate
</button>
</div>
</header>
<!-- Hero Section -->
<section class="hero-pattern py-16 md:py-24">
<div class="container mx-auto px-4 text-center">
<h1 class="text-4xl md:text-6xl font-bold text-dark mb-6">Find Your Perfect Furry Friend</h1>
<p class="text-xl text-gray-600 max-w-2xl mx-auto mb-10">Adopting a pet saves lives and brings joy to your home. Browse our adorable pets waiting for their forever homes.</p>
<div class="flex flex-col sm:flex-row justify-center gap-4">
<button class="bg-primary text-white px-8 py-3 rounded-full font-medium hover:bg-indigo-700 transition text-lg">
Browse Pets
</button>
<button class="border-2 border-primary text-primary px-8 py-3 rounded-full font-medium hover:bg-primary hover:text-white transition text-lg">
Learn About Adoption
</button>
</div>
</div>
</section>
<!-- Stats Section -->
<section class="py-12 bg-white">
<div class="container mx-auto px-4">
<div class="grid grid-cols-2 md:grid-cols-4 gap-8 text-center">
<div class="p-6">
<div class="text-5xl font-bold text-primary mb-2">1,250+</div>
<div class="text-gray-600">Pets Adopted</div>
</div>
<div class="p-6">
<div class="text-5xl font-bold text-secondary mb-2">250+</div>
<div class="text-gray-600">Happy Families</div>
</div>
<div class="p-6">
<div class="text-5xl font-bold text-accent mb-2">98%</div>
<div class="text-gray-600">Adoption Success</div>
</div>
<div class="p-6">
<div class="text-5xl font-bold text-primary mb-2">5</div>
<div class="text-gray-600">Shelters Nationwide</div>
</div>
</div>
</div>
</section>
<!-- Filter Section -->
<section class="py-12 bg-light">
<div class="container mx-auto px-4">
<h2 class="text-3xl font-bold text-center text-dark mb-12">Find Your Perfect Companion</h2>
<div class="flex flex-wrap justify-center gap-3 mb-10">
<button class="filter-btn px-6 py-2 rounded-full border border-gray-300 hover:bg-primary hover:text-white transition">All Pets</button>
<button class="filter-btn px-6 py-2 rounded-full border border-gray-300 hover:bg-primary hover:text-white transition active-filter">Dogs</button>
<button class="filter-btn px-6 py-2 rounded-full border border-gray-300 hover:bg-primary hover:text-white transition">Cats</button>
<button class="filter-btn px-6 py-2 rounded-full border border-gray-300 hover:bg-primary hover:text-white transition">Small Pets</button>
<button class="filter-btn px-6 py-2 rounded-full border border-gray-300 hover:bg-primary hover:text-white transition">Birds</button>
</div>
<div class="flex flex-wrap justify-center gap-3 mb-12">
<button class="filter-btn px-6 py-2 rounded-full border border-gray-300 hover:bg-primary hover:text-white transition">Young</button>
<button class="filter-btn px-6 py-2 rounded-full border border-gray-300 hover:bg-primary hover:text-white transition">Adult</button>
<button class="filter-btn px-6 py-2 rounded-full border border-gray-300 hover:bg-primary hover:text-white transition">Senior</button>
<button class="filter-btn px-6 py-2 rounded-full border border-gray-300 hover:bg-primary hover:text-white transition">Male</button>
<button class="filter-btn px-6 py-2 rounded-full border border-gray-300 hover:bg-primary hover:text-white transition">Female</button>
</div>
<!-- Search Bar -->
<div class="max-w-2xl mx-auto mb-12">
<div class="relative">
<input type="text" placeholder="Search for pets by name, breed, or location..." class="w-full px-6 py-4 rounded-full border border-gray-300 focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent">
<button class="absolute right-3 top-3 bg-primary text-white px-6 py-2 rounded-full hover:bg-indigo-700 transition">
<i class="fas fa-search"></i>
</button>
</div>
</div>
</div>
</section>
<!-- Pet Listings -->
<section class="py-12 bg-white">
<div class="container mx-auto px-4">
<h2 class="text-3xl font-bold text-center text-dark mb-12">Pets Available for Adoption</h2>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
<!-- Pet Card 1 -->
<div class="pet-card bg-white rounded-xl overflow-hidden shadow-md transition-all duration-300">
<div class="relative">
<img src="https://images.unsplash.com/photo-1517423568366-8b83523034fd?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=600&q=80" alt="Buddy" class="w-full h-64 object-cover pet-image">
<div class="absolute top-4 right-4 bg-secondary text-white px-3 py-1 rounded-full text-sm font-medium">
<i class="fas fa-heart mr-1"></i> Special Needs
</div>
</div>
<div class="p-6">
<div class="flex justify-between items-start">
<div>
<h3 class="text-2xl font-bold text-dark">Buddy</h3>
<p class="text-gray-600">Golden Retriever • 3 years • Male</p>
</div>
<div class="bg-primary text-white px-3 py-1 rounded-full text-sm">
$150
</div>
</div>
<p class="mt-3 text-gray-700">Buddy is a friendly and energetic dog who loves playing fetch and going for long walks. He's great with kids and other pets.</p>
<div class="mt-6 flex justify-between items-center">
<div class="flex space-x-2">
<span class="bg-blue-100 text-primary px-3 py-1 rounded-full text-sm">Friendly</span>
<span class="bg-green-100 text-secondary px-3 py-1 rounded-full text-sm">Active</span>
</div>
<button class="bg-primary text-white px-4 py-2 rounded-full hover:bg-indigo-700 transition">
Meet Buddy
</button>
</div>
</div>
</div>
<!-- Pet Card 2 -->
<div class="pet-card bg-white rounded-xl overflow-hidden shadow-md transition-all duration-300">
<div class="relative">
<img src="https://images.unsplash.com/photo-1514888286974-6c03e2ca1dba?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=600&q=80" alt="Luna" class="w-full h-64 object-cover pet-image">
<div class="absolute top-4 right-4 bg-accent text-white px-3 py-1 rounded-full text-sm font-medium">
<i class="fas fa-bolt mr-1"></i> High Energy
</div>
</div>
<div class="p-6">
<div class="flex justify-between items-start">
<div>
<h3 class="text-2xl font-bold text-dark">Luna</h3>
<p class="text-gray-600">Maine Coon • 2 years • Female</p>
</div>
<div class="bg-primary text-white px-3 py-1 rounded-full text-sm">
$120
</div>
</div>
<p class="mt-3 text-gray-700">Luna is a beautiful cat who loves attention and playing with feather toys. She's very affectionate and gets along well with other cats.</p>
<div class="mt-6 flex justify-between items-center">
<div class="flex space-x-2">
<span class="bg-purple-100 text-purple-600 px-3 py-1 rounded-full text-sm">Affectionate</span>
<span class="bg-yellow-100 text-accent px-3 py-1 rounded-full text-sm">Playful</span>
</div>
<button class="bg-primary text-white px-4 py-2 rounded-full hover:bg-indigo-700 transition">
Meet Luna
</button>
</div>
</div>
</div>
<!-- Pet Card 3 -->
<div class="pet-card bg-white rounded-xl overflow-hidden shadow-md transition-all duration-300">
<div class="relative">
<img src="https://images.unsplash.com/photo-1425082661705-1834bfd09dca?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=600&q=80" alt="Charlie" class="w-full h-64 object-cover pet-image">
</div>
<div class="p-6">
<div class="flex justify-between items-start">
<div>
<h3 class="text-2xl font-bold text-dark">Charlie</h3>
<p class="text-gray-600">Parakeet • 1 year • Male</p>
</div>
<div class="bg-primary text-white px-3 py-1 rounded-full text-sm">
$80
</div>
</div>
<p class="mt-3 text-gray-700">Charlie is a vibrant parakeet who loves to sing and interact with people. He's easy to care for and brings joy to any home.</p>
<div class="mt-6 flex justify-between items-center">
<div class="flex space-x-2">
<span class="bg-blue-100 text-primary px-3 py-1 rounded-full text-sm">Vocal</span>
<span class="bg-green-100 text-secondary px-3 py-1 rounded-full text-sm">Social</span>
</div>
<button class="bg-primary text-white px-4 py-2 rounded-full hover:bg-indigo-700 transition">
Meet Charlie
</button>
</div>
</div>
</div>
<!-- Pet Card 4 -->
<div class="pet-card bg-white rounded-xl overflow-hidden shadow-md transition-all duration-300">
<div class="relative">
<img src="https://images.unsplash.com/photo-1551085254-e96b210db58a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=600&q=80" alt="Max" class="w-full h-64 object-cover pet-image">
<div class="absolute top-4 right-4 bg-secondary text-white px-3 py-1 rounded-full text-sm font-medium">
<i class="fas fa-heart mr-1"></i> House Trained
</div>
</div>
<div class="p-6">
<div class="flex justify-between items-start">
<div>
<h3 class="text-2xl font-bold text-dark">Max</h3>
<p class="text-gray-600">Beagle • 4 years • Male</p>
</div>
<div class="bg-primary text-white px-3 py-1 rounded-full text-sm">
$180
</div>
</div>
<p class="mt-3 text-gray-700">Max is a gentle and loyal dog who loves going on adventures. He's house-trained and gets along well with children and other dogs.</p>
<div class="mt-6 flex justify-between items-center">
<div class="flex space-x-2">
<span class="bg-blue-100 text-primary px-3 py-1 rounded-full text-sm">Loyal</span>
<span class="bg-green-100 text-secondary px-3 py-1 rounded-full text-sm">Adventurous</span>
</div>
<button class="bg-primary text-white px-4 py-2 rounded-full hover:bg-indigo-700 transition">
Meet Max
</button>
</div>
</div>
</div>
<!-- Pet Card 5 -->
<div class="pet-card bg-white rounded-xl overflow-hidden shadow-md transition-all duration-300">
<div class="relative">
<img src="https://images.unsplash.com/photo-1543852786-1cf6624b9987?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=600&q=80" alt="Bella" class="w-full h-64 object-cover pet-image">
</div>
<div class="p-6">
<div class="flex justify-between items-start">
<div>
<h3 class="text-2xl font-bold text-dark">Bella</h3>
<p class="text-gray-600">Persian • 5 years • Female</p>
</div>
<div class="bg-primary text-white px-3 py-1 rounded-full text-sm">
$200
</div>
</div>
<p class="mt-3 text-gray-700">Bella is a calm and elegant cat who enjoys lounging in sunny spots. She's gentle and perfect for a quiet household.</p>
<div class="mt-6 flex justify-between items-center">
<div class="flex space-x-2">
<span class="bg-purple-100 text-purple-600 px-3 py-1 rounded-full text-sm">Calm</span>
<span class="bg-yellow-100 text-accent px-3 py-1 rounded-full text-sm">Independent</span>
</div>
<button class="bg-primary text-white px-4 py-2 rounded-full hover:bg-indigo-700 transition">
Meet Bella
</button>
</div>
</div>
</div>
<!-- Pet Card 6 -->
<div class="pet-card bg-white rounded-xl overflow-hidden shadow-md transition-all duration-300">
<div class="relative">
<img src="https://images.unsplash.com/photo-1552053831-71594a27632d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=600&q=80" alt="Rocky" class="w-full h-64 object-cover pet-image">
<div class="absolute top-4 right-4 bg-accent text-white px-3 py-1 rounded-full text-sm font-medium">
<i class="fas fa-bolt mr-1"></i> Energetic
</div>
</div>
<div class="p-6">
<div class="flex justify-between items-start">
<div>
<h3 class="text-2xl font-bold text-dark">Rocky</h3>
<p class="text-gray-600">Labrador • 1.5 years • Male</p>
</div>
<div class="bg-primary text-white px-3 py-1 rounded-full text-sm">
$160
</div>
</div>
<p class="mt-3 text-gray-700">Rocky is a young and active dog who loves playing and learning new tricks. He's eager to please and perfect for an active family.</p>
<div class="mt-6 flex justify-between items-center">
<div class="flex space-x-2">
<span class="bg-blue-100 text-primary px-3 py-1 rounded-full text-sm">Trainable</span>
<span class="bg-green-100 text-secondary px-3 py-1 rounded-full text-sm">Playful</span>
</div>
<button class="bg-primary text-white px-4 py-2 rounded-full hover:bg-indigo-700 transition">
Meet Rocky
</button>
</div>
</div>
</div>
</div>
<div class="text-center mt-12">
<button class="border-2 border-primary text-primary px-8 py-3 rounded-full font-medium hover:bg-primary hover:text-white transition">
Load More Pets
</button>
</div>
</div>
</section>
<!-- Adoption Process -->
<section class="py-16 bg-light">
<div class="container mx-auto px-4">
<h2 class="text-3xl font-bold text-center text-dark mb-12">Simple Adoption Process</h2>
<div class="grid grid-cols-1 md:grid-cols-4 gap-8">
<div class="text-center p-6 bg-white rounded-xl shadow-md">
<div class="w-16 h-16 bg-primary rounded-full flex items-center justify-center mx-auto mb-6">
<span class="text-white text-2xl font-bold">1</span>
</div>
<h3 class="text-xl font-bold mb-3">Browse Pets</h3>
<p class="text-gray-600">Search our database of pets available for adoption.</p>
</div>
<div class="text-center p-6 bg-white rounded-xl shadow-md">
<div class="w-16 h-16 bg-primary rounded-full flex items-center justify-center mx-auto mb-6">
<span class="text-white text-2xl font-bold">2</span>
</div>
<h3 class="text-xl font-bold mb-3">Meet & Greet</h3>
<p class="text-gray-600">Schedule a visit to meet your potential new companion.</p>
</div>
<div class="text-center p-6 bg-white rounded-xl shadow-md">
<div class="w-16 h-16 bg-primary rounded-full flex items-center justify-center mx-auto mb-6">
<span class="text-white text-2xl font-bold">3</span>
</div>
<h3 class="text-xl font-bold mb-3">Application</h3>
<p class="text-gray-600">Complete the adoption application form.</p>
</div>
<div class="text-center p-6 bg-white rounded-xl shadow-md">
<div class="w-16 h-16 bg-primary rounded-full flex items-center justify-center mx-auto mb-6">
<span class="text-white text-2xl font-bold">4</span>
</div>
<h3 class="text-xl font-bold mb-3">Take Home</h3>
<p class="text-gray-600">Bring your new family member home!</p>
</div>
</div>
</div>
</section>
<!-- Testimonials -->
<section class="py-16 bg-white">
<div class="container mx-auto px-4">
<h2 class="text-3xl font-bold text-center text-dark mb-12">Happy Adopters</h2>
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
<div class="bg-light p-8 rounded-xl">
<div class="flex items-center mb-6">
<div class="w-16 h-16 rounded-full overflow-hidden mr-4">
<img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=200&q=80" alt="Adopter" class="w-full h-full object-cover">
</div>
<div>
<h4 class="font-bold text-lg">Michael Johnson</h4>
<div class="flex text-accent">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
</div>
</div>
</div>
<p class="text-gray-700 italic">"Adopting Buddy was the best decision we ever made. He's brought so much joy to our family and is the perfect companion for our kids."</p>
</div>
<div class="bg-light p-8 rounded-xl">
<div class="flex items-center mb-6">
<div class="w-16 h-16 rounded-full overflow-hidden mr-4">
<img src="https://images.unsplash.com/photo-1544005313-94ddf0286df2?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=200&q=80" alt="Adopter" class="w-full h-full object-cover">
</div>
<div>
<h4 class="font-bold text-lg">Sarah Williams</h4>
<div class="flex text-accent">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
</div>
</div>
</div>
<p class="text-gray-700 italic">"Luna has been the perfect addition to our home. The adoption process was smooth and the staff was incredibly helpful and knowledgeable."</p>
</div>
<div class="bg-light p-8 rounded-xl">
<div class="flex items-center mb-6">
<div class="w-16 h-16 rounded-full overflow-hidden mr-4">
<img src="https://images.unsplash.com/photo-1552058544-f2b08422138a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=200&q=80" alt="Adopter" class="w-full h-full object-cover">
</div>
<div>
<h4 class="font-bold text-lg">David Chen</h4>
<div class="flex text-accent">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star-half-alt"></i>
</div>
</div>
</div>
<p class="text-gray-700 italic">"Rocky has brought so much energy and happiness to our family. We're grateful to Paws & Claws for helping us find our perfect match."</p>
</div>
</div>
</div>
</section>
<!-- CTA Section -->
<section class="py-16 bg-primary text-white">
<div class="container mx-auto px-4 text-center">
<h2 class="text-3xl md:text-4xl font-bold mb-6">Ready to Find Your New Best Friend?</h2>
<p class="text-xl max-w-2xl mx-auto mb-10">Visit our shelter today or browse our available pets online. Adoption saves lives!</p>
<div class="flex flex-col sm:flex-row justify-center gap-4">
<button class="bg-white text-primary px-8 py-3 rounded-full font-medium hover:bg-gray-100 transition text-lg">
Visit Our Shelter
</button>
<button class="border-2 border-white text-white px-8 py-3 rounded-full font-medium hover:bg-white hover:text-primary transition text-lg">
Schedule a Visit
</button>
</div>
</div>
</section>
<!-- Footer -->
<footer class="bg-dark text-white py-12">
<div class="container mx-auto px-4">
<div class="grid grid-cols-1 md:grid-cols-4 gap-8">
<div>
<div class="flex items-center mb-6">
<div class="bg-primary w-10 h-10 rounded-full flex items-center justify-center mr-3">
<i class="fas fa-paw text-white text-xl"></i>
</div>
<h3 class="text-2xl font-bold">Paws & Claws</h3>
</div>
<p class="text-gray-40Random Tailwind Webapp
About Qwen3 Coder Plus
Capabilities
ConversationReasoningCode GenerationAnalysis
Categories
TextCode
Specifications
- Provider
- Qwen
- Released
- 2025-09-17
- Size
- LARGE
- Context
- 128,000 tokens
