Tailwind CSS Tabs - Taco Tall Stack

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.


Code

Below you can find the code for the Tabs component.


<x-tabs :tabs="$tabs"></x-tabs>

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


public $tabs = [
    [
        'category' => 'The time',
        'content' => 'The time is now for it to be okay to be great. People in this world shun people for being great. For being a bright color. For standing out. But the time is now to be okay to be the greatest you. Would you believe in what you believe in, if you were the only one who believed it?',
        'iconType' => 'material',
        'icon' => 'dashboard',
        'isActive' => true,
    ],
    [
        'category' => 'We live',
        'content' => 'As we live, our hearts turn colder. Cause pain is what we go through as we become older. We get insulted by others, lose trust for those others. We get back stabbed by friends. It becomes harder for us to give others a hand. We get our heart broken by people we love, even that we give them all we have. Then we lose family over time. What else could rust the heart more over time? Blackgold.',
        'iconType' => 'fontawesome',
        'icon' => 'fa-brands fa-github',
        'isActive' => false,
    ],
    [
        'category' => 'Anything',
        'content' => "I always felt like I could do anything. That’s the main thing people are controlled by! Thoughts- their perception of themselves! They're slowed down by their perception of themselves. If you're taught you can’t do anything, you won’t do anything. I was taught I could do everything.",
        'iconType' => 'material',
        'icon' => 'view_carousel',
        'isActive' => false,
    ],
];