Okay, let's take a look at using tabs. Tabs are a common component you see across several websites. So let's go ahead and see if we can style one similar to what we see in the example here. So let's add our new heading for tabs, similar to what we have here. So let me just grab this. Let's put it after this div, and space that in, and let's close that out, and let's say tabs here. Okay, so if you take a look at the example, we have these five subcomponents. So we have a tab group, which is the root div. We have the tab list, which is a list of tabs. We have tab panels, which is where the content goes. So this tab panel corresponds to this tab's content. So let's grab this example. Actually, I'm going to grab the other one here, which exposes the selected variable as a scope.

here. So back to our tab group, or our tab list, actually. So this would be, if we go back up to the example, this whole thing right here. And there's a gradient here, but I'm just going to keep it solid. So let's add a class, bg-blue-500, rounded, and I'm going to say flex justify-between, so the tabs are evenly spaced, similar to how it is here. And let's give it some padding, px-2, py-2 is what I have. Okay, let's see if that does anything. Okay. Let's make this margin bigger, and say my-8. Actually, it's a py-8. Okay. Let's style the individual buttons for the tabs. So I'm going to add a normal class here, and this will be rounded-md, text-white, and some padding as well. And for the conditional class, let me change this to object syntax, and let's just delete this. And let's add bg-white, and text

white, and some padding as well. And for the conditional class, let me change this to object syntax, and let's just delete this. And let's add bg-white, and text-gray-900, if it's selected. Okay. Does this work? There we go. Cool. So pretty simple to style. Let's go ahead and duplicate this for tab 2 and tab 3. 2 and 3. Let's delete these two, or you can add more tabs if you like. Okay. So that should work now. Actually, let's change tab 2 and tab 3. There we go. And in terms of accessibility, or keyboard accessibility, you can press the arrow keys left and right, and it will cycle between the open tabs, and the content will change accordingly. Let's go ahead and style the content container. Let's go ahead and add a class on the tabPanels component. Let's make a white, rounded-md, px-4, py-2.

accordingly. Let's go ahead and style the content container. Let's go ahead and add a class on the tabPanels component. Let's make a white, rounded-md, px-4, py-2 is what I have, and let's give it a margin as well. And the height of the content will change based on how much content you have in each tab, or you can set an explicit height if you like. For example, if the first tab had lots of content, say Lorem100, the height will change accordingly. Okay, save that, and the height should change for tab 1. There it is. So as you can see, tabs are very easy to use and customize. I believe there are a few other options here. I think there's an option for vertical tabs, if you style it that way. Just set this vertical prop on the tabGroup. You can specify a default tab when the page loads. Just