The layout created with Tailwind did not meet our expectations in terms of the value obtained

Choose the shape you desire. Click here to view image The current shape looks like this... Click here to view image

bar : h-14 nav : h-full content : h-full footer : h-14

I am trying to create a layout similar to this using tailwind CSS, but it's not functioning as intended. The source code is provided below: 

 export default function MainComp() { return ( <div className='h-screen grid grid-rows-3 grid-cols-2 gap-1'> <div class="border-2 border-red-700 col-span-2">web bar</div> <div class="border-2 border-blue-700 row-span-2">nav bar</div> <div class="border-2 border-lime-800">contents</div> <div class="border-2 border-yellow-600 h-14">footer</div> </div> ) }
Looking for a solution...

cssreactjslayouttailwind-css

Answer №1

Try experimenting with different grid row track sizes by using a varying value for grid-template-rows:

function CustomComp() {
  return (
    <div className='h-screen grid grid-rows-[auto_1fr_theme(spacing.14)] grid-cols-2 gap-1'>
      <div class="border-2 border-red-700 col-span-2">top bar</div>
      <div class="border-2 border-blue-700 row-span-2">navigation bar</div>
      <div class="border-2 border-lime-800">content area</div>
      <div class="border-2 border-yellow-600">footer</div>
    </div>
  )
}

ReactDOM.createRoot(document.getElementById('app')).render(<CustomComp/>);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.2.0/umd/react.production.min.js" integrity="sha512-8Q6Y9XnTbOE+JNvjBQwJ2H8S+UV4uA6hiRykhdtIyDYZ2TprdNmWOUaKdGzOhyr4dCyk287OejbPvwl7lrfqrQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.2.0/umd/react-dom.production.min.js" integrity="sha512-MOCpqoRoisCTwJ8vQQiciZv0qcpROCidek3GTFS6KTk2+y7munJIlKCVkFCYY+p3ErYFXCjmFjnfTTRSC1OHWQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdn.tailwindcss.com/3.3.2"></script>

<div id="app"></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

Achieving the minimum width of a table column in Material-UI

Currently I am in the process of developing a React website with Material-UI. One query that has come up is whether it's feasible to adjust the column width of a table to perfectly fit the data, along with some extra padding on both ends? Outlined be ...

javascriptcssreactjsmaterial-ui

What could be the reason for the Checkbox's value not showing up after making changes?

In my React and Material UI project, I am facing an issue where I want to check all checkboxes in a list by simply checking one checkbox in a parent component. Despite passing down the correct value of the parent checkbox through props, the visual changes ...

javascriptreactjsmaterial-ui

What is the best way to ensure that the buttons remain in place once they have been clicked to reveal a drop-down menu?

Is there a way to keep 3 buttons inline and prevent them from moving when clicked to open a submenu? Changing their positions results in them stacking on top of each other. Any help or suggestions would be greatly appreciated, thank you! Here is the code ...

javascriptjqueryhtmlcss

ImageMapster for perfect alignment

I'm struggling with centering a div that contains an image using imagemapster. When I remove the JS code, the div centers perfectly fine, indicating that the issue lies with the image mapster implementation. It's a simple setup: <div class=" ...

javascriptjqueryhtmlcss

Utilize React-Charts.js-2 with ChartJS to create a customized bar chart

When creating bar graphs based on monthly data, everything works fine expect for the fact that the order of the months is not maintained and it appears mixed up in each rendering. The API provides the following data: { { "_id": 2022, &qu ...

javascriptreactjs

Tips for adjusting the color of a <a> tag upon clicking, which remains unchanged until the URL is modified

My goal is to maintain the color of a link when it is clicked. Currently, hovering over the navbar link changes it to greyish, but I want it to remain a different color after clicking on it. I am implementing this using the react-router-dom library for the ...

javascripthtmlcssreactjs

My React setup is causing some problems that I need to address

React is not my strong suit, but I need to test a React application. The issue arises when attempting to run the server using gulp nodemon, resulting in numerous errors. It seems that the application is built on an outdated version of React and some libra ...

javascriptreactjsnpmgulpreact-bootstrap

Deciding on pixel values, percentages, and sizing elements within CSS styles

For all you web development experts out there, I have a question regarding CSS styles. I often see precise pixel or percentage measurements used for properties like "padding" and "height." Experienced developers seem to effortlessly position their content ...

htmlcss

Various lists do not appear directly under each other

Hello everyone, I recently created a webpage displaying different lists of football players. My goal is to keep the lists stacked vertically without any floats that would make them appear side by side. The separate lists are essential for properly categori ...

htmlcsslistcss-floathtml-lists

Issues with the play() method in Javascript across Firefox, Safari, and IE 11 are causing functionality problems

I developed a basic video and audio player that smoothly fades out an introductory image and starts or stops playing an mp4 file upon click. Everything functions properly in Chrome, but unfortunately does not work in other major browsers. Despite checking ...

javascriptjqueryhtmlcss

Include the window.innerWidth value in the initial GET request

When dealing with a server-side rendered app that has responsive styling based on window.innerWidth, the challenge lies in how to pass the client's screen size in the initial GET request for index.html. This is crucial so that the server can prepare a ...

htmlreactjsnext.jsserver-side-rendering

Error: Attempting to access 'name' property of a null value causes a TypeError

Click here to view the image import {getProviders, signIn} from "next-auth/react"; function Login(providers) { return ( <div> <img className="w-52 mb-5" src="https://links.papareact.com/9xl" alt="& ...

node.jsreactjsnext.js

Having trouble adding a div in React due to the error "Objects are not allowed as a React child"?

While I am rendering the data and displaying it between divs, I keep getting this error: Objects are not valid as a React child (found: Wed Dec 09 1998 00:00:00 GMT+0530 (India Standard Time)). If you meant to render a collection of children, use an ...

javascriptreactjsreact-redux

Utilizing JavaScript variable modifiers for enhanced functionality

I'm trying to find a way to perform a case-insensitive search for a variable within a string. To achieve this, I'm using the /gi modifier to ignore case sensitivity. However, the challenge arises because identifiers only accept direct strings rat ...

javascriptreactjsstringsplit

Ensure that the "select" dropdown menu remains a constant size

One section of my Android app, powered by JQuery Mobile, displays a table with a combobox. The issue arises when selecting the option with a very long text, causing the combobox to expand and show half of the table off-screen. My goal is to set the combob ...

androidjquerycsshtmljquery-mobile

Struggling with making react-hook-form correctly validate an email address

I've been struggling for a long time to make this validation work correctly, but it seems impossible. I even added some text at the bottom to display an error message related to the email, but it always shows no error, regardless of the situation. Ed ...

javascriptreactjsformsnext.jsreact-hook-form

What is the best way to trigger actions from child components within React Redux?

My server contains the following code snippet: <ReactRedux.Provider store={store}><Layout defaultStore={JSON.stringify(store.getState())}/></ReactRedux.Provider> The <Layout> component includes more nested components. Further dow ...

javascriptreactjsreact-redux

Optimizing Bootstrap 4 Carousel for various screen sizes

I want to implement a full screen bootstrap 4 carousel with a transparent navbar at the top. The provided code seems to be functioning correctly. HTML: <!doctype html> <html lang="ro"> <!-- START head --> <head> &l ...

htmlcssbootstrap-4

Error connecting React with Yii2: The 'Access-Control-Allow-Origin' header is missing from the requested resource

I have attempted countless examples I discovered online. Unfortunately, I am still unable to get it right :( Displayed below is my REST controller: <? namespace app\controllers\admiral_api; use yii\rest\Controller; class MainPage ...

reactjsrestyii2

Bootstrap glyphicon not in sync with input field alignment

Having an issue with aligning the upper border of a search input field when using Angular with Bootstrap and adding a glyphicon next to it. div.input-group(ng-show='feeds.length > 0') span.input-group-addon.glyphicon.glyphicon-search in ...

cssangularjstwitter-bootstrap-3pug