@extends('layouts.syndron.app')

@section('content')
<x-syndron.ui.tab>
    <x-slot name="tabs">
        <x-syndron.ui.tab.tab-item id="primary-pills-home" title="Home" :active="false" icon='<i class="bx bx-home font-18 me-1"></i>' />
        <x-syndron.ui.tab.tab-item id="primary-pills-profile" title="Profile" :active="false" icon='<i class="bx bx-user-pin font-18 me-1"></i>' />
        <x-syndron.ui.tab.tab-item id="primary-pills-contact" title="Contact" :active="true" icon='<i class="bx bx-microphone font-18 me-1"></i>' />
    </x-slot>
    <x-slot name="content">
        <x-syndron.ui.tab.tab-pane id="primary-pills-home" :active="false">
            <p>Raw denim you probably haven't heard of them jean shorts Austin...</p>
        </x-syndron.ui.tab.tab-pane>
        <x-syndron.ui.tab.tab-pane id="primary-pills-profile" :active="false">
            <p>Food truck fixie locavore, accusamus mcsweeney's marfa nulla...</p>
        </x-syndron.ui.tab.tab-pane>
        <x-syndron.ui.tab.tab-pane id="primary-pills-contact" :active="true">
            <p>Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out...</p>
        </x-syndron.ui.tab.tab-pane>
    </x-slot>
</x-syndron.ui.tab>
@endsection