Basic Examples
Basic Nav Bar example.

            
 1<x-fcui-pricing columns="3" bg="transparent">
 2 
 3    <x-slot:panels>
 4 
 5        <x-fcui-pricing-panel>
 6 
 7            <x-slot:productName>Product One</x-slot:productName>
 8 
 9            <x-slot:price>$20</x-slot:price>
10 
11            <x-slot:recurring>/month</x-slot:recurring>
12 
13            <x-slot:button>
14                <x-fcui-button href="#" class="w-full mb-6">Select</x-fcui-button>
15            </x-slot:button>
16 
17            <x-slot:features>
18                <li><span>Feature Item One</span></li>
19                <li><span>Feature Item Two</span></li>
20                <li><span>Feature Item Three</span></li>
21            </x-slot:features>
22        </x-fcui-pricing-panel>
23 
24        <x-fcui-pricing-panel>
25            <x-slot:specialText>Special!</x-slot:specialText>
26 
27            <x-slot:productName>Product Two</x-slot:productName>
28 
29            <x-slot:price>$30</x-slot:price>
30 
31            <x-slot:recurring>/month</x-slot:recurring>
32 
33            <x-slot:button>
34                <x-fcui-button href="#" class="w-full mb-6">Select</x-fcui-button>
35            </x-slot:button>
36 
37            <x-slot:features>
38                <li><span>Feature Item One</span></li>
39                <li><span>Feature Item Two</span></li>
40                <li><span>Feature Item Three</span></li>
41            </x-slot:features>
42        </x-fcui-pricing-panel>
43 
44        <x-fcui-pricing-panel>
45 
46            <x-slot:productName>Product Three</x-slot:productName>
47 
48            <x-slot:price>$40</x-slot:price>
49 
50            <x-slot:recurring>/month</x-slot:recurring>
51 
52            <x-slot:button>
53                <x-fcui-button href="#" class="w-full mb-6">Select</x-fcui-button>
54            </x-slot:button>
55 
56            <x-slot:features>
57                <li><span>Feature Item One</span></li>
58                <li><span>Feature Item Two</span></li>
59                <li><span>Feature Item Three</span></li>
60            </x-slot:features>
61        </x-fcui-pricing-panel>
62 
63    </x-slot:panels>
64 
65</x-fcui-pricing>        

Advanced Example
Pricing Table, no hover effect and a transparent background.

            
 1<x-fcui-pricing columns="3">
 2 
 3    <x-slot:panels>
 4 
 5        <x-fcui-pricing-panel :hoverEffect="false" type="success">
 6 
 7            <x-slot:productName>Product One</x-slot:productName>
 8 
 9            <x-slot:price>$20</x-slot:price>
10 
11            <x-slot:recurring>/month</x-slot:recurring>
12 
13            <x-slot:button>
14                <x-fcui-button href="#" class="w-full mb-6" type="success">Grab The Deal</x-fcui-button>
15            </x-slot:button>
16 
17            <x-slot:features>
18                <li><span>Feature Item One</span></li>
19                <li><span>Feature Item Two</span></li>
20                <li><span>Feature Item Three</span></li>
21            </x-slot:features>
22        </x-fcui-pricing-panel>
23 
24        <x-fcui-pricing-panel :hoverEffect="false" type="warning">
25            <x-slot:specialText>Special!</x-slot:specialText>
26 
27            <x-slot:productName>Product Two</x-slot:productName>
28 
29            <x-slot:price>$30</x-slot:price>
30 
31            <x-slot:recurring>/month</x-slot:recurring>
32 
33            <x-slot:button>
34                <x-fcui-button href="#" class="w-full mb-6" type="warning">Choose</x-fcui-button>
35            </x-slot:button>
36 
37            <x-slot:features>
38                <li><span>Feature Item One</span></li>
39                <li><span>Feature Item Two</span></li>
40                <li><span>Feature Item Three</span></li>
41            </x-slot:features>
42        </x-fcui-pricing-panel>
43 
44 
45    </x-slot:panels>
46 
47</x-fcui-pricing>