How do I integrate a button into my grey navigation bar using tailwindcss in REACT?

Is it possible to integrate the - button into the gray bar? I am encountering an issue where my blue button extends beyond the borders of the gray bar in the image provided.

export default function App() {
...
return (
<div className="text-md font-bold">
                            Invitee {i + 1}
                            <span className="float-right ">
                                {!!i && (
                                    <Button className="rounded-md float-right mt-4" primary onClick={() => removeInvitee(Id)}>
                                        -
                                    </Button>
                                )}
                            </span>
...
)

Answer №1

If you're looking to customize your design, consider using the flexbox properties. I've provided a similar example below for reference. Feel free to incorporate your own functions and remember to swap out class with className.

<script src="https://cdn.tailwindcss.com"></script>
<div class="container mx-auto py-4">
<div class="bg-gray-200 text-md flex items-center justify-between rounded-r-md">
  <div class=" font-bold  text-gray-500 ml-4" >Invitee 2</div>
  <div class="">
    <Button primary className="rounded-md bg-black text-white py-2 px-4" onclick="removeInvitee(pId)">
        -
    </Button>
  </div>
</div>
</div>

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

Preventing CORS issues with Next.js on Vercel

After struggling to find a solution, I finally figured out the answer to my own question. I hope this can be helpful for other developers facing a similar issue. Let's begin with some essential information: The client app is built with NextJs. The s ...

resizing problem with images that adapt to different screen sizes

I've been working on creating a responsive website, but I'm having trouble with the resizing of the two background images I added to the header. When I view the site on a mobile device, the header appears squashed. I think this might be because I ...

Calculate the total sum of selected values in a multiple select dropdown using jQuery

Is there a way to calculate the sum of selected items in a multiple selection dropdown menu? For instance, if I select "X12SO" and "X13SO", their values should add up to 30. let total = 0; $("select[name='myselect[]'] option").each(function(){ ...

What causes the disparity in the rendering of iframe content height when using "src" compared to "srcdoc"?

After comparing the behaviors of iframes with src and srcdoc, I stumbled upon a puzzling difference: a div set to 100% height renders as the full height of the iframe when using src=[data uri], but not with srcdoc. The issue can be easily replicated with ...

The functionality of the Bootstrap4 accordion is not functioning according to my expectations

My goal is to create a unique e-commerce checkout page design. Each panel would be opened sequentially, with the next panel unfreezing when the action button of the current panel is clicked. However, I seem to be making a mistake as it is not working as in ...

Having trouble with Material-UI Textfield losing focus after re-rendering? Need a solution?

I am currently utilizing Material-ui Textfield to display a repeatable array object: const [sections, setSections] = useState([ { Title: "Introduction", Text: "" }, { Title: "Relationship", ...

Determining the moment a user exits a page on Next JS

Is there a way to track when the user exits a Next JS page? I have identified 3 possible ways in which a user might leave a page: Clicking on a link Performing an action that triggers router.back, router.push, etc... Closing the tab (i.e. when beforeunloa ...

The specified subpath './lib/tokenize' does not match any defined "exports"

As a newcomer to React, I've been facing some challenges while trying to get started. Despite searching on Google and other platforms, I couldn't find a solution to my problem. I was attempting to run code from a YouTube channel called Lama Dev b ...

Tips for correcting the sentence that extends beyond the boundaries of the Material UI box

Utilizing Material UI for my project... I am trying to contain the text within a box but facing issues with responsiveness as the text is overflowing outside of the box. Note: I have attempted various solutions from Stack Overflow such as word-wrap, max- ...

Show various attachment file names using jQuery

Utilizing jQuery, I've implemented a script to extract the filename from a hidden field and then append it to the filename class in my HTML. filenameCache = $('#example-marketing-material-file-cache').val().replace(/^.*[\\\/ ...

Accessing Elements by Class Name

I've been searching for information on the capabilities of getElementsByClassName for hours. While some sources mention it returns an HTML collection of items, length, and named items, w3schools provides an example where innerHTML is utilized: var x ...

Tips for importing a different js file from an npm package without needing to include the entire node_modules path

When using the ES2016 import syntax to load the select2 library from an npm module via Webpack, everything works smoothly and the select2.js file is loaded from the node_modules directory. The node_modules directory also contains a full version of the lib ...

JQuery's addClass function is not functioning properly

Check out the code snippet below: function toggleAccessRequests() { var buttonValue = $("#showAccessRequests").val(); if (buttonValue == "Show") { $(".hideAccessRequest").removeClass("hideAccessRequest"); $("#showAccessRequests").v ...

What is the best way to apply a box-shadow to a specific side of an element?

How can I apply a box shadow to only the right side of a block element? Currently, I achieve this by wrapping the inner element with a box-shadow in an outer element with padding-right and overflow:hidden to hide the other three sides of the shadow. Is the ...

Node v18.14.2 throwing errors on React build in Azure DevOps despite configuring NODE_OPTIONS= --openssl-legacy-provider

My local React build is functional with Node v18.14.2 and by setting NODE_OPTIONS=--openssl-legacy-provider, but the same setup failed in Azure DevOps. Has anyone encountered this issue before? The production build command from my package.json: "buil ...

Centered Fixed Upward Scrolling Div

Currently facing a challenge with my project involving a chat interface created in Angular. I am struggling with the CSS styling as the chat starts at the top and scrolls downward off-screen as the conversation progresses. Although I can scroll along with ...

Trigger offcanvas modal and backdrop simultaneously using Bootstrap v5.0

Working with Bootstrap v5.0 offcanvas has been smooth sailing until I hit a roadblock. Clicking on the offcanvas button seems to be triggering both the offcanvas-backdrop and modal-backdrop divs simultaneously. <div class="modal-backdrop fade show ...

Comparing Yii's CHtml::link() function with the use of regular <a href=''></a> HTML tags

When using elements like yii CHtml::link, what are the recommended practices? I'm working on a button that needs to include an icon, text, respond to hover events, and be wide. Are there any benefits to using CHtml instead of a regular tag that can e ...

Having trouble retrieving the most recent state with React hooks? Dealing with a Stale Closure Issue?

I am developing a React application where the count variable increases every second. Clicking on the button should trigger an alert displaying the latest count after 2 seconds. Expectation: By clicking the button at 10 seconds, the alert should show 12 (t ...

Learn how to easily set a background image using Tailwind CSS in a Next.js application

Trying to insert a background image into a section, but encountering an unexpected error. Here is the code I am using: The error message says: What steps should I take to resolve this issue? Even after removing the code, the error persists. ...