Creating a split hero section view using a combination of absolute/relative CSS techniques, Tailwind, and React

I'm in the process of creating a website using Nextjs, React, and TailwindCSS, and I aim to design a Hero section that resembles the one on the following website.

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

My goal is to:

  • Have a text title and buttons on the left side
  • Display a PNG image on the right side with right-0 positioning
  • Ensure the image size changes dynamically while maintaining a responsive aspect ratio

Currently, my image widens as the screen size increases and I struggle to control its size effectively. Setting max-w-4xl helps but doesn't keep it aligned to the right-0.


            <div tw="inset-y-0 right-0 pl-4 -mr-40 h-full pl-12 max-w-4xl"> <- specified max width here
                <Image src={PNGImage} tw="h-full w-auto" alt="Image" />
            </div>

This is how I currently have it structured.

        <div tw="flex flex-row ml-16 relative overflow-hidden">
            <div tw="flex flex-col">
                <h1
                    tw="text-white-default font-bold text-2xl text-center"
                    className="whitespace-pre-wrap laptop:text-[48px]"
                >
                    Some title text...
                </h1>
            </div>

            <div tw="inset-y-0 right-0 pl-4 -mr-40 h-full pl-12">
                <Image src={PNGImage} tw="h-full w-auto" alt="Image" />
            </div>
        </div>

I believe I need to introduce an absolute value to achieve correct responsiveness, although I am unsure about the best approach for this.

Here are some example websites I found with a similar structure.

cssreactjstypescriptnext.jstailwind-css

Answer №1

You have the option to achieve this layout using either grid or flex. Feel free to choose the one that you find easier to work with. Below is an example implementation using grid:

<main className='grid grid-cols-12 h-screen w-screen'>
  <div className='col-span-12 lg:col-span-8'>
    <div className='h-2/4 relative'>
      <img src='/assets/icons/logo.svg' className='w-full h-full' />
    </div>
    <div className='flex flex-row space-x-4'>
      <button>test</button>
      <button>test</button>
    </div>
    <div className='flex flex-row space-x-4'>
      <p>logo</p>
      <p>logo</p>
      <p>logo</p>
      <p>logo</p>
    </div>
  </div>
  <div className='col-span-12 lg:col-span-4 bg-blue-500'>
      <p>Rest of the stuff here</p>
  </div>
</main>

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

Activate collapsible navigation icon when clicked on a smaller screen

Seeking assistance as a newcomer to coding. Struggling to implement a responsive navbar icon that changes on small screens when clicked. Utilized a bootstrap navbar but encountering issues where clicking the navbar on a small screen only displays the list ...

javascripthtmlcsstwitter-bootstrapbootstrap-4

Typescript Tooltip for eCharts

I'm working on customizing the tooltip in eChart v5.0.2 using Typescript, but I'm encountering an error related to the formatter that I can't seem to resolve. The error message regarding the function keyword is as follows: Type '(param ...

javascripttypescriptecharts

The function in Angular 5/Typescript disappears when attempting to call it from within another function

After importing D3 into my component, I encounter an issue when trying to assign a layout to the D3.layout property. Strangely, although the layout property is present in the console output of my D3 object, it seems to be unknown when I attempt to call i ...

angulartypescriptd3.js

Using -webkit-transform with varying transition durations for rotateX and rotateY properties

Is it possible to have different transition times for both rotateX and rotateY in CSS3? I know you can use -webkit-transition to set a time, but it seems like setting separate transition times for both is not doable. It appears that you can only set it for ...

jqueryhtmlcsswebkit

Perfectly aligning the Update Progress Animation in real-time

I am currently utilizing the Ajax UpdateProgress with a loading gif attached. The issue I am facing is how to ensure that the loading.gif always appears in the center of the screen, even if the user is at the very top or bottom of the page. Is there a meth ...

cssajaxupdateprogress

Tips on retrieving a strongly typed value from a method using Map<string, object>

Having had experience working with C# for a while, I recently ventured into a Node.js project using TypeScript V3.1.6. It was exciting to discover that TypeScript now supports generics, something I thought I would miss from my C# days. In my C# code, I ha ...

typescript

After the page is reloaded, apply a class to the divs by selecting them based on the "data" attribute

I have a set of four cards labeled "card", each representing different body parts: eyes, torso, arms, and legs. <div class="card" data-lesson="eyes">eyes</div> <div class="card" data-lesson="torso">torso</div> <div class="card" ...

javascriptjqueryhtmlcsslocal-storage

At compile time, Typescript runs smoothly, but errors may arise during runtime

Currently, I am delving into learning Typescript and have encountered a snag in my code. Despite searching extensively for a solution, I have been unable to find any relevant material pertaining to my issue. Below is the code snippet in question: <code ...

typescript

Combining a pair of canvases

Currently, I am utilizing a JavaScript library to create a QR Code. This library generates the QR code by displaying it on a canvas. Nevertheless, my goal is to integrate a background behind this QR Code. I attempted to achieve this by first drawing the b ...

javascripthtmlangulartypescripthtml5-canvas

Looking to set up a React build pipeline in VSTS using Yarn but struggling to locate the package.json file?

I am working on a React project and during local testing, I usually use commands like yarn install, yarn build, and yarn start to check it at https://localhost:3000 I have set up the following pipeline: https://i.sstatic.net/PDM2N.png However, when check ...

reactjsmsbuildazure-devopsyarnpkg

Shifting Elements - Navigation triggers subtle movements in CSS styles as you move across pages

I've noticed a strange issue on my website where certain elements seem to be shifting slightly when navigating between different pages. Here's a quick video clip demonstrating the problem. It appears that these elements are not staying static as ...

cssnavigationwebhtml

The error message "bind this is not defined in react" is displayed when attempting to read

Is it necessary to use bind in the constructor if you already have bind(this) in JSX? render(){ return( <input onChange={this.myFunc.bind(this)} type="text"/> ) } myFunc(){ alert('should trigger'); } I encountered an erro ...

javascriptreactjs

When converting an object into a specific type, the setter of the target type is not invoked

Imagine a scenario with a class structured like this: class Individual { private _name: string; get Name(): string { return this._name; } set Name(name: string) { this._name = name; } } Upon invoking HttpClient.get<Individual>(), it retrieve ...

typescript

Changes made to TailwindCSS classes are not being reflected in the browser

When using Tailwind with React, I am facing an issue where I have to restart the server and run npm run start every time I make changes to classNames in order to see the updates reflected on the browser. Is there a way to configure my scripts so that the c ...

reactjstailwind-csspostcss

What are some ways to utilize CSS variables for enhancing component styles within Svelte?

Presented here is a straightforward component called Text.svelte. It utilizes a CSS variable to prevent unnecessary duplication: <div> <span class="t1">t1</span> <span class="t2">t2</span> </div> ...

csssveltevite

Error occurred during module build: SyntaxError: An unexpected token was found, a comma was expected

Although I have thoroughly checked for any errors, an error appeared in the terminal. Take a look at the following image for reference: view image details here ...

reactjseslint

What is the best method for restricting the visibility of an animation to specific regions within an SVG?

I am seeking assistance with adding a "shine" animation to my SVG. I want the animation to only appear within specific parts of the SVG, but I'm uncertain about how to achieve this. Below is what I have accomplished so far. The aim is for the white ...

htmlcssanimationsvg

Submitting a POST request from a Typescript Angular 2 application to a C# MVC backend

Having trouble passing a payload using Typescript service in an http.post request Here is my TypeScript code: saveEdits(body: Object): Observable<Animal[]> { let bodyString = JSON.stringify(body); let headers = new Headers({ 'Content- ...

c#angularjstypescript

Showing various menus through a continuous loop

I am currently learning material-ui and React, and I need to dynamically create multiple menus in a loop. Check out the code snippet below: state = { anchorEl: null, }; handleClick = event => { this.setState({ anchorEl: event.currentTarget ...

reactjsmaterial-ui

Tips for retrieving the return value from a function with an error handling callback

I am having an issue with my function that is supposed to return data or throw an error from a JSON web token custom function. The problem I am facing is that the data returned from the signer part of the function is not being assigned to the token const a ...

javascriptnode.jstypescriptasynchronousjwt