Layout with full content height

April 8, 2024

can someone help me build a layout with full height, including a navbar at the top, a left sidebar, and a content area, using React JSX and Tailwind CSS? I’ve developed this, but I’m struggling with the code. If anyone can help me achieve it, please.

import React, { useState } from 'react';
import './App.css';
import Sidebar from "./components/sidebar";
import Navbar from "./components/navbar";

import SmallCard from "./components/smallcard";
import  { smallcardData } from "./data/smallcardData";

function App() {
  return (
    
    <div className="flex  flex-col h-screen   ">
     
     <div className="  ">
          <Navbar/>
        </div>
     
      <div className="flex flex-grow    ">
       
      <div className=" w-32 h-full flex  items-center justify-center hidden md:block bg-[#f59e0b] ">
        <Sidebar />
      </div> 
        {/* Content */}
        <div className="flex-grow    ">
        
        </div>
      </div>
    </div>
  );
}

export default App;

If anyone can help me achieve it, please.

>Solution :

You can try this to achieve it:

function App() {
  return (
    <div className="h-screen  flex flex-col">
      <div className="  ">navbar</div>
      <div className="flex flex-1">
        <div className=" w-32 h-full bg-[#f59e0b] ">Sidebar</div>
        <div className="h-full flex-1">content</div>
      </div>
    </div>
  );
}