import React from 'react';
const App: React.FC = () => {
return (
<div className="h-full font-sans bg-gray-100 dark:bg-black">
<header className="bg-blue-500 dark:bg-blue-900">
<div className="container mx-auto py-4 px-8">
<h1 className="text-3xl font-semibold text-white">Minimal Blog</h1>
</div>
</header>
<main className="container mx-auto my-8 px-8">
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-8">
<div className="bg-white shadow-md rounded-lg p-8 dark:bg-gray-800">
<h2 className="text-2xl font-semibold text-gray-800 dark:text-white mb-4">Blog Post 1</h2>
<p className="text-gray-600 dark:text-gray-300">This is the content for Blog Post 1.</p>
</div>
<div className="bg-white shadow-md rounded-lg p-8 dark:bg-gray-800">
<h2 className="text-2xl font-semibold text-gray-800 dark:text-white mb-4">Blog Post 2</h2>
<p className="text-gray-600 dark:text-gray-300">This is the content for Blog Post 2.</p>
</div>
<div className="bg-white shadow-md rounded-lg p-8 dark:bg-gray-800">
<h2 className="text-2xl font-semibold text-gray-800 dark:text-white mb-4">Blog Post 3</h2>
<p className="text-gray-600 dark:text-gray-300">This is the content for Blog Post 3.</p>
</div>
</div>
</main>
<footer className="bg-gray-200 dark:bg-black">
<div className="container mx-auto py-4 px-8">
<p className="text-center text-gray-500 dark:text-gray-400">Minimal Blog</p>
</div>
</footer>
</div>
);
}
export default App;