Создать читательский дневник

import React from 'react';
import './App.css';

function App() {
  return (
    <div className="App bg-blue-100 min-h-screen p-8">
      <header className="text-center mb-8">
        <h1 className="text-4xl font-bold text-blue-900">Reader's Journal</h1>
        <p className="text-lg text-blue-700">Track Your Reading Journey</p>
      </header>

      <section className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        {[...Array(6)].map((_, index) => (
          <div key={index} className="bg-white rounded-lg shadow-lg p-6 hover:shadow-xl transition-shadow">
            <img src="https://placehold.co/300x200" alt="Book Cover" className="w-full rounded-md mb-4" />
            <h2 className="text-xl font-semibold text-blue-900 mb-2">Book Title {index + 1}</h2>
            <p className="text-gray-600">A brief summary or note about the book...</p>
            <div className="mt-4 flex justify-between items-center">
              <button className="bg-blue-500 text-white px-4 py-2 rounded-full hover:bg-blue-600 transition-colors">Read More</button>
              <span className="text-sm text-gray-500">Completed: 2025-01-01</span>
            </div>
          </div>
        ))}
      </section>

      <footer className="text-center mt-8 text-gray-600">
        <p>© 2025 Reader's Journal. All rights reserved.</p>
      </footer>
    </div>
  );
}

export default App;