定制Chrome新标签页

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

function App() {
 return (
 <div className="App">
 <header className="bg-gradient-to-r from-blue-500 to-purple-600 p-6">
 <div className="container mx-auto flex justify-between items-center">
 <h1 className="text-white text-3xl font-bold">Custom New Tab</h1>
 <button className="bg-white text-blue-600 px-4 py-2 rounded-md hover:bg-blue-100 transition duration-300">Toggle Theme</button>
 </div>
 </header>
 <main className="container mx-auto mt-8">
 <section className="search-bar mb-8">
 <input type="text" placeholder="Search" className="w-full p-3 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" />
 </section>
 <section className="prayer-times mb-8">
 <h2 className="text-2xl font-bold mb-4">Prayer Times</h2>
 <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
 <div className="p-4 bg-white shadow-md rounded-md">Fajr: 5:00 AM</div>
 <div className="p-4 bg-white shadow-md rounded-md">Dhuhr: 12:30 PM</div>
 <div className="p-4 bg-white shadow-md rounded-md">Asr: 3:45 PM</div>
 <div className="p-4 bg-white shadow-md rounded-md">Maghrib: 6:30 PM</div>
 </div>
 </section>
 <section className="quranic-verse mb-8">
 <h2 className="text-2xl font-bold mb-4">Quranic Verse</h2>
 <div className="p-6 bg-white shadow-md rounded-md">
 <p className="text-xl text-gray-700 mb-4">“And We have certainly made the Qur’an easy for remembrance, so is there any who will remember?”</p>
 <button className="bg-blue-500 text-white px-4 py-2 rounded-md hover:bg-blue-600 transition duration-300">Play Audio</button>
 </div>
 </section>
 <section className="football-fixtures mb-8">
 <h2 className="text-2xl font-bold mb-4">Football Fixtures</h2>
 <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
 <div className="p-4 bg-white shadow-md rounded-md">
 <p className="text-gray-700">Match: Team A vs Team B</p>
 <p className="text-gray-500">Time: 8:00 PM</p>
 </div>
 <div className="p-4 bg-white shadow-md rounded-md">
 <p className="text-gray-700">Match: Team C vs Team D</p>
 <p className="text-gray-500">Time: 10:00 PM</p>
 </div>
 </div>
 </section>
 <section className="weather-widget mb-8">
 <h2 className="text-2xl font-bold mb-4">Weather</h2>
 <div className="p-6 bg-white shadow-md rounded-md">
 <p className="text-xl text-gray-700">Current: 25°C, Sunny</p>
 <p className="text-gray-500">Forecast: Tomorrow 27°C, Cloudy</p>
 </div>
 </section>
 <section className="custom-shortcuts mb-8">
 <h2 className="text-2xl font-bold mb-4">Shortcuts</h2>
 <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
 <div className="p-4 bg-white shadow-md rounded-md flex items-center justify-center">
 <img src="https://placehold.co/50x50" alt="YouTube" className="w-12 h-12" />
 </div>
 <div className="p-4 bg-white shadow-md rounded-md flex items-center justify-center">
 <img src="https://placehold.co/50x50" alt="Amazon" className="w-12 h-12" />
 </div>
 <div className="p-4 bg-white shadow-md rounded-md flex items-center justify-center">
 <img src="https://placehold.co/50x50" alt="Reddit" className="w-12 h-12" />
 </div>
 <div className="p-4 bg-white shadow-md rounded-md flex items-center justify-center">
 <img src="https://placehold.co/50x50" alt="Twitch" className="w-12 h-12" />
 </div>
 </div>
 </section>
 </main>
 <footer className="bg-gray-800 text-white p-6 mt-8">
 <div className="container mx-auto text-center">
 <p>© 2025 Custom New Tab. All rights reserved.</p>
 </div>
 </footer>
 </div>
 );
}

export default App;