<div class="flex">
<div class="flex-1 text-sm bg-red-300">
<span class="align-bottom">I want this to be on the same bottom level as Right content</span>
</div>
<div class="flex-1 text-right text-5xl bg-blue-400">
Right content
</div>
</div>
I tried align-bottom,align-text-bottom or something with float-right and float-left (without using flex), but nothing worked so far..
Tailwind Playground.
You can try using items-end on the parent along with flex class to solve the problem.
<link href="https://unpkg.com/tailwindcss#^2/dist/tailwind.min.css" rel="stylesheet">
<div class="flex">
<div class="flex-1 text-sm bg-red-300 flex items-end">
<span>I want this to be on the same bottom level as Right content</span>
</div>
<div class="flex-1 text-right text-5xl bg-blue-400">
Right content
</div>
</div>
Tailwind Playground
Related
The problem is that I have a title a subtitle and a footer. I would like the subtitle's div to span across the empty space between the title and the footer.
I tried setting h-full to the div but it does not seem to do anything.
export default function ASD() {
return (
<div className="flex flex-col justify-start mx-auto w-9/12 min-h-screen bg-red-300 text-center">
<div className="bg-yellow-200">
<div className="bg-blue-200 text-6xl">
<h1>Title</h1>
</div>
<div className="bg-indigo-500 text-3xl">
<h1>Subtitle</h1>
</div>
</div>
<footer className="mt-auto bg-green-200">Footer</footer>
</div>
);
}
Also, I would like the whole page to cover the entire screen so that the footer is at the bottom of the page.
Your header and subtitle is wrapped inside a div, you need to remove that wrapper div ,and then use flex-1 so that the subtitle div spans accross the entire height of the screen.
<div class="mx-auto flex min-h-screen w-9/12 flex-col justify-start bg-red-300 text-center">
<div class="bg-blue-200 text-6xl">
<h1>Title</h1>
</div>
<div class="flex-1 bg-indigo-500 text-3xl"> //👈 use flex-1 here
<h1>Subtitle</h1>
</div>
<footer class="mt-auto bg-green-200">Footer</footer>
</div>
Output:
Tailwind play link
Try this.
<div className="flex flex-col justify-start mx-auto w-9/12 h-full bg-red-300 text-center">
<div className="bg-yellow-200 flex-1 flex flex-col">
<div className="bg-blue-200 text-6xl">
<h1>Title</h1>
</div>
<div className="bg-indigo-500 text-3xl flex-1">
<h1>Subtitle</h1>
</div>
</div>
<footer className="bg-green-200">Footer</footer>
</div>
Here what I've now:
and how it should looks:
<div class="overflow-auto flex flex-col h-full">
<div class="flex flex-1 flex-col px-7 divide-y-2 divide-metal bg-white">
<div
v-for="item in items"
:key="item.id"
:item="item"
class="flex-1 py-4 lg:py-8"
/>
</div>
<div class="flex flex-col bg-white lg:bg-gray-light">
<div class="!bg-white lg:!bg-gray-light lg:border-b-2 lg:border-metal">
<template #content>
<h4
class="h4 uppercase !font-black !text-[26px] 2xl:!text-[36px] leading-10 tracking-[-0.43px]"
v-text="$t('We Also Recommend')"
/>
</template>
</div>
<div class="flex flex-col px-7 divide-y-2 divide-metal">
<div
v-for="product in recommendProducts"
:key="product.sku"
:item="product"
class="flex-1 py-4 lg:py-8"
/>
</div>
</div>
</div>
<div class="sticky top-0 bottom-auto">
<div class="p-10">
<div class="desktop-only flex justify-between items-center pb-10 uppercase">
<p
class="subtitle1"
v-text="$t('Subtotal')"
/>
<div
:value="totals.subtotal"
class="subtitle1"
/>
</div>
<div class="flex flex-col">
<div
v-text="$t('Proceed to Checkout')"
class="btn btn--lg btn--black mb-3.5 text-[15px]"
/>
</div>
</div>
</div>
</div>
And the problem is that bottom div should cover products and section 'We also recommend' with products should have scroll. Now bottom div extends beyond the view. On bottom div I've position: sticky and on section 'We also recommend' overflow: auto. Where's the problem and how to fix it?
If I understand your problem correctly, the bottom sheet does cover the last part of the scrolling content, right? There is an easy solution:
Just add
padding-bottom: XXpx; # XX == size of sticky bottom sheet
to the scroll container
I have attached a rough idea of what I am trying to achieve, the dotted line represents the center of the container.
I am trying to center align one div element, then right align a second div within the same row, while both elements are centered horizontally.
Try like this:
<script src="https://cdn.tailwindcss.com"></script>
<div class="flex items-center justify-center border border-dashed">
<div class="flex-1"></div>
<div class="w-32 h-32 bg-red-500"></div>
<div class="flex-1">
<div class="w-20 h-20 bg-green-500 ml-auto"></div>
</div>
</div>
With grid:
<script src="https://cdn.tailwindcss.com"></script>
<div class="grid grid-cols-[minmax(0,1fr),auto,minmax(0,1fr)] items-center border border-dashed">
<div></div>
<div class="w-32 h-32 bg-red-500"></div>
<div class="w-20 h-20 bg-green-500 ml-auto"></div>
</div>
I am trying to position icon to the left side of a Link and have the text centered at the same time.
<div className="max-w-screen-2xl mx-auto sm:px-6 lg:px-8">
<Link
href="#"
className="px-6 py-3 mt-2 flex justify-center text-center"
>
<DocumentTextIcon
className="ml-1 mt-1 -mr-1 h-10 w-10"
aria-hidden="true"
/>
<p>
Some random text </p>
</Link>
</div>
With this the icon is in the middle with the text. I can push to the right with margin left but then it is not dynamic. Any idea how I can push the icon to the left and it remains dynamic?
Try this way:
<div class="my-10 flex items-center justify-center bg-gray-100 w-40">
<div class="flex-1">
<span class="mr-auto">icon</span>
</div>
<p>text</p>
<div class="flex-1"></div>
</div>
<div class="my-10 flex items-center justify-center bg-gray-100 w-80">
<div class="flex-1">
<span class="mr-auto">icon</span>
</div>
<p>with long text</p>
<div class="flex-1"></div>
</div>
Demo
I'm trying to learn tailwind-css or I would say learning css where I'm struggling with the position of elements. Working on Vue js components.
I achieved the designing few of the elements so far:
I want to add some shapes or designs inside the banner/dark-blue area and then would add some widget-box inside of it. My code look something like this:
<div class="bg-white block">
<nav-bar></nav-bar>
<div class="hidden md:block w-2/5 top-0 left-0">
<img src="/nits-assets/images/body_shape.png" alt="shape" align="left">
</div>
<div class="hidden md:block">
<img src="/nits-assets/images/body_shape_2.png" alt="shape" align="right">
</div>
<div class="block">
<div class="absolute w-full top-0 pl-12 pr-12 pt-40">
<slider></slider>
<div class="flex justify-around">
<card></card>
<card></card>
<card></card>
<card></card>
</div>
</div>
</div>
<div class="block">
<div class="bg-white overlflow-hidden">
<div class="relative">
<img src="/nits-assets/images/screenshot_banner.png" alt="screenshot_banner" align="center">
<img class="absolute top-0 left-0" src="/nits-assets/images/pattern_1.png" alt="banner" align="left">
</div>
</div>
</div>
<feature></feature>
</div>
For reference to the components code: https://github.com/nitish1986/sample_website
My approach was to fix position of the parent element or make it relative then position the shapes with absolute positioning respective to its parent element but whenever I try to put absolute position the shapes reaches to the top of the website. It is not taking respective positioning
<div class="bg-white overlflow-hidden">
<div class="relative">
<img src="/nits-assets/images/screenshot_banner.png" alt="screenshot_banner" align="center">
<img class="absolute top-0 left-0" src="/nits-assets/images/pattern_1.png" alt="banner" align="left">
</div>
</div>
How can achieve this positioning? I want to achieve something like this:
Any better approach into it are most welcome. Thanks.
I did a lot of research work on my issue, I found out that my absolute element is taking all the space needed for me. I came to know that I have to define an empty space or define the height of the div which is exactly consumed by my absolute elements. Since in my code I have a very long absolute element, so the only thing can cover is empty div space.
<div class="bg-white block">
<nav-bar></nav-bar>
<div class="hidden md:block w-2/5 top-0 h-auto">
<img src="/nits-assets/images/body_shape.png" alt="shape" align="left">
</div>
<div class="hidden md:block h-auto">
<img src="/nits-assets/images/body_shape_2.png" alt="shape" align="right">
</div>
<div class="block bg-white h-screen">
<div class="relative">
<div class="absolute w-full top-0 pl-12 pr-12 pt-40">
<slider></slider>
<div class="flex justify-around">
<card></card>
<card></card>
<card></card>
<card></card>
</div>
</div>
</div>
</div>
<div class="block mt-48 p-56">
<div class="p-2 w-full h-100"></div>
</div>
<feature></feature>
<preview></preview>
<about-us></about-us>
</div>
So in my code I kept empty space with:
<div class="block mt-48 p-56">
<div class="p-2 w-full h-100"></div>
</div>
Hope this helps someone. Thanks