Design a navigation layout with Tailwind CSS styling

Just starting out with CSS and VueJs and currently working on a tab panel design with functionality.

Utilizing the tailwind CSS plugin for this project.

Here is my desired design:

https://i.sstatic.net/58Dq.png

Current progress: CodePen

Struggling to replicate the desired design due to:

  • Issues with space between elements - Attempted using flex space-x-10 or grid grid-gap-20 without success
  • Difficulty achieving gray background - Tried applying bg-gray-600 within <nav> tag but no effect seen
  • Unable to implement change of selected tab on click

Answer №1

To modify your navigation using CSS, you can try the following code snippet:

nav {
    width: auto; /*This will create a fluid width for your navigation*/
    display: flex;
    gap: 20px; /*Adjust this value to control the spacing between items in the navigation menu*/
    background: #f0f0f0; /*Choose your desired background color*/
    border-radius: 10px; /*Set the border radius as per your design needs*/
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Within the HTMLDivElement.drop, the parent element now encapsulates the new child element

I've encountered a DOM exception that has me stuck. My issue involves div elements and a button - when the user clicks the button, a random div is selected and another div with a background-color class is appended to it. Essentially, clicking the butt ...

Apexcharts - Blank space in area chart

I am currently facing an issue while trying to create an area chart using apexcharts on nuxt (vue2). The problem is that the area is not being filled as expected, and the options I have set in chartOptions for fill are affecting the line itself instead of ...

Styling Challenge: Positioning a Button to the Left of Another Button in a Corner

--------------------------------------------- | custom text | | custom test | | custom content | | unique words | | interesting phrases ...

mobile navigation menu remains open after selecting a link

When the Fixed-to-top navbar is used in mobile view, such as clicking a Navbar icon, it does not collapse afterward while the page is loading. How can I prevent the page from loading in the navbar section? Here is the link to my website: CLICK HERE Addi ...

Script tag causing alignment issues for centering div on page

Currently, I am in the process of creating a web application using Bootstrap 4.3.1 and integrating the Spotify API. My main goal right now is to center a div element on the screen both vertically and horizontally, which will display the authenticated user& ...

Twitter-bootstrap: navigation bar does not appear on mobile devices

Currently engrossed in an angular2 project utilizing angular-cli... I'm facing some challenges while trying to craft a responsive navbar with bootstrap 3. The issue arises when testing the navbar on Chrome dev tools with the iPhone 5 screen size, wher ...

Pass the value of a Vue method called methodA to another Vue method named methodB

I am having trouble retrieving the value of classlists for my uScore, as it is resulting in an error. How can I successfully pass the value of the displayClasslists method to the uScore function? methods: { displayClasslists() { this.$Progress. ...

The server cannot be started by Npm, the complete log is available. However, this project has the ability to operate on a different computer

I am facing an issue with a Vue NodeJs project that I copied from another computer. While it runs smoothly on the original computer, I am encountering difficulties running it on this one. Although I have installed Node.js here, the project fails to run as ...

What prevents a click event from reaching the <body> element?

This slider runs in an animation loop until one of the dots at the top is clicked. Once clicked, the animated elements (the <span> dots and the <figure>s) receive a style that halts the animation. <section id="slider"> <span class ...

Creating customized placeholders using CSS padding in HTML5

I came across this helpful post and attempted various methods to adjust the padding for my placeholder text, but unfortunately, it seems unwilling to cooperate. Below is the CSS code. (EDIT: This CSS was generated from SASS) #search { margin-top: 1px; ...

Scrollable Tailwind components

I am working on creating a page layout similar to this design: here is what I want to achieve The goal is to have a simple homepage with a navbar and split screen. The challenge is to prevent the entire page from scrolling normally and enable independent ...

How to take advantage of the onOk method in Vue Ant Design's Modal component

I am currently attempting to utilize Vue Ant's confirmation modal dialog, but I am encountering difficulties in accessing methods and data within the onOk prop. Whenever I try to call my methods or use this.$emit, I receive an error message stating "T ...

Alignment of input fields and labels in Bootstrap by utilizing the Grid System

Currently, I am in the process of developing a form that includes multiple input fields. To organize these fields, I have utilized the Bootstrap 4 Grid system. However, I am encountering challenges when it comes to aligning certain input fields. Snippet ...

Resolve issues with vue js checkbox filtering

As I embark on my Vue journey, I came across some insightful queries like this one regarding filtering with the help of computed(). While I believe I'm moving in the right direction to tackle my issue, the solution has been elusive so far. On my web ...

Leveraging webpack for importing image filenames from a static folder path

In my static directory, I have set up an images folder named "/pictures". After grabbing the template code from webpack's website, I encountered an error during compilation: Critical dependency: require function is used in a way in which dependencie ...

The vuex 3 state variable is currently undefined

Currently, I am in the process of setting up an application that utilizes Vue 2.5.2 and Vuex 3.0.1. Despite my efforts, there is one persistent warning that continues to appear: [Vue warn]: Error in render: "TypeError: _vm.product is undefined" The var ...

put two elements next to each other in a single row

This specific section contains an image positioned at the top, followed by two other components (within <ItemsContainer/>) at the bottom which display as separate rows. I am trying to place these two items (a grid and a chart) side by side within the ...

Having trouble centering elements correctly with Bootstrap 5

Just dipping my toes into the world of bootstrap and experimenting with some code. Encountered an issue when trying to center elements properly within columns: <div class="container"> <div class="row"> <div class= ...

What is the best way to grasp the concepts behind MaterialUI styled components?

Can someone please help me understand how to apply styles to a component using MaterialUI? I've been reading the documentation but it's all very confusing to me. What exactly are classes and how do I connect the const style to the BeerList compon ...

Creating interactive functionality for textareas and input fields in Vue: A beginner's guide

I need assistance with creating a function where changing the input field will also automatically update the textarea's value. I have successfully implemented Vue js for updating the input field based on the textarea, but I am struggling to reverse th ...