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
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 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've tried isolating an issue for a few hours to no avail. I think an image is worth more than a few words so let's start with that.
And the code.
<section id="about-me" class="flex bg-neutral-300 text-neutral-900">
<div class="container mx-auto flex flex-col space-y-5 md:flex-row md:space-x-5 p-5 md:p-0 md:pt-5 md:pb-5">
<div class="flex flex-1 justify-center h-32 rounded-lg shadow-sm shadow-neutral-900">
<div class="flex flex-col">
<p>test</p>
</div>
</div>
<div class="flex flex-1 justify-center h-32 rounded-lg shadow-sm shadow-neutral-900">
<div class="flex flex-col">
<p>test</p>
</div>
</div>
<div class="flex flex-1 justify-center h-32 rounded-lg shadow-sm shadow-neutral-900">
<div class="flex flex-col">
<p>test</p>
</div>
</div>
</div>
</section>
As we can see, the first div inside the container has a weird position. I've tried removing a lot of classes, including padding and margin, but the first element stays in this position no matter what.
I really don't see what is my issue, so I kind of need extra pairs of eyes right now. Thanks.
Remove in in the container div this class space-y-5. And it would work like expected.
<section id="about-me" class="flex bg-neutral-300 text-neutral-900">
<div class="container mx-auto flex flex-col md:flex-row md:space-x-5 p-5 md:p-0 md:pt-5 md:pb-5">
<div class="flex flex-1 justify-center h-32 rounded-lg shadow-sm shadow-neutral-900">
<div class="flex flex-col">
<p>test</p>
</div>
</div>
<div class="flex flex-1 justify-center h-32 rounded-lg shadow-sm shadow-neutral-900">
<div class="flex flex-col">
<p>test</p>
</div>
</div>
<div class="flex flex-1 justify-center h-32 rounded-lg shadow-sm shadow-neutral-900">
<div class="flex flex-col">
<p>test</p>
</div>
</div>
</div>
</section>
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>
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