Example from https://react-md.dev/packages/tabs/demos#persistent-tabs

Tabs Example - Persistent Tabs

<!DOCTYPE html>
<html lang="en" class="light-theme">
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, shrink-to-fit=no"
    />
    <meta name="theme-color" content="#000000" />
    <link
      rel="stylesheet"
      href="https://fonts.googleapis.com/css?family=Material+Icons|Roboto:400,500,700|Source+Code+Pro"
    />
    
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/gh/mlaursen/react-md@5.1.6/themes/react-md.teal-pink-200-light.min.css"
    />
    <title>Tabs Example - Persistent Tabs</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
  </body>
</html>

import type { ReactElement } from "react";
import { Typography } from "@react-md/typography";

export default function Content1(): ReactElement {
  return <Typography type="headline-4">Tab 1 Content</Typography>;
}


/* eslint-disable camelcase */
import type { ReactElement } from "react";
import { useEffect, useState } from "react";
import { MediaContainer, MediaOverlay } from "@react-md/media";
import { CircularProgress } from "@react-md/progress";
import { Typography } from "@react-md/typography";
import { GridList, GridListCell } from "@react-md/utils";

import { randomInt } from "./random";

interface Item {
  name: string;
  url: string;
}

interface State {
  loading: boolean;
  data: Item[];
}

interface PicsumPhotoItem {
  format: string;
  height: number;
  width: number;
  filename: string;
  id: number;
  author: string;
  author_url: string;
  post_url: string;
}

export default function Content2(): ReactElement {
  const [{ loading, data }, setState] = useState<State>({
    loading: false,
    data: [],
  });

  useEffect(() => {
    let cancelled = false;

    setState({ loading: true, data: [] });
    (async function load() {
      const response = await fetch("https://picsum.photos/list");
      const result = await response.json();
      const list = result as PicsumPhotoItem[];
      const start = randomInt({ min: 0, max: 20 });
      const total = randomInt({ min: 6, max: 14 });
      const data = list.slice(start, start + total).map(({ author, id }) => ({
        name: author,
        url: `https://picsum.photos/250?image=${id}`,
      }));
      if (!cancelled) {
        setState({
          data,
          loading: false,
        });
      }
    })();

    return () => {
      cancelled = true;
    };
  }, []);

  return (
    <>
      <Typography type="headline-4">Tab 2 Content</Typography>
      <GridList maxCellSize={250}>
        {loading && <CircularProgress id="loading-tab-2" />}
        {data.map(({ name, url }) => (
          <GridListCell key={url} square clone>
            <MediaContainer>
              <img src={url} alt="" />
              <MediaOverlay>
                <Typography margin="none">{name}</Typography>
              </MediaOverlay>
            </MediaContainer>
          </GridListCell>
        ))}
      </GridList>
    </>
  );
}


import type { ReactElement } from "react";
import { AppBar } from "@react-md/app-bar";
import { Checkbox, useChecked } from "@react-md/form";
import { TabsManager, Tabs, TabPanels, TabPanel } from "@react-md/tabs";

import Content1 from "./Content1";
import Content2 from "./Content2";
import styles from "./PersistentTabs.module.scss";

const tabs = ["Tab 1", "Tab 2"] as const;

export default function Demo(): ReactElement {
  const [persistent, handleChange] = useChecked(false);
  return (
    <TabsManager tabs={tabs} tabsId="persistent-tabs">
      <AppBar theme="default" height="none">
        <AppBar>
          <Checkbox
            id="persistent-tab-enable"
            checked={persistent}
            onChange={handleChange}
            label="Enable Persistent Tabs"
          />
        </AppBar>
        <Tabs />
      </AppBar>
      <TabPanels persistent={persistent} className={styles.container}>
        <TabPanel>
          <Content1 />
        </TabPanel>
        <TabPanel>
          <Content2 />
        </TabPanel>
      </TabPanels>
    </TabsManager>
  );
}


@use "@react-md/theme/dist/color-palette" as *;
// Note: Outside of codesandbox, this can be `@forward "react-md" with (`
@forward "react-md/dist/everything" with (
  $rmd-theme-light: true,
  $rmd-theme-primary: $rmd-teal-500,
  $rmd-theme-secondary: $rmd-pink-a-200,
);


import { render } from "react-dom";
import { Configuration } from "@react-md/layout";

// the styles are actually loaded as the pre-compiled themes in the index.html
// to speed up sandbox compilation. If you want to update the theme, you'll need
// to uncomment this line and remove the `<link>` tag in the `index.html`
// import "./styles.scss"

import Demo from "./Demo";

const App = () => (
  <Configuration>
    <Demo />
  </Configuration>
);

render(<App />, document.getElementById("root"));


/* eslint-disable import/prefer-default-export */
interface RandomInt {
  min?: number;
  max?: number;
}

/**
 * Generates a random integer between a min and max value. Defaults
 * to 0-10.
 */
export function randomInt({ min = 0, max = 10 }: RandomInt = {}): number {
  return Math.floor(Math.random() * max) + min;
}


@use "./everything" as *;

@include react-md-utils;
