What is the best way to stack three boxes on top of one another in Nextjs Tailwind?

Currently, I am working on creating a design with 3 boxes stacked vertically and then adding an image to it. You can see the example below:

https://i.sstatic.net/jViO.png

I have successfully implemented this layout, but I am facing an issue where the boxes are tilted sideways.

https://i.sstatic.net/fl0Zz.png

   <div className='flex flex-col box-border rounded strok h-60 w-48 p-4  border-2 ...'>
          <div className=' box-border rounded strok h-32 w-32 p-4 border-8 bg-black ...'>
            <div className=' box-border rounded strok h-32 w-32 p-4 border-8 bg-black ...'>
              <div className=' box-border rounded strok h-32 w-32 p-4 border-8 bg-black ...'></div>
            </div>
          </div>
        </div>
cssreactjsnext.jstailwind-css

Answer №1

All of the boxes are nested within padding, creating a hierarchy where they are considered children elements. The parent containers also have padding applied. One suggestion is to designate one parent element with a relative position, while setting the position of the three boxes to absolute.

<div class="h-screen w-screen bg-gray-200 py-20 flex justify-center items-center sm:py-12">
 <div class="h-40 w-40 relative">
 <div class="rounded h-[150px] w-[150px] bg-red-700 absolute z-30 left-1"> 
 </div>
  <div class="rounded h-[150px] w-[134px] bg-slate-500 absolute z-20 top-3 left-3"></div>
 <div class="rounded h-[142px] w-[118px] bg-black absolute z-10 top-8 left-5"></div>

I provided a sample demonstration for you on the tailwind playground at this link: https://play.tailwindcss.com/MJnaFMVio6

Answer №2

Here is a simple way to incorporate it:

<!-- Stylish Background -->
<div class="mx-auto h-[500px] w-[500px] flex justify-center items-center bg-blue-500 relative p-[10px]">
  <!-- Collection of Boxes -->
  <div class="relative">
    <div class="relative mt-4 mx-4 h-full">
      <!-- Stacked Boxes in the Background -->
      <div class="absolute -bottom-4 scale-[0.85] origin-bottom inset-x-0 h-full w-full bg-white/40 backdrop-blur-md rounded-2xl"></div>
      <div class="absolute -bottom-2 scale-95 origin-bottom inset-x-0 h-full w-full bg-white/40 backdrop-blur-md rounded-3xl shadow-sm"></div>
      <!-- Main Box on Top -->
      <div class="p-4 bg-white/60 backdrop-blur-md rounded-3xl h-full">
        <img class="rounded-[20px]" src="https://variety.com/wp-content/uploads/2021/07/Rick-Astley-Never-Gonna-Give-You-Up.png">
      </div>
    </div>
  </div>
</div>

Check out how it looks on Tailwind Playground: https://play.tailwindcss.com/dmU2c4ai36

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

Applying CSS classes to my div element

Check out the following code snippet: <div class="page-template-default logged-in"></div> I am trying to apply a class like this: .page-template-default .logged-in { } However, it doesn't seem to work. Any idea why? ...

css

What is the best way to incorporate a condition within react material-ui components?

Currently I am constructing a generic data table using react and material-ui. My programming background is in c# and java, as well as some early experience with javascript. However, I am encountering syntax issues within reactjs. Here is the particular pi ...

javascriptreactjsmaterial-ui

Prevent scrollbar from appearing while splash page loads

Looking for help with a script to create a splash/intro page loader. $(function(){ setTimeout(function() { $('#splash').fadeOut(500); }, 6000); }); The current script hides the intro page after 6 seconds, ...

javascriptjqueryhtmlcss

Establish the starting value for the material user interface checkbox

function mapStateToProps(state) { return { model: Selectors.Quotes.getCurrentQuote(state), }; } class Customer extends Component { state = { checkedEnergyConcessionHolder: false }; ...

reactjsreduxreact-reduxmaterial-uiredux-form

Hiding a button based on the visibility of another button in the user's viewport

Is there a way to dynamically hide button B when the user scrolls and button A becomes visible on the screen? Additionally, how can we show button B again once button A is no longer visible to the user? Both buttons should never be visible simultaneously. ...

javascripthtmljquerycss

Guide on updating the background color of the dropdown in a Material-UI 5 TextField select

https://i.stack.imgur.com/ZCVpw.png From the image provided above, it is clear that the background color of the dropdown requires modification. My goal is to change the white background to black. Below is the code snippet: const styles={ textField:{ ...

reactjsmaterial-ui

NextJS React - WebpackError: Cannot access 'window' before initialization

I'm delving into the world of React and recently completed the "Getting Started" tutorial for NextJs (link), successfully setting up a new project. However, when attempting to import third-party plugins like current-devices or smooth-scrollbar, I enc ...

javascriptreactjswebpack

Unable to create a horizontal navigation bar

After spending a considerable amount of time on this task, I am perplexed as to why the navbar is not aligning horizontally. I have tried various techniques such as floating to the left and using display inline, but nothing seems to be working. Could there ...

htmlcssnavbardreamweaver

Guide to preserving canvas state in React?

I am currently working on a drawing application that allows users to draw lines on a canvas. The functionality is such that the line starts drawing on the first click, continues as the mouse moves, and stops on the second click. However, each time a user ...

javascriptreactjstypescriptcanvasdraw

Avoid using cookies for tracking purposes

I've set up basic authentication, which is working fine in my localhost environment. However, when I try to run the same setup in production, the registration process works but the cookie isn't getting assigned to the client site. Client side: ...

node.jsreactjsexpresscookiesaxios

Next-auth is executed with each request during the preview phase

I'm encountering a peculiar issue with the next-auth library. Our next.js application is hosted on Vercel. Some of our API endpoints require authentication, while others do not. While testing locally, everything functions correctly. However, in the ...

next.jsvercelnext-auth

Concealing the sidebar in React with the help of Ant Design

I want to create a sidebar that can be hidden by clicking an icon in the navigation bar without using classes. Although I may be approaching this incorrectly, I prefer to keep it simple. The error message I encountered is: (property) collapsed: boolean ...

javascriptreactjstypescriptweb-applicationsantd

Nextjs Middleware enhances routes without redirecting, ensuring seamless user experience even for logged-in users

Having trouble with my nextjs middleware for an ecommerce app that involves admin, customer, and vendor roles. The middleware decodes the token from header cookies to retrieve user data like email and ID. Everything works fine for logical routes and authen ...

next.jsmiddlewarenext.js13nextjs-rewrites

What is the reason for using props over state in the state component mentioned in the link below?

I am looking for code to track live location using react.js, so I came across the following link and I am curious why props are used instead of state in a stateful component? https://www.npmjs.com/package/react-geolocated Could someone explain to me the ...

reactjs

Interactive Content Swapping: How to Use Javascript for Dynamic Link Updates

http://jsfiddle.net/bUjx7/42/ <script type='text/javascript' src='http://code.jquery.com/jquery-1.9.1.js'> </script> <script type='text/javascript'> $(document).ready(function () { $('.fieldreplace ...

javascriptjqueryhtmlcss

Specialized hover mission

Do you have a question? Imagine you have 3 spans where the default color is black. When you hover over a span, its color changes to red. But what if I told you that at the start, the first span has an orange color. Now, I want to hover over the orange on ...

javascripthtmlcsshover

Learn how to create a disappearing dropdown menu in React that closes automatically when you select a specific category

I'm encountering an issue with a dropdown menu that remains visible on the screen even after selecting a specific category. The selected category is displayed in a box upon selection, but the dropdown menu doesn't disappear as intended. I am look ...

javascriptreactjsreact-hooksdropdown

Changing the CSS property from "display: none" to "display: block" using JavaScript causes all the div elements to overlap

My issue involves several radio inputs where clicking one should reveal a hidden div containing information. However, when this div appears, it overlaps with the footer instead of staying positioned between the footer and radio input as intended. I am str ...

javascripthtmlcss

Is there a method for uploading and viewing files from a server using the MERN stack?

Looking to create a functionality for users to upload various file types such as documents, presentations, and text files, save them to a database, and then view them from the server. Are there any recommended frameworks or npm modules to help with this ...

node.jsreactjsmongodbexpress

Starting your React application with the `npm start` command

After creating my react app using the create-react-app command, I named it react-app. These were the steps I followed: Navigate to the directory by typing cd react-app/ Run the command npm start Encountered an error message that reads; npm ERR! Missing ...

javascriptreactjsnpm