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