Having trouble making elements in Tailwind CSS take up the entire page? Seems like they're getting stuck in smaller containers instead

I've been working on creating a layout for my webpage that is similar to the one found here:

However, despite using Tailwind CSS, I'm having trouble with the flex styling and getting it to display correctly.

    import { ChevronRightIcon, HomeIcon } from '@heroicons/react/solid'

const pages = [
  { name: 'Privacy', href: '#', current: false },
  { name: 'Customizations', href: '#', current: true },
  { name: 'Details', href: '#', current: true },


]

function BreadCrumbs() {
  return (
    <nav className="flex" aria-label="Breadcrumb">
      <ol className="flex items-center space-x-4">
        <li>
          <div>
            <a href="#" className="text-gray-400 hover:text-gray-500">
              <HomeIcon className="flex-shrink-0 h-5 w-5" aria-hidden="true" />
              <span className="sr-only">Home</span>
            </a>
          </div>
        </li>
        {pages.map((page) => (
          <li key={page.name}>
            <div className="flex items-center">
              <ChevronRightIcon className="flex-shrink-0 h-5 w-5 text-gray-400" aria-hidden="true" />
              <a
                href={page.href}
                className="ml-4 text-sm font-medium text-gray-500 hover:text-gray-700"
                aria-current={page.current ? 'page' : undefined}
              >
                {page.name}
              </a>
            </div>
          </li>
        ))}
      </ol>
    </nav>
  )
}

  



export default function Example() {
    return (
      <div className="min-h-screen bg-white flex">
          <div className="hidden lg:block relative w-6/12 flex-auto">
          <img
            className="absolute inset-0 h-full   object-cover"
            src="https://images.unsplash.com/photo-1505904267569-f02eaeb45a4c?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1908&q=80"
            alt=""
          />
        </div>
        <div className="flex-1 flex flex-col justify-center py-12 px-4 sm:px-6 lg:flex-none lg:px-20 xl:px-24">
        <BreadCrumbs/>

          <div className="mx-auto w-full max-w-lg lg:w-96">
            <div>
           
              <h2 className="mt-6 text-3xl font-extrabold text-gray-900">Welcome to Moodmap</h2>
              <p className="mt-2 text-sm text-gray-600">
              Let's get you started!

              
              </p>
            </div>
  
            <div className="mt-8">
             
  
              <div className="mt-6">
                <form action="#" method="POST" className="space-y-6">
                  <div>
                    <label htmlFor="email" className="block text-sm font-medium text-gray-700">
                      Email address
                    </label>
                    <div className="mt-1">
                      <input
                        id="email"
                        name="email"
                        type="email"
                        autoComplete="email"
                        required
                        className="appearance-none block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
                      />
                    </div>
                  </div>
  
                  <div className="space-y-1">
                    <label htmlFor="password" className="block text-sm font-medium text-gray-700">
                      Password
                    </label>
                    <div className="mt-1">
                      <input
                        id="password"
                        name="password"
                        type="password"
                        autoComplete="current-password"
                        required
                        className="appearance-none block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
                      />
                    </div>
                  </div>
  
               
  
                  <div>
                    <button
                      type="submit"
                      className="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
                    >
                      Next
                    </button>
                  </div>
                </form>
              </div>
            </div>
          </div>
        </div>
        
      </div>
    )
  }

The design I aim to achieve looks somewhat like this one: https://i.stack.imgur.com/bwFDi.png

Could anyone provide some advice on how to adjust the flex properties in order to properly fit the forms?

Thank you!

Answer №1

It seems like you're looking to make the Login form and breadcrumbs more prominent.

  • To achieve this, reduce the image size from half of the screen to 1/3 (Delete w-6/12 flex-auto).

  • Remove lg:flex-none from the second division.

  • Delete the width restrictions on the login box (Remove max-w-lg lg:w-96 )

By following these steps, the form should now take up the remaining 2/3 space.

import { ArrowForwardIcon, HouseIcon } from '@heroicons/react/solid'

const pages = [
  { name: 'Privacy Policy', href: '#', current: false },
  { name: 'Personalization', href: '#', current: true },
  { name: 'Additional Details', href: '#', current: true },

]

function Breadcrumbs() {
  return (
    <nav className="flex" aria-label="Breadcrumbs">
      <ol className="flex items-center space-x-4">
        <li>
          <div>
            <a href="#" className="text-gray-400 hover:text-gray-500">
              <HouseIcon className="flex-shrink-0 w-5 h-5" aria-hidden="true" />
              <span className="sr-only">Home</span>
            </a>
          </div>
        </li>
        {pages.map((page) => (
          <li key={page.name}>
            <div className="flex items-center">
              <ArrowForwardIcon className="flex-shrink-0 w-5 h-5 text-gray-400" aria-hidden="true" />
              <a
                href={page.href}
                className="ml-4 text-sm font-medium text-gray-500 hover:text-gray-700"
                aria-current={page.current ? 'page' : undefined}
              >
                {page.name}
              </a>
            </div>
          </li>
        ))}
      </ol>
    </nav>
  )
}

export default function Example() {
    return (
      <div className="flex min-h-screen bg-white">
          <div className="relative w-4/12 lg:block">
          <img
            className="absolute inset-0 object-cover h-full"
            src="https://images.unsplash.com/photo-1505904267569-f02eaeb45a4c?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1908&q=80"
            alt=""
          />
        </div>
        <div className="flex flex-col justify-center flex-1 px-4 py-12 sm:px-6 lg:px-20 xl:px-24">
        <Breadcrumbs/>

          <div className="w-full ">
            <div>
           
              <h2 className="mt-6 text-3xl font-extrabold text-gray-900">Welcome to Moodmap</h2>
              <p className="mt-2 text-sm text-gray-600">
              Let's get you started!

              
              </p>
            </div>
  
            <div className="mt-8">
  
              <div className="mt-6">
                <form action="#" method="POST" className="space-y-6">
                  <div>
                    <label htmlFor="email" className="block text-sm font-medium text-gray-700">
                      Email address
                    </label>
                    <div className="mt-1">
                      <input
                        id="email"
                        name="email"
                        type="email"
                        autoComplete="email"
                        required
                        className="block w-full px-3 py-2 placeholder-gray-400 border border-gray-300 rounded-md shadow-sm appearance-none focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
                      />
                    </div>
                  </div>
  
                  <div className="space-y-1">
                    <label htmlFor="password" className="block text-sm font-medium text-gray-700">
                      Password
                    </label>
                    <div className="mt-1">
                      <input
                        id="password"
                        name="password"
                        type="password"
                        autoComplete="current-password"
                        required
                        className="block w-full px-3 py-2 placeholder-gray-400 border border-gray-300 rounded-md shadow-sm appearance-none focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
                      />
                    </div>
                  </div>
  
                  <div>
                    <button
                      type="submit"
                      className="flex justify-center w-full px-4 py-2 text-sm font-medium text-white bg-indigo-600 border border-transparent rounded-md shadow-sm hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
                    >
                      Next
                    </button>
                  </div>
                </form>
              </div>
            </div>
          </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

Unable to save the session identifier from the response headers while utilizing sessions in react/frappe framework

I am attempting to retrieve the session id (sid) from the response headers in a unique scenario. My client application is situated on a local environment, while my API is hosted on an ERP Next server. Upon sending a login request from the React app, I am ...

Changing the background color of a page to match the background color of a button in React, which can be updated at any time

I have a special button called ArbitraryBtn that, when clicked, changes the page's background color to random colors: import React from 'react'; export const changeToArbitraryColor = () => (document.body.style.backgroundColor = ...

Using HTML5 to Define the Size of a File Upload Button

The validation error from W3C states: "Attribute size is not permitted for the input element at this location." <input type="file" name="foo" size="40" /> How should the width of a file input be specified in HTML5? ...

Setting up Scss and purgeCss configuration in Next.js custom postCSS configuration: A step-by-step guide

My current project is using Scss in combination with Bootstrap for design. I have implemented purgeCss to remove unused Css, and customized my postcss.config.js file as follows: module.exports = { plugins: [ "postcss-flexbugs-fixes", [ " ...

``I encountered an issue with React and Vite when trying to execute the 'npm run dev

npm run dev [email protected] dev vite unable to find configuration file at C:\Users\vyask\Desktop\8th sem internship\mern-blog\client\vite.config.js error encountered while attempting to start dev server: Error ...

Utilizing grease/tampermonkey (or any other browser extension) to filter out specific characters within webpage elements

Forgive me if my language is not accurate, as I am still learning about programming. The forum that I visit has cluttered the page with unnecessary and glitchy images and text for a promotion. This has made the forum difficult to navigate. I was successful ...

"Rearrange elements on a webpage using CSS and HTML to position one

Can we utilize CSS/HTML to visually move a full width element that is positioned below another one so that it appears above without altering the markup order? <div id="first">first</div> <div id="second">second</div> #first {…} ...

What is the best way to make two buttons align next to each other in a stylish and elegant manner

Currently, I am diving into the world of glamorous, a React component styling module. My challenge lies in styling two buttons: Add and Clear. The goal is to have these buttons on the same row with the Clear button positioned on the left and the Add button ...

Material UI TreeView: Organize and present node data with multiple columns in a tree structure

const treeItems = [ { id: 1, name: 'English', country: 'US', children: [ { id: 4, name: 'Spring', country: 'Uk', ...

Animation doesn't apply to child components, but is successful when applied to the parent component

I am working on animating the width of a child component's div. Here is my simple code: export const OuterComponent = () => { const sidebarCtx = useContext(SidebarContext); const style = "w-[100px] h-[60px] transit ...

Changing the color of a pseudo element in Material-UI

I'm having trouble changing the border color of the ::after pseudo element on a standard text field from MUI. I've been unable to figure it out. <TextField id="standard-basic" label="Email" variant="standard"/> ...

What are the best strategies for utilizing AnimatePresence for smooth and seamless transitions?

In my upcoming app, I am working on creating a seamless entry/exit animation using Framer Motion's AnimatePresence component. While experimenting with the delay feature, I encountered an issue where only one component would animate properly, while the ...

Caution: ToastAndroid is incompatible with this platform. A problem has occurred while using react native

Having trouble with this error in react native IOS: - node_modules/expo/build/logs/LogSerialization.js:166:14 in _captureConsoleStackTrace - node_modules/expo/build/logs/LogSerialization.js:41:24 in serializeLogDataAsync - ... 9 more stack frames from fra ...

Encountered an issue when attempting to post a comment with react and node

Looking for assistance in creating a website where users can comment on a post. I have encountered an issue when trying to display comments after clicking a button - I am receiving an error message: TypeError: _this3 is undefined. As a newcomer here, any h ...

Adjust properties based on screen size with server-side rendering compatibility

I'm currently using the alpha branch of material-ui@v5. At the moment, I have developed a custom Timeline component that functions like this: const CustomTimeline = () => { const mdDown = useMediaQuery(theme => theme.breakpoints.down("md")); ...

Issue "unableToRollbackOptional" encountered when using create-react-app

Currently delving into the world of React and encountering a few obstacles. Below are screenshots of the two errors I encountered while running: npm i -g <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="2a49584f4b5e4f07584f4b495 ...

Instructions for accessing and printing text from a nested ul tag with Selenium in Java

Hello everyone, I am currently learning about Selenium Automation and have created a website as shown below. Here is the HTML code: <!DOCTYPE html> <html> <head><title>Shop</title></head> <body> <ul> < ...

The state of the component remains unchanged even after triggering an action dispatch

I'm facing an issue with my component where I use the useEffect hook to fetch data from local storage on startup. After successfully dispatching an action and updating the state in the reducer, I am not seeing any change reflected in the component its ...

Develop a voice recording feature using ReactJS

In my quest to enhance a chat application with voice recording functionality, I came across the react-mic package. It worked smoothly and provided me with the data needed at the end of the recording session. (link: https://i.stack.imgur.com/nhNCq.png) Now ...

How to make views in React Native adjust their size dynamically in a scrollview with paging functionality

Has anyone successfully implemented a ScrollView in React Native with paging enabled to swipe through a series of images? I am having trouble making the image views fill each page of the scroll view without hardcoding width and height values for the image ...