Home > Enterprise >  Create nav design using tailwind css
Create nav design using tailwind css

Time:09-16

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:

desireResult

Current: CodePen

I can't replicate the desire because I'm missing:

  • Space between elements: I try using flex space-x-10 or grid 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*/;
}
  • Related