I have 3 columns that each contain a persons image, name, function and a quote. I want all 3 columns to be equal in height.
So far i have tried setting p class="flex-1" which did nothing, i also changed the 2nd inner div to class="flex flex-1 p-6 gap-y-4". This did make the columns equal in height, but it made the div a row instead of a column, if i use flex-1 together with flex-col it does not set the columns equal in height.
How can achieve said behaviour without using a static height in tailwind?
HTML
<div class="flex flex-col">
<div class="w-full">
<img class="h-full w-full" [src]="'/api'" alt="employee image">
</div>
<div class="flex flex-col p-6 gap-y-4 text-center bg-indigo-300">
<h3 class="text-3xl font-bold text-white">{{employee?.name}}</h3>
<h4 class="text-lg uppercase text-black">{{employee?.function}}</h4>
<p class="text-center text-xl font-bold text-black" [innerHtml]="employee?.quote"></p>
</div>
</div>
You should use utility classes grid and grid-cols-3 to create desired layout.
You can find below a code example based on the code you sent. By the way, for future questions you might ask on stack overflow, please note that the good practice is to share code that actually works, ie self-contained, preferably in a code snippet. As such, your code references an image and employee object which are not contained in your code.
<script src="https://cdn.tailwindcss.com"></script>
<div class="grid grid-cols-3 gap-3">
<div class="flex flex-col">
<div>
<div class="h-20 bg-slate-400">Image</div>
</div>
<div class="flex flex-col p-6 gap-y-4 text-center bg-indigo-300 flex-auto">
<h3 class="text-3xl font-bold text-white">Employee Name</h3>
<h4 class="text-lg uppercase text-black">Employee Function</h4>
<p class="text-center text-xl font-bold text-black">Employee Quote</p>
</div>
</div>
<div class="flex flex-col">
<div>
<div class="h-20 bg-slate-400">Image</div>
</div>
<div class="flex flex-col p-6 gap-y-4 text-center bg-indigo-300 flex-auto">
<h3 class="text-3xl font-bold text-white">Employee Name</h3>
<h4 class="text-lg uppercase text-black">Employee Function</h4>
<p class="text-center text-xl font-bold text-black">Employee Quote</p>
</div>
<div class="flex flex-col p-6 gap-y-4 text-center bg-indigo-300 flex-auto">
<h3 class="text-3xl font-bold text-white">Employee Name</h3>
<h4 class="text-lg uppercase text-black">Employee Function</h4>
<p class="text-center text-xl font-bold text-black">Employee Quote</p>
</div>
</div>
<div class="flex flex-col">
<div>
<div class="h-20 bg-slate-400">Image</div>
</div>
<div class="flex flex-col p-6 gap-y-4 text-center bg-indigo-300 flex-auto">
<h3 class="text-3xl font-bold text-white">Employee Name</h3>
<h4 class="text-lg uppercase text-black">Employee Function</h4>
<p class="text-center text-xl font-bold text-black">Employee Quote</p>
</div>
</div>
</div>
EDIT: Following OP's comment, I added flex-auto to the employee card so that it can grows if needed to match the height of other columns. Intrinsically, all columns in a grid have same height, you only need to let its inner elements grow if you want same to take all possible height.
You can use a flex wrapper instead of using grid and specifying columns count.
<script src="https://cdn.tailwindcss.com"></script>
<div class="flex gap-3">
<div class="flex flex-col w-full">
<div>
<div class="h-20 bg-slate-400">Image</div>
</div>
<div class="flex flex-col p-6 gap-y-4 text-center bg-indigo-300 flex-auto">
<h3 class="text-3xl font-bold text-white">Employee Name</h3>
<h4 class="text-lg uppercase text-black">Employee Function</h4>
<p class="text-center text-xl font-bold text-black">Employee Quote</p>
</div>
</div>
<div class="flex flex-col w-full">
<div>
<div class="h-20 bg-slate-400">Image</div>
</div>
<div class="flex flex-col p-6 gap-y-4 text-center bg-indigo-300 flex-auto">
<h3 class="text-3xl font-bold text-white">Employee Name</h3>
<h4 class="text-lg uppercase text-black">Employee Function</h4>
<p class="text-center text-xl font-bold text-black">Employee Quote</p>
</div>
<div class="flex flex-col p-6 gap-y-4 text-center bg-indigo-300 flex-auto">
<h3 class="text-3xl font-bold text-white">Employee Name</h3>
<h4 class="text-lg uppercase text-black">Employee Function</h4>
<p class="text-center text-xl font-bold text-black">Employee Quote</p>
</div>
</div>
<div class="flex flex-col w-full">
<div>
<div class="h-20 bg-slate-400">Image</div>
</div>
<div class="flex flex-col p-6 gap-y-4 text-center bg-indigo-300 flex-auto">
<h3 class="text-3xl font-bold text-white">Employee Name</h3>
<h4 class="text-lg uppercase text-black">Employee Function</h4>
<p class="text-center text-xl font-bold text-black">Employee Quote</p>
</div>
</div>
</div>
Related
I want to center the text within the division so that the two text columns aren't right next to each other.
Original:
So that it's like this:
My code:
<div class="px-80 py-4 grid grid-cols-2 divide-x-4">
<div className="w/2 flex flex-col">
<div class="font-bold text-6xl text-center">+9.7%</div>
<p class="text-gray-700 text-4xl text-center">
Since Last Quarter
</p>
</div>
<div className="w/2 flex flex-col justify-center w-full h-full items-center">
<div class="font-bold text-6xl text-center">-11.3%</div>
<p class="text-gray-700 text-4xl text-center">YTD</p>
</div>
</div>
</div>```
Try removing the grid and remove the px-80 and replace it with flex and the following code:
<div class="flex p-10 divide-x-2">
<div class=" flex flex-col flex-1">
<div class="font-bold text-6xl text-center font-[roboto]">+9.7%</div>
<p class="text-gray-700 mt-2 text-2xl text-center font-serif">
Since Last Quarter
</p>
</div>
<div class=" flex flex-col justify-center flex-1 items-center">
<div class="font-bold text-6xl text-center font-[roboto]">-11.3%</div>
<p class="text-gray-700 mt-2 text-2xl text-center font-serif">YTD</p>
</div>
</div>
</div>
</div>
Output:
Tailwind-play
I've got the following code and have tried adding "justify-content", "align-middle", and others but still can't seem to get it to align the h5 and link in the middle of the containing div. Should I be structuring this another way, without using "flex" or "flex-col"?
<section id="cta-image-box"
class="container mx-auto py-24 mt-32 mb-32">
<div class="h-[335px] rounded-[40px] bg-slate-500 bg-bgCTA bg-cover bg-center bg-blend-multiply">
<div class="flex flex-col items-center">
<h5 class="text-5xl font-bold text-white mb-10">
Lorem ipsum dolor site <span class="text-gray-300">15% OFF</span> amet
</h5>
<a href="#"
alt=""
class="px-6 py-3 w-fit rounded-full bg-slate-200 text-gray-800 hover:bg-slate-800 hover:text-white">
Discount Code
</a>
</div>
</div>
</section>
You can achieve this using h-full and place-content-center place-items-center on wrapper div.
<head>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<section id="cta-image-box" class="container mx-auto py-24 mt-32 mb-32">
<div class="h-[335px] rounded-[40px] bg-slate-500 bg-bgCTA bg-cover bg-center bg-blend-multiply">
<div class="h-full flex flex-col place-content-center text-center place-items-center">
<h5 class="text-5xl font-bold text-white mb-10">
Lorem ipsum dolor site <span class="text-gray-300">15% OFF</span> amet
</h5>
<a href="#" alt="" class="px-6 py-3 w-fit rounded-full bg-slate-200 text-gray-800 hover:bg-slate-800 hover:text-white">
Discount Code
</a>
</div>
</div>
</section>
</body>
Take a look to that answer which is already explained how to align vertically center quite clear.
Below, you can see how to apply it to your code. You should give these classes: flex justify-center items-center.
<link href="https://cdn.jsdelivr.net/npm/tailwindcss/dist/tailwind.min.css" rel="stylesheet"/>
<section id="cta-image-box" class="container mx-auto py-24 mt-32 mb-32">
<div class="flex justify-center items-center h-[335px] rounded-[40px] bg-slate-500 bg-bgCTA bg-cover bg-center bg-blend-multiply">
<div class="flex flex-col items-center">
<h5 class="text-5xl font-bold text-white mb-10">
Lorem ipsum dolor site <span class="text-gray-300">15% OFF</span> amet
</h5>
<a href="#" alt="" class="px-6 py-3 w-fit rounded-full bg-slate-200 text-gray-800 hover:bg-slate-800 hover:text-white">
Discount Code
</a>
</div>
</div>
</section>
I want to move a picture/row down using Tailwind CSS, in order to achieve this kind of image gallery: https://i.stack.imgur.com/MmPng.png
Here is what I have
tried:
<section class="overflow-hidden text-gray-700">
<div class="">
<div class="flex flex-wrap ">
<div class="flex flex-wrap w-2/3">
<div class="w-1/2 p-1 md:p-2">
<img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg"
src="https://mdbcdn.b-cdn.net/img/Photos/Horizontal/Nature/4-col/img%20(70).webp">
</div>
<div class="w-1/2 p-1 md:p-2">
<img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg"
src="https://mdbcdn.b-cdn.net/img/Photos/Horizontal/Nature/4-col/img%20(72).webp">
</div>
<div class="w-full p-1 md:p-2">
<img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg"
src="https://mdbcdn.b-cdn.net/img/Photos/Horizontal/Nature/4-col/img%20(73).webp">
</div>
</div>
<div class="flex flex-wrap w-1/3">
<div class="w-full p-1 md:p-2">
<img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg"
src="https://mdbcdn.b-cdn.net/img/Photos/Horizontal/Nature/4-col/img%20(74).webp">
</div>
<div class="w-full p-1 md:p-2">
<img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg"
src="https://mdbcdn.b-cdn.net/img/Photos/Horizontal/Nature/4-col/img%20(75).webp">
</div>
</div>
<div class="flex flex-wrap w-2/3">
<div class="w-1/2 p-1 md:p-2">
<img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg"
src="https://mdbcdn.b-cdn.net/img/Photos/Horizontal/Nature/4-col/img%20(70).webp">
</div>
<div class="w-1/2 p-1 md:p-2">
<img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg"
src="https://mdbcdn.b-cdn.net/img/Photos/Horizontal/Nature/4-col/img%20(72).webp">
</div>
</div>
</div>
</div>
</section>
I think you should use the grid classes instead of flex for this purpose. Then you can use row-span and col-span, which makes it quite easy to achieve the grid that is in the example in your question.
Here is an example in the tailwind playground.
See this video of TailwindLabs.
Hope this helps.
I'm using TailwindCSS in my project. My page looks like below:
<main class="max-w-7xl mx-auto mt-6 px-4">
<div class="flex flex-col md:space-x-12 justify-center md:flex-row">
<div class="w-full md:w-9/12 mb-8">
<h1 class="text-3xl font-bold mt-2 mb-4">Title</h1>
<p class="mb-4 uppercase text-gray-500">META DATA</p>
<div class="prose lg:prose-lg post">
<p class="bg-gray-200 p-5 h-36 m-3"></p>
<p class="bg-gray-200 p-5 h-36 m-3"></p>
<p class="bg-gray-200 p-5 h-36 m-3"></p>
<p class="bg-gray-200 p-5 h-36 m-3"></p>
<p class="bg-gray-200 p-5 h-36 m-3"></p>
<p class="bg-gray-200 p-5 h-36 m-3"></p>
<p class="bg-gray-200 p-5 h-36 m-3"></p>
<p class="bg-gray-200 p-5 h-36 m-3"></p>
</div>
<hr class="mt-5" />
</div>
<div class="w-full md:w-3/12">
<div class="mb-5 mx-auto" style="max-width:300px">
<div class="rounded rounded-lg border">
<p class="bg-blue-100 p-5 h-12 m-3"></p>
<p class="bg-blue-100 p-5 h-12 m-3"></p>
<p class="bg-blue-100 p-5 h-12 m-3"></p>
<p class="bg-blue-100 p-5 h-12 m-3"></p>
</div>
<div class="rounded rounded-lg border mt-10 sticky self-auto top-20">
<div class="p-20">Make this box sticky</div>
</div>
</div>
</div>
</div>
</main>
I want to make the bottom box in the right sidebar sticky but it's not happening. I've seen many threads and followed advice like make it flex-start, but it doesn't work in this layout. Can you please help?
You can see the playground here - https://play.tailwindcss.com/MaFc2vXQRe
Add display: unset; on the parent div of sticky div check below code.
<div class="mb-5 mx-auto" style="max-width:300px; display: unset;">
Let me know if you have to face any issue
I have this component called Difficulty Bar.
I want to make it dynamic according to the difficulty level(i.e for beginner only the first dot background is colored other is not and for the intermediate, only the first two dots are colored and so on...)
I am using react with tailwind CSS.
Please help me.
import React from 'react'
const DifficultyBar = () => {
return (
<div class="max-w-xl mx-4 my-2">
<p className="pb-2 px-2 font-bold">Beginner</p>
<div class="flex pb-3">
<div class="flex-1 z-10">
<div class="w-6 h-6 bg-secondary mx-0 rounded-full border-2 border-secondary">
</div>
</div>
<div class="w-full align-center items-center align-middle content-center flex">
<div class="w-full items-center align-middle align-center flex-1">
<div class="bg-white border-2 -ml-2 rounded-full border-secondary py-xs w-full"></div>
</div>
</div>
<div class="flex-1 z-10">
<div class="w-6 h-6 bg-white -ml-4 rounded-full border-2 border-secondary">
</div>
</div>
<div class="w-full align-center items-center align-middle content-center flex">
<div class="w-full items-center align-middle align-center flex-1">
<div class="bg-white border-2 -ml-2 rounded-full border-secondary py-xs w-full"></div>
</div>
</div>
<div class="flex-1 z-10">
<div class="w-6 h-6 bg-white -ml-4 rounded-full border-2 border-secondary">
</div>
</div>
<div class="w-full align-center items-center align-middle content-center flex">
<div class="w-full items-center align-middle align-center flex-1">
<div class="bg-white border-2 -ml-2 rounded-full border-secondary py-xs w-full"></div>
</div>
</div>
<div class="flex-1 z-10">
<div class="w-6 h-6 bg-white border-2 border-secondary -ml-4 rounded-full">
</div>
</div>
</div>
</div>
)
}
export default DifficultyBar