Untitled

import React from "react";
import Tab from "@material-tailwind/react/Tab";
import TabList from "@material-tailwind/react/TabList";
import TabItem from "@material-tailwind/react/TabItem";
import TabContent from "@material-tailwind/react/TabContent";
import TabPane from "@material-tailwind/react/TabPane";
import { useState } from "react";

export default function Tabs() {
    const [openTab, setOpenTab] = useState(1);

    return (
            <Tab>
                <TabList color="white-.glassmorphism">
                    <TabItem
                        onClick={(e) => {
                            e.preventDefault();
                            setOpenTab(1);
                        }}
                        ripple="light"
                        active={openTab === 1 ? true : false}
                        href="tabItem"
                    >
                        Withdraw
                    </TabItem>
                    <TabItem
                        onClick={(e) => {
                            e.preventDefault();
                            setOpenTab(2);
                        }}
                        ripple="light"
                        active={openTab === 2 ? true : false}
                        href="tabItem"
                    >
                        Add Allowance
                    </TabItem>
                    <TabItem
                        onClick={(e) => {
                            e.preventDefault();
                            setOpenTab(3);
                        }}
                        ripple="light"
                        active={openTab === 3 ? true : false}
                        href="tabItem"
                    >
                        Reduce Allowance
                    </TabItem>
                </TabList>
                    <TabContent>
                        <TabPane active={openTab === 1 ? true : false}>
                            <p>
                                I think that’s a responsibility that I have, to push
                                possibilities, to show people, this is the level that things
                                could be at. So when you get something that has the name Kanye
                                West on it, it’s supposed to be pushing the furthest
                                possibilities. I will be the leader of a company that ends up
                                being worth billions of dollars, because I got the answers. I
                                understand culture. I am the nucleus.
                            </p>
                        </TabPane>
                        <TabPane active={openTab === 2 ? true : false}>
                            <p>
                                I will be the leader of a company that ends up being worth
                                billions of dollars, because I got the answers. I understand
                                culture. I am the nucleus. I think that’s a responsibility that
                                I have, to push possibilities, to show people, this is the level
                                that things could be at. I think that’s a responsibility that I
                                have, to push possibilities, to show people, this is the level
                                that things could be at.
                            </p>
                        </TabPane>
                        <TabPane active={openTab === 3 ? true : false}>
                            <p>
                                I think that’s a responsibility that I have, to push
                                possibilities, to show people, this is the level that things
                                could be at. So when you get something that has the name Kanye
                                West on it, it’s supposed to be pushing the furthest
                                possibilities. I will be the leader of a company that ends up
                                being worth billions of dollars, because I got the answers. I
                                understand culture. I am the nucleus.
                            </p>
                        </TabPane>
                    </TabContent>
  
            </Tab>
    );
}