Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Yellow Background Page</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| </head> | |
| <body class="bg-yellow-300 min-h-screen flex flex-col items-center justify-center p-8"> | |
| <div class="max-w-2xl bg-yellow-100 p-8 rounded-lg shadow-lg"> | |
| <h1 class="text-4xl font-bold text-yellow-800 mb-4">Hello from Hugging Face Spaces!</h1> | |
| <p class="text-xl text-yellow-700 mb-6">This is a simple webpage with a sunny yellow background created with Tailwind CSS.</p> | |
| <div class="bg-white p-6 rounded-md shadow-inner"> | |
| <p class="text-gray-700 mb-4">The page features:</p> | |
| <ul class="list-disc pl-5 text-gray-700 space-y-2"> | |
| <li>A yellow background for the entire page</li> | |
| <li>A lighter yellow container with rounded corners</li> | |
| <li>Responsive design that works on different screen sizes</li> | |
| <li>Styled with Tailwind CSS for clean, efficient styling</li> | |
| </ul> | |
| </div> | |
| <div class="mt-8 flex justify-center"> | |
| <button class="bg-yellow-500 hover:bg-yellow-600 text-white font-bold py-2 px-4 rounded-full transition duration-300 transform hover:scale-105"> | |
| Click Me! | |
| </button> | |
| </div> | |
| </div> | |
| <footer class="mt-12 text-yellow-800 text-center"> | |
| <p>Created with Claude and published to Hugging Face Spaces</p> | |
| </footer> | |
| </body> | |
| </html> |