Responsive header in Tailwind CSS

Responsive header in Tailwind CSS:

Tailwind CSS responsive header

We won’t be writing our own CSS, so bear with me as we build this full header using HTML elements with Tailwind classes.

We will start off by building the main wrapper:

We give this wrapper a height with the h-64 class, and round the corners. Next, we also make it a cool indigo tint.
As you can see this wrapper is relative.
This is because we need to use some absolute divs to position elements on top of each other.

This gives us the following result:

Now we want to place the image on the right first.

Snowy mountain lake

As you can see we place an absolute div inside our container. This div is set to the right of the parent.
We also state it should be 9/12 of the width, and use the full height.
Inside of the div is the actual image.
We state it should use an object-fit method, as well as use the full-height.

The result so far:

Already a pretty cool result, but now we need to make the left side for the content and the even cooler diagonal lines.

Tailwind responsive header

Snowy mountain lake

We add another absolute div, which uses the full width and height, this is because inside of it we will then cut down on the size relative to the parent.
We place a relative div inside which defined some padding and the size of the text div.
In there we have the heading text, nothing fancy just a big bold font.

If we now render this, it looks a bit odd, the text is half over the image and that’s just weird looking.

Now we need to find a way to add this diagonal line and have some more indigo behind the text.

Tailwind responsive header

Snowy mountain lake

Here we added another absolute div, for now we add a 1/3 width element inside with the indigo color, this is the background for our text element.

As you can see it’s still not fully covering the text.
That is because our shape will do the final stretch.

As, mentioned now it’s time to add the shapes, I make use of SVG’s with a polygon inside.

Tailwind responsive header

Snowy mountain lake

We added another 1/3 column, but relative for now. Inside you can see the SVG which contains a polygon.
You can change the colour of these SVG’s by using text classes, for the demo I made this text-red for now so you can see what is added.

Pretty cool right!

Now, let’s finish the shapes and add the last copy of our SVG, but offset it a little bit and add transparency to it.

Tailwind responsive header

Snowy mountain lake

There we added another SVG, which is offset by using the ml-6 class, which gives it margin-left.
We also add opacity-50 to make it 50% opacity.

from Tumblr

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s