```jsx
import React from 'react';

export const TabPage = () => (
  <Tabs>
    <Tab title="React">
      React has been designed from the start for gradual adoption, and you can
      use as little or as much React as you need. Whether you want to get a
      taste of React, add some interactivity to a simple HTML page, or start a
      complex React-powered app, the links in this section will help you get
      started
    </Tab>
    <Tab title="Next.js">
      The React Framework for Production Next.js gives you the best developer
      experience with all the features you need for production: hybrid static &
      server rendering, TypeScript support, smart bundling, route pre-fetching,
      and more. No config needed.
    </Tab>
    <Tab title="Nuxt.js">
      The Intuitive Vue Framework Build your next Vue.js application with
      confidence using NuxtJS. An open source framework making web development
      simple and powerful.
    </Tab>
  </Tabs>
);

/* Tab logic */

const style = {
  notSelected: `border-b text-sm`,
  selected: `text-gray-700 text-sm border-b-2 border-indigo-700 `,
  default: `-mb-2 px-4 md:px-8 py-4 md:py-1 inline-block focus:outline-none`,
};

function Tabs({ children }) {
  const childrenArray = React.Children.toArray(children);
  const [current, setCurrent] = React.useState(childrenArray[0].key);

  const newChildren = childrenArray.map((child) =>
    React.cloneElement(child, { selected: child?.key === current }),
  );

  return (
    <nav>
      {childrenArray.map((child) => (
        <div
          role="link"
          tabIndex={0}
          onClick={() => setCurrent(child?.key)}
          key={child?.key}
          className={`${style.default} 
            ${current === child?.key ? style.selected : style.notSelected}`}
        >
          {child?.props.title}
        </div>
      ))}
      <section>{newChildren}</section>
    </nav>
  );
}

function Tab({ children, selected }) {
  return (
    <div hidden={!selected} className="mt-4">
      {children}
    </div>
  );
}
```
