A mobile app UI design for displaying five fitness challenge cards with responsive layout using Tailwind CSS and 256x256 image placeholders.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Fitness Challenge Cards UI</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;700&display=swap');
        body {
            font-family: 'Roboto', sans-serif;
            background-color: #f0f4f8;
        }
    </style>
</head>
<body class="p-4">
    <h1 class="text-3xl font-bold text-center mb-6 text-blue-600">Fitness Challenges</h1>
    
    <div class="max-w-sm mx-auto space-y-6">
        
        <div class="bg-white rounded-lg shadow-md overflow-hidden">
            <div class="bg-blue-100 w-64 h-64 mx-auto flex items-center justify-center text-center">
                <p class="text-blue-800 p-4">A group of runners on a tree-lined path in a park, with autumn leaves falling around them.</p>
            </div>
            <div class="p-4">
                <h2 class="text-xl font-bold text-blue-800 mb-2">5 km Run</h2>
                <p class="text-gray-600 text-sm mb-3">Join us for a fun and challenging run through the autumn park!</p>
                <div class="flex justify-between text-sm mb-3">
                    <span class="text-green-600">Start: 8:00 AM</span>
                    <span class="text-red-600">End: 10:00 AM</span>
                </div>
                <div class="flex justify-between text-sm text-gray-500 mb-4">
                    <span>Creator: John Doe</span>
                    <span>Capacity: 20 participants</span>
                </div>
                <button class="w-full bg-blue-500 text-white py-2 rounded-md hover:bg-blue-600 transition duration-300">Join Challenge</button>
            </div>
        </div>

        
        <div class="bg-white rounded-lg shadow-md overflow-hidden">
            <div class="bg-green-100 w-64 h-64 mx-auto flex items-center justify-center text-center">
                <p class="text-green-800 p-4">A soccer field with two teams facing off, the ball in mid-air between them.</p>
            </div>
            <div class="p-4">
                <h2 class="text-xl font-bold text-blue-800 mb-2">Soccer Game</h2>
                <p class="text-gray-600 text-sm mb-3">Friendly soccer match at the local field. All skill levels welcome!</p>
                <div class="flex justify-between text-sm mb-3">
                    <span class="text-green-600">Start: 2:00 PM</span>
                    <span class="text-red-600">End: 4:00 PM</span>
                </div>
                <div class="flex justify-between text-sm text-gray-500 mb-4">
                    <span>Creator: Sarah Smith</span>
                    <span>Capacity: 22 players</span>
                </div>
                <button class="w-full bg-blue-500 text-white py-2 rounded-md hover:bg-blue-600 transition duration-300">Join Challenge</button>
            </div>
        </div>

        
        <div class="bg-white rounded-lg shadow-md overflow-hidden">
            <div class="bg-yellow-100 w-64 h-64 mx-auto flex items-center justify-center text-center">
                <p class="text-yellow-800 p-4">People in various yoga poses on colorful mats in a lush green park setting.</p>
            </div>
            <div class="p-4">
                <h2 class="text-xl font-bold text-blue-800 mb-2">Yoga in the Park</h2>
                <p class="text-gray-600 text-sm mb-3">Relax and rejuvenate with our outdoor yoga session. Perfect for all levels!</p>
                <div class="flex justify-between text-sm mb-3">
                    <span class="text-green-600">Start: 7:00 AM</span>
                    <span class="text-red-600">End: 8:30 AM</span>
                </div>
                <div class="flex justify-between text-sm text-gray-500 mb-4">
                    <span>Creator: Emma Lee</span>
                    <span>Capacity: 15 yogis</span>
                </div>
                <button class="w-full bg-blue-500 text-white py-2 rounded-md hover:bg-blue-600 transition duration-300">Join Challenge</button>
            </div>
        </div>

        
        <div class="bg-white rounded-lg shadow-md overflow-hidden">
            <div class="bg-red-100 w-64 h-64 mx-auto flex items-center justify-center text-center">
                <p class="text-red-800 p-4">Cyclists riding mountain bikes on a rugged trail with a scenic mountain backdrop.</p>
            </div>
            <div class="p-4">
                <h2 class="text-xl font-bold text-blue-800 mb-2">Mountain Biking Adventure</h2>
                <p class="text-gray-600 text-sm mb-3">Experience the thrill of mountain biking on scenic trails. Helmets required!</p>
                <div class="flex justify-between text-sm mb-3">
                    <span class="text-green-600">Start: 9:00 AM</span>
                    <span class="text-red-600">End: 12:00 PM</span>
                </div>
                <div class="flex justify-between text-sm text-gray-500 mb-4">
                    <span>Creator: Mike Johnson</span>
                    <span>Capacity: 12 riders</span>
                </div>
                <button class="w-full bg-blue-500 text-white py-2 rounded-md hover:bg-blue-600 transition duration-300">Join Challenge</button>
            </div>
        </div>

        
        <div class="bg-white rounded-lg shadow-md overflow-hidden">
            <div class="bg-purple-100 w-64 h-64 mx-auto flex items-center justify-center text-center">
                <p class="text-purple-800 p-4">A view of an Olympic-sized pool with swimmers in lanes, ready to start a race.</p>
            </div>
            <div class="p-4">
                <h2 class="text-xl font-bold text-blue-800 mb-2">Swimming Challenge</h2>
                <p class="text-gray-600 text-sm mb-3">Test your endurance in our swimming challenge. 50m, 100m, and 200m races available.</p>
                <div class="flex justify-between text-sm mb-3">
                    <span class="text-green-600">Start: 3:00 PM</span>
                    <span class="text-red-600">End: 5:00 PM</span>
                </div>
                <div class="flex justify-between text-sm text-gray-500 mb-4">
                    <span>Creator: Lisa Chen</span>
                    <span>Capacity: 30 swimmers</span>
                </div>
                <button class="w-full bg-blue-500 text-white py-2 rounded-md hover:bg-blue-600 transition duration-300">Join Challenge</button>
            </div>
        </div>
    </div>
</body>
</html>

SPARKS

Fitness Challenge Cards UI with 256x256 Images