gistlib - react tailwind google’s homepage in typescript

To create a responsive Google homepage using React, Tailwind CSS, and Typescript, follow the steps below:

Create a new react app by running the following command:


index.ts
npx create-react-app my-app --template typescript
50 chars
2 lines

Install Tailwind CSS by running the following command:


index.ts
npm install -D tailwindcss@latest
34 chars
2 lines

Create a Tailwind configuration file by running the following command:


index.ts
npx tailwindcss-cli@latest init
32 chars
2 lines

In the src folder, create a new styles folder and add index.css file with the following code to import Tailwind CSS and to reset default browser styles:


/* ./src/styles/index.css */

@tailwind base;
@tailwind components;
@tailwind utilities;

html,
body {
  padding: 0;
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 16px;
}
196 chars
14 lines

Import the index.css file in the index.tsx file:


index.ts
// ./src/index.tsx

import React from 'react';
import ReactDOM from 'react-dom';
import './styles/index.css';
import App from './App';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);
246 chars
14 lines

Create a new Header component in the src folder to display Google's logo, search bar, and menu links. You can use the following code:


// ./src/Header.tsx

import React from 'react';
import { ReactComponent as GoogleLogo } from './google-logo.svg';

const Header: React.FC = () => {
  return (
    <header className="px-4 py-3 flex justify-between items-center bg-white">
      <div className="flex items-center">
        <GoogleLogo className="h-10 w-10" />
        <div className="ml-2 font-semibold text-gray-700">Search</div>
      </div>
      <nav>
        <button className="mr-6 text-sm text-gray-700">Gmail</button>
        <button className="mr-6 text-sm text-gray-700">Images</button>
        <button className="mr-6 text-sm text-gray-700">Apps</button>
        <button
          className="py-2 px-4 bg-blue-600 text-gray-100 text-sm rounded-lg shadow-md hover:bg-blue-500 transition duration-300"
        >
          Sign in
        </button>
      </nav>
    </header>
  );
};

export default Header;
880 chars
28 lines

Add the Header component to the App component:


// ./src/App.tsx

import React from 'react';
import Header from './Header';

const App: React.FC = () => {
  return (
    <div>
      <Header />
    </div>
  );
};

export default App;
185 chars
15 lines

To display the search items, create a new component called SearchItem:


// ./src/SearchItem.tsx

import React from 'react';

type SearchItemProps = {
  title: string;
  url: string;
  description: string;
};

const SearchItem: React.FC<SearchItemProps> = ({ title, url, description }) => {
  return (
    <div className="py-3">
      <a className="text-blue-800 hover:underline" href={url}>
        <h2 className="text-lg font-semibold">{title}</h2>
      </a>
      <p className="text-gray-700">{description}</p>
    </div>
  );
};

export default SearchItem;
489 chars
23 lines

Display search items in a list using the SearchItem component:


// ./src/SearchResults.tsx

import React from 'react';
import SearchItem from './SearchItem';

type SearchResultsProps = {
  items: Array<{
    title: string;
    url: string;
    description: string;
  }>;
};

const SearchResults: React.FC<SearchResultsProps> = ({ items }) => {
  return (
    <main className="px-4">
      <div className="py-6">
        <div className="hidden md:block">
          <span className="text-gray-500">About </span>
          <span className="font-semibold">5,680,000,000 results</span>
          <span className="ml-4 text-gray-500"> (0.67 seconds)</span>
        </div>
        {items.map((item, index) => (
          <SearchItem key={index} {...item} />
        ))}
      </div>
    </main>
  );
};

export default SearchResults;
763 chars
32 lines

Add the SearchResults component to the App component:


// ./src/App.tsx

import React from 'react';
import Header from './Header';
import SearchResults from './SearchResults';

const searchResults = [
  {
    title: 'Google',
    url: 'https://www.google.com',
    description: 'Search the world\'s information, including webpages, images, videos and more.',
  },
  {
    title: 'Maps',
    url: 'https://www.google.com/maps',
    description: 'Find local businesses, view maps and get driving directions in Google Maps.',
  },
  {
    title: 'YouTube',
    url: 'https://www.youtube.com',
    description: 'Enjoy the videos and music you love, upload original content, and share it all with friends, family, and the world on YouTube.',
  },
];

const App: React.FC = () => {
  return (
    <div>
      <Header />
      <SearchResults items={searchResults} />
    </div>
  );
};

export default App;

846 chars
36 lines

The result is similar to the Google homepage, but with static data:

Google homepage clone screenshot

react tailwind google’s homepage in typescript

similar typescript code snippets

related categories