React Js Tabs Panel Component Example

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <script src="https://unpkg.com/react@17.0.2/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.development.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@babel/standalone@7.14.6/babel.min.js"></script>
  </head>

<body>
    <div id="app"></div>
    <script type="text/babel" data-presets="env,react">
      const { useState } = React;

function App() {
        const [activeTab, setActiveTab] = useState(0);

const tabs = [
          { title: "Font Awesome 4 version", content: "Font Awesome Icons" },
          { title: "Material Design Icons", content: "Material Design Icons" },
          { title: "Bootstrap Icons", content: "Bootstrap Icons" },
        ];

return (
          <div className="container">
            <h3>React Js Tabs Panel Example</h3>
            <div className="tab-panel">
              <div className="tab-header">
                {tabs.map((tab, index) => (
                  <div
                    key={index}
                    className={`tab-title ${
                      activeTab === index ? "active" : ""
                    }`}
                    onClick={() => setActiveTab(index)}
                  >
                    {tab.title}
                  </div>
                ))}
              </div>
              <div className="tab-content">{tabs[activeTab].content}</div>
            </div>
          </div>
        );
      }

ReactDOM.render(<App />, document.getElementById("app"));
    </script>

.tab-panel {
        border: 1px solid #ccc;
        border-radius: 5px;
        overflow: hidden;
      }

.tab-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        background-color: #f1f1f1; /* You can change this to your desired Vuetify color */
      }

.tab-title {
        cursor: pointer;
        padding: 10px 20px;
        font-size: 16px;
        color: #333;
        transition: background-color 0.3s ease;
      }

.tab-title.active {
        background-color: #1976d2; /* Vuetify primary color */
        color: #fff; /* Text color for active tab */
      }

.tab-content {
        padding: 20px;
        background-color: #fff;
      }

/* Hover effect */
      .tab-title:not(.active):hover {
        background-color: #e6e6e6;
      }

/* Border bottom indicator on active tab */
      .tab-title.active::after {
        content: "";
        display: block;
        height: 2px;
        background-color: #1976d2; /* Vuetify primary color */
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 100%;
      }

/* Animation for tab content */
      .tab-content {
        opacity: 0;
        animation: fadeIn 0.3s ease-in-out forwards;
      }

@keyframes fadeIn {
        0% {
          opacity: 0;
        }
        100% {
          opacity: 1;
        }
      }
    </style>
  </body>
</html>

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <script src="https://unpkg.com/react@17.0.2/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.development.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@babel/standalone@7.14.6/babel.min.js"></script>
  </head>
​
  <body>
    <div id="app"></div>
    <script type="text/babel" data-presets="env,react">
      const { useState } = React;
​
      function App() {
        const [activeTab, setActiveTab] = useState(0);
​
        const tabs = [
          { title: "Font Awesome 4 version", content: "Font Awesome Icons" },
          { title: "Material Design Icons", content: "Material Design Icons" },
          { title: "Bootstrap Icons", content: "Bootstrap Icons" },
        ];
​
        return (
          <div className="container">
            <h3>React Js Tabs Panel Example</h3>
            <div className="tab-panel">
              <div className="tab-header">
                {tabs.map((tab, index) => (
                  <div
                    key={index}
                    className={`tab-title ${
                      activeTab === index ? "active" : ""
                    }`}
                    onClick={() => setActiveTab(index)}
                  >
                    {tab.title}
                  </div>
                ))}
              </div>
              <div className="tab-content">{tabs[activeTab].content}</div>
            </div>
          </div>
        );
      }
​
      ReactDOM.render(<App />, document.getElementById("app"));
    </script>
​
    <style>
      /* Container Styles */
      .container {
        max-width: 600px;
        margin: 0 auto;
        padding: 20px;
        border-radius: 10px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
      }
​
      .tab-panel {
        border: 1px solid #ccc;
        border-radius: 5px;
        overflow: hidden;
      }
​
      .tab-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        background-color: #f1f1f1; /* You can change this to your desired Vuetify color */
      }
​
      .tab-title {
        cursor: pointer;
        padding: 10px 20px;
        font-size: 16px;
        color: #333;
        transition: background-color 0.3s ease;
      }
​
      .tab-title.active {
        background-color: #1976d2; /* Vuetify primary color */
        color: #fff; /* Text color for active tab */
      }
​
      .tab-content {
        padding: 20px;
        background-color: #fff;
      }
​
      /* Hover effect */
      .tab-title:not(.active):hover {
        background-color: #e6e6e6;
      }
​
      /* Border bottom indicator on active tab */
      .tab-title.active::after {
        content: "";
        display: block;
        height: 2px;
        background-color: #1976d2; /* Vuetify primary color */
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 100%;
      }
​
      /* Animation for tab content */
      .tab-content {
        opacity: 0;
        animation: fadeIn 0.3s ease-in-out forwards;
      }
​
      @keyframes fadeIn {
        0% {
          opacity: 0;
        }
        100% {
          opacity: 1;
        }
      }
    </style>
  </body>
</html>
​