import React from "react";
      
      const Tabs = ({ color }) => {
        const [openTab, setOpenTab] = React.useState(1);
        return (
          <>
            <div className="flex flex-wrap">
              <div className="w-full">
                <ul
                  className="flex mb-0 list-none flex-wrap pt-3 pb-4 flex-row"
                  role="tablist"
                >
                  <li className="-mb-px mr-2 last:mr-0 flex-auto text-center">
                    <a
                      className={
                        "text-xs font-bold uppercase px-5 py-3 shadow-lg rounded block leading-normal " +
                        (openTab === 1
                          ? "text-white bg-" + color + "-600"
                          : "text-" + color + "-600 bg-white")
                      }
                      onClick={e => {
                        e.preventDefault();
                        setOpenTab(1);
                      }}
                      data-toggle="tab"
                      href="#link1"
                      role="tablist"
                    >
                      Profile
                    </a>
                  </li>
                  <li className="-mb-px mr-2 last:mr-0 flex-auto text-center">
                    <a
                      className={
                        "text-xs font-bold uppercase px-5 py-3 shadow-lg rounded block leading-normal " +
                        (openTab === 2
                          ? "text-white bg-" + color + "-600"
                          : "text-" + color + "-600 bg-white")
                      }
                      onClick={e => {
                        e.preventDefault();
                        setOpenTab(2);
                      }}
                      data-toggle="tab"
                      href="#link2"
                      role="tablist"
                    >
                        Settings
                    </a>
                  </li>
                  <li className="-mb-px mr-2 last:mr-0 flex-auto text-center">
                    <a
                      className={
                        "text-xs font-bold uppercase px-5 py-3 shadow-lg rounded block leading-normal " +
                        (openTab === 3
                          ? "text-white bg-" + color + "-600"
                          : "text-" + color + "-600 bg-white")
                      }
                      onClick={e => {
                        e.preventDefault();
                        setOpenTab(3);
                      }}
                      data-toggle="tab"
                      href="#link3"
                      role="tablist"
                    >
                        Options
                    </a>
                  </li>
                </ul>
                <div className="relative flex flex-col min-w-0 break-words bg-white w-full mb-6 shadow-lg rounded">
                  <div className="px-4 py-5 flex-auto">
                    <div className="tab-content tab-space">
                      <div className={openTab === 1 ? "block" : "hidden"} id="link1">
                        <p>
                          Collaboratively administrate empowered markets via
                          plug-and-play networks. Dynamically procrastinate B2C users
                          after installed base benefits.
                          <br />
                          <br /> Dramatically visualize customer directed convergence
                          without revolutionary ROI.
                        </p>
                      </div>
                      <div className={openTab === 2 ? "block" : "hidden"} id="link2">
                        <p>
                          Completely synergize resource taxing relationships via
                          premier niche markets. Professionally cultivate one-to-one
                          customer service with robust ideas.
                          <br />
                          <br />
                          Dynamically innovate resource-leveling customer service for
                          state of the art customer service.
                        </p>
                      </div>
                      <div className={openTab === 3 ? "block" : "hidden"} id="link3">
                        <p>
                          Efficiently unleash cross-media information without
                          cross-media value. Quickly maximize timely deliverables for
                          real-time schemas.
                          <br />
                          <br /> Dramatically maintain clicks-and-mortar solutions
                          without functional solutions.
                        </p>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </>
        );
      };
      
      export default function TabsRender() {
        return (
          <>
            return <Tabs color="pink" />;
          </>
        );
      }

      Javascript language logoTabs

      Tailwind Components

      0 Comments

        Add Comment

        Log in to add a comment

        Codiga - All rights reserved 2022.