открыть новое окно

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

const App = () => {
  const openNewWindow = () => {
    window.open('https://placehold.co/600x400', '_blank');
  };

  return (
    <div className='App bg-gradient-to-br from-blue-50 to-purple-100 min-h-screen p-8'>
      <header className='text-center py-10'>
        <h1 className='text-5xl font-bold text-gray-800'>Welcome to My React App</h1>
        <p className='text-lg text-gray-600 mt-4'>Explore the beauty of modern web development</p>
      </header>

      <main className='max-w-6xl mx-auto'>
        <section className='bg-white p-8 rounded-lg shadow-md mb-8'>
          <h2 className='text-2xl font-semibold text-gray-700 mb-4'>Section 1: Introduction</h2>
          <p className='text-gray-600 leading-relaxed'>This is a brief introduction to the wonders of React and Tailwind CSS. Learn how to create stunning UIs with ease.</p>
        </section>

        <section className='bg-white p-8 rounded-lg shadow-md mb-8'>
          <h2 className='text-2xl font-semibold text-gray-700 mb-4'>Section 2: Features</h2>
          <div className='grid grid-cols-1 md:grid-cols-3 gap-6'>
            <div className='bg-gray-100 p-6 rounded-lg hover:bg-gray-200 transition-all'>
              <h3 className='text-xl font-medium text-gray-800 mb-3'>Feature One</h3>
              <p className='text-gray-600'>Discover the first feature designed to enhance your experience.</p>
            </div>
            <div className='bg-gray-100 p-6 rounded-lg hover:bg-gray-200 transition-all'>
              <h3 className='text-xl font-medium text-gray-800 mb-3'>Feature Two</h3>
              <p className='text-gray-600'>Explore the second feature crafted for optimal performance.</p>
            </div>
            <div className='bg-gray-100 p-6 rounded-lg hover:bg-gray-200 transition-all'>
              <h3 className='text-xl font-medium text-gray-800 mb-3'>Feature Three</h3>
              <p className='text-gray-600'>Experience the third feature with cutting-edge technology.</p>
            </div>
          </div>
        </section>

        <section className='bg-white p-8 rounded-lg shadow-md mb-8'>
          <h2 className='text-2xl font-semibold text-gray-700 mb-4'>Section 3: Gallery</h2>
          <div className='grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6'>
            <img src='https://placehold.co/300x200' alt='Placeholder' className='rounded-lg shadow-md hover:shadow-lg transition-all' />
            <img src='https://placehold.co/300x200' alt='Placeholder' className='rounded-lg shadow-md hover:shadow-lg transition-all' />
            <img src='https://placehold.co/300x200' alt='Placeholder' className='rounded-lg shadow-md hover:shadow-lg transition-all' />
            <img src='https://placehold.co/300x200' alt='Placeholder' className='rounded-lg shadow-md hover:shadow-lg transition-all' />
            <img src='https://placehold.co/300x200' alt='Placeholder' className='rounded-lg shadow-md hover:shadow-lg transition-all' />
            <img src='https://placehold.co/300x200' alt='Placeholder' className='rounded-lg shadow-md hover:shadow-lg transition-all' />
          </div>
        </section>

        <section className='bg-white p-8 rounded-lg shadow-md mb-8'>
          <h2 className='text-2xl font-semibold text-gray-700 mb-4'>Section 4: Testimonials</h2>
          <div className='grid grid-cols-1 md:grid-cols-2 gap-6'>
            <div className='bg-gray-100 p-6 rounded-lg'>
              <p className='text-gray-600 italic'>"This app transformed my workflow! Highly recommend it to anyone in tech."</p>
              <p className='text-gray-800 font-medium mt-4'>― Jane Doe</p>
            </div>
            <div className='bg-gray-100 p-6 rounded-lg'>
              <p className='text-gray-600 italic'>"Incredible user experience and sleek design. Truly a game-changer."</p>
              <p className='text-gray-800 font-medium mt-4'>― John Smith</p>
            </div>
          </div>
        </section>

        <section className='bg-white p-8 rounded-lg shadow-md mb-8'>
          <h2 className='text-2xl font-semibold text-gray-700 mb-4'>Section 5: Pricing</h2>
          <div className='grid grid-cols-1 md:grid-cols-3 gap-6'>
            <div className='bg-gray-100 p-6 rounded-lg'>
              <h3 className='text-xl font-medium text-gray-800 mb-3'>Basic Plan</h3>
              <p className='text-gray-600'>Everything you need to get started. Perfect for beginners.</p>
              <p className='text-2xl font-bold text-gray-800 mt-4'>$10/mo</p>
            </div>
            <div className='bg-gray-100 p-6 rounded-lg'>
              <h3 className='text-xl font-medium text-gray-800 mb-3'>Pro Plan</h3>
              <p className='text-gray-600'>Advanced features for seasoned professionals. Take your skills to the next level.</p>
              <p className='text-2xl font-bold text-gray-800 mt-4'>$25/mo</p>
            </div>
            <div className='bg-gray-100 p-6 rounded-lg'>
              <h3 className='text-xl font-medium text-gray-800 mb-3'>Enterprise Plan</h3>
              <p className='text-gray-600'>Tailored solutions for large organizations. Scale effortlessly.</p>
              <p className='text-2xl font-bold text-gray-800 mt-4'>$50/mo</p>
            </div>
          </div>
        </section>

        <section className='bg-white p-8 rounded-lg shadow-md mb-8'>
          <h2 className='text-2xl font-semibold text-gray-700 mb-4'>Section 6: Call to Action</h2>
          <div className='text-center'>
            <button
              onClick={openNewWindow}
              className='bg-blue-600 text-white px-8 py-3 rounded-lg hover:bg-blue-700 transition-all'
            >
              Open New Window
            </button>
          </div>
        </section>

        <section className='bg-white p-8 rounded-lg shadow-md mb-8'>
          <h2 className='text-2xl font-semibold text-gray-700 mb-4'>Section 7: Contact</h2>
          <form className='max-w-lg mx-auto'>
            <div className='mb-4'>
              <label className='block text-gray-700 mb-2'>Name</label>
              <input type='text' className='w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-600' />
            </div>
            <div className='mb-4'>
              <label className='block text-gray-700 mb-2'>Email</label>
              <input type='email' className='w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-600' />
            </div>
            <div className='mb-4'>
              <label className='block text-gray-700 mb-2'>Message</label>
              <textarea rows='4' className='w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-600'></textarea>
            </div>
            <button type='submit' className='bg-blue-600 text-white px-8 py-3 rounded-lg hover:bg-blue-700 transition-all w-full'>Send Message</button>
          </form>
        </section>
      </main>

      <footer className='text-center py-6 mt-10'>
        <p className='text-gray-600'>© 2025 My React App. All rights reserved.</p>
      </footer>
    </div>
  );
};

export default App;