react tailwind component that has the current time and a button to update the current time when clicked. the style should look like the yellow pages. in typescript

Here's how you can create a simple React component that displays the current time and a button to update it using Tailwind CSS. This answer assumes that you have installed both React and Tailwind CSS in your project.

import React, { useState } from "react";

interface Props {}

const Clock: React.FC<Props> = () => {
  const [currentTime, setCurrentTime] = useState(new Date());

  const handleUpdateClick = () => {
    setCurrentTime(new Date());
  };

  return (
    <div className="bg-yellow-500 p-5 rounded-lg text-center">
      <h1 className="text-3xl font-bold mb-2">
        {currentTime.toLocaleTimeString()}
      </h1>
      <button
        className="bg-white hover:bg-gray-100 text-gray-800 font-semibold py-2 px-4 border border-gray-400 rounded shadow"
        onClick={handleUpdateClick}
      >
        Update Time
      </button>
    </div>
  );
};

export default Clock;
673 chars
28 lines

In this component, we use the useState hook to keep track of the current time in the currentTime state variable. We display the current time using toLocaleTimeString() method of the Date object.

When the user clicks the "Update Time" button, we call the handleUpdateClick function, which sets the currentTime variable to a new Date object.

We use Tailwind CSS classes to style the component. The outer div has a yellow background color (bg-yellow-500), rounded corners (rounded-lg), and padding (p-5) to give it a similar look to the yellow pages.

The h1 tag that displays the current time has a large font size (text-3xl), bold font weight (font-bold), and some bottom margin (mb-2).

Finally, the button has a white background color (bg-white), gray border (border-gray-400), and some shadow (shadow) to make it stand out. When the user hovers over the button, it gets a lighter gray background color (hover:bg-gray-100) to indicate that it's clickable.