Tailwind CSS Tabs - Taco Svelte

Tabs are components that render and display subsections to users. They arrange the content into categories for easy access and a cleaner-looking app. Below we are presenting an example of the Tabs component that you can use in your project based on Taco.


Tabs with icons


Code

Below you can find the code for the Tabs component. 

<Tabs 
    tabsData="data" 
    icons
    selected="React" 
/>

Below you can find a sample code for the $data array. 

const data = [ 
    {
      label: "HTML",
      value: "html",
      icon: "fa-brands fa-html5",
      desc: `It really matters and then like it really doesn't matter.
        What matters is the people who are sparked by it. And the people 
        who are like offended by it, it doesn't matter.`,
    },
    {
      label: "React",
      value: "react",
      icon: "fa-brands fa-react",
      desc: `Because it's about motivating the doers. Because I'm here
        to follow my dreams and inspire other people to follow their dreams, too.`,
    },
    {
      label: "Vue",
      value: "vue",
      icon: "fa-brands fa-vuejs",
      desc: `We're not always in the position that we want to be at.
        We're constantly growing. We're constantly making mistakes. We're
        constantly trying to express ourselves and actualize our dreams.`,
    },
    {
      label: "Angular",
      value: "angular",
      icon: "fa-brands fa-angular",
      desc: `Because it's about motivating the doers. Because I'm here
        to follow my dreams and inspire other people to follow their dreams, too.`,
    },
    {
      label: "Svelte",
      value: "svelte",
      icon: "fa-brands fa-square-js",
      desc: `We're not always in the position that we want to be at.
        We're constantly growing. We're constantly making mistakes. We're
        constantly trying to express ourselves and actualize our dreams.`,
    },
];