I'm new in CSS and VueJs so I'm creating a tab panel design functionality
Currently, I'm using the tailwind CSS plugin
My desire design is this:
Current: CodePen
I can't replicate the desire because I'm missing:
- Space between elements: I try using
flex space-x-10
orgrid grid-gap-20
but it does not work - Gray at the background: I try it using
bg-gray-600
inside<nav>
but cause not effect - Change selected tab on click
CodePudding user response:
What you can do, is change your nav directly in css, with:
nav {
width: max-content; /*This gonna set a fixed width, it is necessary*/
display: flex;
gap: 20px; /*increase as much you want to stay like your template, it is the space between the elements in your flex*/
background: #ccc; /*Just put your color directly*/
border-radius: 20px; /*Just put your radius*/;
}