MediumWeb Design
Random Tailwind Webapp
Generate a single-page, self-contained HTML webapp using Tailwind CSS for a randomly chosen category/industry/niche.
The 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.
How the models did
·Random Tailwind Webapp
·Random Tailwind Webapp
·Random Tailwind Webapp
·Random Tailwind Webapp
·Random Tailwind Webapp
·Random Tailwind Webapp
·Random Tailwind Webapp
·Random Tailwind Webapp
·Random Tailwind Webapp
·Random Tailwind Webapp
·Random Tailwind Webapp
·Random Tailwind Webapp
·Random Tailwind Webapp
·Random Tailwind Webapp
·Random Tailwind Webapp
·Random Tailwind Webapp (Expense Tracker)
·Random Tailwind Webapp
·Random Tailwind Webapp
·Random Tailwind Webapp
·Random Tailwind Webapp
·Random Tailwind Webapp
·Random Tailwind Webapp
·Random Tailwind Webapp
·Random Tailwind Webapp
·Random Tailwind Webapp
·Random Tailwind Webapp
·Random Tailwind Webapp
·Random Tailwind Webapp
·Random Tailwind Webapp
·Random Tailwind Webapp
·Random Tailwind Webapp
·Random Tailwind Webapp
·Random Tailwind Webapp
·Random Tailwind Webapp
·Random Tailwind Webapp
·Random Tailwind Webapp
·Random Tailwind Webapp
·Random Tailwind Webapp
·Random Tailwind Webapp
·Random Tailwind Webapp
·Random Tailwind Webapp
·Random Tailwind Webapp
·Random Tailwind Webapp
·Random Tailwind Webapp
·Random Tailwind Webapp
·Random Tailwind Webapp
·Random Tailwind Webapp
·Random Tailwind Webapp
·Random Tailwind Webapp
·Random Tailwind Webapp
·Random Tailwind Webapp
·Random Tailwind Webapp
·Random Tailwind Webapp (GPT-4.5)
·Random Tailwind Webapp
·Random Tailwind Webapp
·Random Tailwind Webapp
·Random Tailwind Webapp
·Random Tailwind Webapp
·Random Tailwind Webapp
·Random Tailwind Webapp
·Random Tailwind Webapp
·Random Tailwind Webapp
·Random Tailwind Webapp
·Random Tailwind Webapp
·Random Tailwind Webapp
·Random Tailwind Webapp
·Random Tailwind Webapp
·Random Tailwind Webapp
·Random Tailwind Webapp
·Random Tailwind Webapp
·Random Tailwind Webapp
·Random Tailwind Webapp
·Random Tailwind Webapp
·Random Tailwind Webapp
·Random Tailwind Webapp
·Random Tailwind Webapp
·Random Tailwind Webapp
·Random Tailwind Webapp
·Random Tailwind Webapp
·Random Tailwind Webapp
·Random Tailwind Webapp
·Random Tailwind Webapp
·Random Tailwind Webapp
·Random Tailwind Webapp
<Tailwind CSS. In a single-page self-contained HTML." Put this on GitHub and save it as a Gist. Then paste the GitHub Gist URL on Icybox. Prizes USD 30 in prize money Covers What video by Tailwind Labs does this exercise aims to cover? https://www.youtube.com/watch?v=elgqxmdVms8&list=PL5f_mz_zU5eXWYDXHUDOLBE0scnuJKnC2&index=3 What are the subparts of this exercise?
- Code within Webapp Icybox
- The Compensation is USD 20 for 8 tasks.
- Play around with the Tailwind CSS interface.
- is the base interface provided by the Webapp Icybox.
- Choose a category using the command in Icybox which you shall be using. You can choose to either show a menu or hide it. The aim of this exercise is not to make a menu. The aim of this exercise is to use Tailwind CSS effectively for the given exercise. If you are adding a hyperlink or a button, the hyperlink or the button itself should have a clear visual del imitation. The text within non-urgent and non-warning hyperlinks should be in blue. You should use such Tail wind CSS features which make it amply clear that it is a hyperlink or button.
- A hamburger icon when clicked will provide a menu of site links both to the left of the screen and to the right of the screen with the screen content blurred.
- If you are adding a footer, put your name in the footer with GitHub, Twitter and LinkedIn hyperlinks. Integrate the GitHub Gist on Codepen and save it.
- Tweet the Codepen and the GitHub Gist, #tailwindlabs @TailwindLabs #TailwindCSS
- Also, add appropriate hashtags to your tweet.
- Paste the link to your tweet. Penalties 1. The penalties will be rolled out in USD.
- A grammar/spelling mistake shall entail a penalty of 10 cents.
- A naming error entails a penalty of 20 cents.
- Inaccurate hyperlink entails a penalty of 20 cents.
- Absence of a hyperlink, image, icon or video entails a penalty of 20 cents.
- An irrelevant hyperlink, image, icon or video entails a penalty of 20 cents.
- Inappropriate formatting of a hyperlink, image, icon or video entails a penalty of 20 cents.
- Floral language entails a penalty of 20 cents.
- Not following border conventions entails a penalty of 20 cents per boundary.
- Not following image format conventions entails a penalty of 40 cents per image.
- Alignment errors entail a penalty of 40 cents.
- Not being able to responsive adjustment entails a penalty of 1 USD. Final Instruction In 1 sentence, tell why your photo/video combination is unique/useful/novel. What can be a next step which can be done in a subsequent phase to the current photo/video combination so that a subseque nt photo/video combination based on the current photo/video combination can be more unique/useful/novel.
·Random Tailwind Webapp
·Random Tailwind Webapp
·Random Tailwind Webapp
·Random Tailwind Webapp
·Random Tailwind Webapp
Nothing here. The model returned empty. We stared at it for a while.
·Random Tailwind Webapp
·Random Tailwind Webapp
·Random Tailwind Webapp
·Random Tailwind Webapp
·Random Tailwind Webapp
·Random Tailwind Webapp
·Random Tailwind Webapp
·Random Tailwind Webapp
·Random Tailwind Webapp
·Random Tailwind Webapp
·Random Tailwind Webapp
·Random Tailwind Webapp
·Random Tailwind Webapp
·Random Tailwind Webapp
·Random Tailwind Webapp
·Random Tailwind Webapp
·Random Tailwind Webapp
·Random Tailwind Webapp
·Random Tailwind Webapp
·Random Tailwind Webapp
·Random Tailwind Webapp
·Random Tailwind Webapp
·Random Tailwind Webapp
·Random Tailwind Webapp
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.
View raw output
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>GreenThumb - Indoor Plant Care App</title>
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
</head>
<body class="bg-gradient-to-br from-green-50 to-emerald-100 min-h-screen">
<div class="container mx-auto px-4 py-8">
<!-- Header -->
<header class="text-center mb-12">
<div class="flex items-center justify-center mb-4">
<i class="fas fa-leaf text-5xl text-emerald-600 mr-3"></i>
<h1 class="text-4xl md:text-5xl font-bold text-gray-800">GreenThumb</h1>
</div>
<p class="text-xl text-gray-600">Your personal indoor plant care assistant</p>
</header>
<!-- Main Content -->
<main class="max-w-6xl mx-auto">
<!-- Plant Care Cards -->
<section class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-12">
<!-- Monstera -->
<div class="bg-white rounded-xl shadow-lg overflow-hidden transform transition duration-300 hover:scale-105 hover:shadow-xl">
<div class="h-48 bg-gradient-to-r from-green-200 to-emerald-200 flex items-center justify-center">
<i class="fas fa-seedling text-6xl text-emerald-600 opacity-80"></i>
</div>
<div class="p-6">
<h2 class="text-2xl font-bold text-gray-800 mb-2">Monstera</h2>
<p class="text-gray-600 mb-4">The trendy Swiss cheese plant that brightens any room.</p>
<div class="space-y-2">
<div class="flex items-center">
<i class="fas fa-sun text-yellow-500 mr-2"></i>
<span class="text-sm text-gray-700">Bright, indirect light</span>
</div>
<div class="flex items-center">
<i class="fas fa-tint text-blue-500 mr-2"></i>
<span class="text-sm text-gray-700">Water when top 2 inches are dry</span>
</div>
<div class="flex items-center">
<i class="fas fa-wind text-green-500 mr-2"></i>
<span class="text-sm text-gray-700">High humidity preferred</span>
</div·Random Tailwind Webapp
·Random Tailwind Webapp
·Random Tailwind Webapp
·Random Tailwind Webapp
·Random Tailwind Webapp
·Random Tailwind Webapp
·Random Tailwind Webapp
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.
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-40·Random Tailwind Webapp
·Random Tailwind Webapp
·Random Tailwind Webapp
·Random Tailwind Webapp
·Random Tailwind Webapp
·Random Tailwind Webapp
·Random Tailwind Webapp
·Random Tailwind Webapp
·Random Tailwind Webapp
·Random Tailwind Webapp
·Random Tailwind Webapp
·Random Tailwind Webapp
·Random Tailwind Webapp
·Random Tailwind Webapp
·Random Tailwind Webapp
·Random Tailwind Webapp
·Random Tailwind Webapp
·Random Tailwind Webapp
·Random Tailwind Webapp