1import React from "react";
2
3const Tabs = ({ color }) => {
4  const [openTab, setOpenTab] = React.useState(1);
5  return (
6    <>
7      <div className="flex flex-wrap">
8        <div className="w-full">
9          <ul
10            className="flex mb-0 list-none flex-wrap pt-3 pb-4 flex-row"
11            role="tablist"
12          >
13            <li className="-mb-px mr-2 last:mr-0 flex-auto text-center">
14              <a
15                className={
16                  "text-xs font-bold uppercase px-5 py-3 shadow-lg rounded block leading-normal " +
17                  (openTab === 1
18                    ? "text-white bg-" + color + "-600"
19                    : "text-" + color + "-600 bg-white")
20                }
21                onClick={e => {
22                  e.preventDefault();
23                  setOpenTab(1);
24                }}
25                data-toggle="tab"
26                href="#link1"
27                role="tablist"
28              >
29                Profile
30              </a>
31            </li>
32            <li className="-mb-px mr-2 last:mr-0 flex-auto text-center">
33              <a
34                className={
35                  "text-xs font-bold uppercase px-5 py-3 shadow-lg rounded block leading-normal " +
36                  (openTab === 2
37                    ? "text-white bg-" + color + "-600"
38                    : "text-" + color + "-600 bg-white")
39                }
40                onClick={e => {
41                  e.preventDefault();
42                  setOpenTab(2);
43                }}
44                data-toggle="tab"
45                href="#link2"
46                role="tablist"
47              >
48                 Settings
49              </a>
50            </li>
51            <li className="-mb-px mr-2 last:mr-0 flex-auto text-center">
52              <a
53                className={
54                  "text-xs font-bold uppercase px-5 py-3 shadow-lg rounded block leading-normal " +
55                  (openTab === 3
56                    ? "text-white bg-" + color + "-600"
57                    : "text-" + color + "-600 bg-white")
58                }
59                onClick={e => {
60                  e.preventDefault();
61                  setOpenTab(3);
62                }}
63                data-toggle="tab"
64                href="#link3"
65                role="tablist"
66              >
67                 Options
68              </a>
69            </li>
70          </ul>
71          <div className="relative flex flex-col min-w-0 break-words bg-white w-full mb-6 shadow-lg rounded">
72            <div className="px-4 py-5 flex-auto">
73              <div className="tab-content tab-space">
74                <div className={openTab === 1 ? "block" : "hidden"} id="link1">
75                  <p>
76                    Collaboratively administrate empowered markets via
77                    plug-and-play networks. Dynamically procrastinate B2C users
78                    after installed base benefits.
79                    <br />
80                    <br /> Dramatically visualize customer directed convergence
81                    without revolutionary ROI.
82                  </p>
83                </div>
84                <div className={openTab === 2 ? "block" : "hidden"} id="link2">
85                  <p>
86                    Completely synergize resource taxing relationships via
87                    premier niche markets. Professionally cultivate one-to-one
88                    customer service with robust ideas.
89                    <br />
90                    <br />
91                    Dynamically innovate resource-leveling customer service for
92                    state of the art customer service.
93                  </p>
94                </div>
95                <div className={openTab === 3 ? "block" : "hidden"} id="link3">
96                  <p>
97                    Efficiently unleash cross-media information without
98                    cross-media value. Quickly maximize timely deliverables for
99                    real-time schemas.
100                    <br />
101                    <br /> Dramatically maintain clicks-and-mortar solutions
102                    without functional solutions.
103                  </p>
104                </div>
105              </div>
106            </div>
107          </div>
108        </div>
109      </div>
110    </>
111  );
112};
113
114export default function TabsRender() {
115  return (
116    <>
117      return <Tabs color="pink" />;
118    </>
119  );
120}
121
122