I have three elements in one div. The third one goes beneath the rest of them when a certain threshold of the screen width is passed compiling some sort of a pyramid. How do I change this threshold?
<div className="flex justify-center items-center flex-wrap space-x-[10rem] mt-20">
<div className="flex justify-center items-center align-middle select-none w-[13rem] h-[16rem] rounded-[0.3rem] bg-gradient-to-r from-indigo-500 via-purple-500 to-pink-500 skew-x-[15deg]">
<div className="absolute justify-center items-center align-middle w-[18rem] h-[12rem] bg-transculent backdrop-blur-[0.625rem] rounded-[0.3rem]">
<div className="flex justify-center text-center mt-4">
<span className="flex font-semibold skew-x-[-15deg]">Technologies</span>
</div>
<div className="flex items-center justify-center text-center align-middle mt-6">
<span className="flex skew-x-[-15deg]"></span>
</div>
</div>
</div>
<div className="flex justify-center items-center align-middle select-none w-[13rem] h-[16rem] rounded-[0.3rem] bg-gradient-to-r from-[#4dff03] to-[#00d0ff] skew-x-[15deg]">
<div className="absolute justify-center items-center align-middle w-[18rem] h-[12rem] bg-transculent backdrop-blur-[0.625rem] rounded-[0.3rem]">
<div className="flex justify-center text-center mt-4">
<span className="flex font-semibold skew-x-[-15deg]">My values</span>
</div>
<div className="flex items-center justify-center text-center align-middle mt-6">
<span className="flex skew-x-[-15deg]"></span>
</div>
</div>
</div>
<div className="flex justify-center items-center align-middle select-none w-[13rem] h-[16rem] rounded-[0.3rem] bg-gradient-to-r from-pink-500 to-yellow-500 skew-x-[15deg]">
<div className="absolute justify-center items-center align-middle w-[18rem] h-[12rem] bg-transculent backdrop-blur-[0.625rem] rounded-[0.3rem]">
<div className="flex justify-center text-center mt-4">
<span className="flex font-semibold skew-x-[-15deg]">Properties</span>
</div>
<div className="flex items-center justify-center text-center align-middle mt-6">
<span className="flex skew-x-[-15deg]"></span>
</div>
</div>
</div>
</div>
You have a better way to create the gaps. Instead of using space-x-[10rem] you can simply use gap-[10rem]. But anyway, I wouldn't use a gap here.
Instead of centering your divs using justify-center you can use justify-between. This way, your gaps will be created automatically without the need to define a constant value.
Now, if you don't want to give your divs an option to go beneath the other divs, don't use flex-wrap here. having flex-wrap will force your items to flow to another line.
flex-wrap:
The flex-wrap property is a sub-property of the Flexible Box Layout module. It defines whether the flex items are forced in a single line or can be flowed into multiple lines.
Your code should look like this:
<div className="flex justify-between items-center mt-20">
<div className="flex justify-center items-center align-middle select-none w-[13rem] h-[16rem] rounded-[0.3rem] bg-gradient-to-r from-indigo-500 via-purple-500 to-pink-500 skew-x-[15deg]">
<div className="absolute justify-center items-center align-middle w-[18rem] h-[12rem] bg-transculent backdrop-blur-[0.625rem] rounded-[0.3rem]">
<div className="flex justify-center text-center mt-4">
<span className="flex font-semibold skew-x-[-15deg]">Technologies</span>
</div>
<div className="flex items-center justify-center text-center align-middle mt-6">
<span className="flex skew-x-[-15deg]"></span>
</div>
</div>
</div>
<div className="flex justify-center items-center align-middle select-none w-[13rem] h-[16rem] rounded-[0.3rem] bg-gradient-to-r from-[#4dff03] to-[#00d0ff] skew-x-[15deg]">
<div className="absolute justify-center items-center align-middle w-[18rem] h-[12rem] bg-transculent backdrop-blur-[0.625rem] rounded-[0.3rem]">
<div className="flex justify-center text-center mt-4">
<span className="flex font-semibold skew-x-[-15deg]">My values</span>
</div>
<div className="flex items-center justify-center text-center align-middle mt-6">
<span className="flex skew-x-[-15deg]"></span>
</div>
</div>
</div>
<div className="flex justify-center items-center align-middle select-none w-[13rem] h-[16rem] rounded-[0.3rem] bg-gradient-to-r from-pink-500 to-yellow-500 skew-x-[15deg]">
<div className="absolute justify-center items-center align-middle w-[18rem] h-[12rem] bg-transculent backdrop-blur-[0.625rem] rounded-[0.3rem]">
<div className="flex justify-center text-center mt-4">
<span className="flex font-semibold skew-x-[-15deg]">Properties</span>
</div>
<div className="flex items-center justify-center text-center align-middle mt-6">
<span className="flex skew-x-[-15deg]"></span>
</div>
</div>
</div>
</div>
Removed space-x-[10rem].
Removed flex-wrap.
Replaced justify-center to justify-between.
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 my sidebar to be on the righthand side of the screen and it's stuck on the left.
Parent
<div className="relative w-full min-h-screen h-full bg-primary-color-light dark:bg-primary-color-dark ">
<SlideNav toggleSidebar={setToggleSidebar} sideOpen={toggleSidebar} />
</div>
Sidebar
<div className={`absolute h-full top-16 ease-in-out duration-200 float-right mr-0 ${!sideOpen && "-mr-96"} w-72 bg-white dark:bg-secondary-color-dark shadow dark:text-white select-none`}>
<div className="flex flex-col align-center text-sm ">
<div className="border-y dark:border-primary-color-dark py-5 px-6 flex items-center hover:bg-slate-100 dark:hover:bg-hover-color-dark hover:cursor-pointer space-x-3"><MdOutlineMarkChatUnread className="mt-1 text-lg" /><span>Reading Queue</span></div>
<div className="border-b dark:border-primary-color-dark py-5 px-6 flex items-center hover:bg-slate-100 dark:hover:bg-hover-color-dark hover:cursor-pointer space-x-3"><BsTags className="text-xl" /><span>Create Category</span></div>
<div className="border-b dark:border-primary-color-dark py-5 px-5 flex items-center group hover:bg-slate-100 dark:hover:bg-hover-color-dark hover:cursor-pointer space-x-3"><CiHeart className="text-2xl group-hover:text-red-600" /><span>Favorites</span></div>
<div className="border-b dark:border-primary-color-dark py-5 px-6 flex items-center hover:bg-slate-100 dark:hover:bg-hover-color-dark hover:cursor-pointer space-x-3"><MdOutlineMarkChatRead className="text-lg" /><span>Read</span></div>
<div className="border-b dark:border-primary-color-dark py-5 px-6 flex items-center hover:bg-slate-100 dark:hover:bg-hover-color-dark hover:cursor-pointer space-x-3"><CiSettings className="text-xl" /><span>Settings</span></div>
<div onClick={() => ToggleTheme()} className="border-b dark:border-primary-color-dark py-5 px-6 flex items-center hover:bg-slate-100 dark:hover:bg-hover-color-dark hover:cursor-pointer space-x-3"><CiCloudMoon className="text-xl" /><span>Toggle Theme</span></div>
</div>
<div className="py-3 border-t dark:border-primary-color-dark flex bottom-0 items-center dark:hover:bg-hover-color-dark hover:bg-slate-100 hover:cursor-pointer justify-center"><div className="flex items-center space-x-3 text-sm"><RiLogoutBoxLine /><span>Logout</span></div></div>
</div>
Why is this the case if the parent is set to relative?
Use absolute inset-y-0 right-0 to position to the right of the screen
Code:
<div class=" h-screen relative z-0 flex bg-gray-500 ">
<div class="text-4xl "> The main content of the file and it has it's content all over the page and i want to build a navbar on top of this</div>
<div class="absolute inset-y-0 right-0 z-10 bg-green-400 w-1/3 "><div class="flex h-full items-center justify-center text-4xl">Mobile Navbar</div></div>
</div>
Output:
Code link: Tailwind play
I am currently working with tailwind to create a log in form.
The HTML looks like so:
<!DOCTYPE html>
<html style="height: 100%;">
<head>
<title>Test</title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.0.2/tailwind.min.css" rel="stylesheet"/>
</head>
<body style="height: 100%; width: 100%;">
<div class="w-full h-full flex flex-col p-5 md:flex-row md:space-x-2">
<div class="w-full h-1/4 flex justify-center items-center md:w-1/2 md:h-full">
</div>
<div class="w-full h-3/4 p-2 md:w-1/2 md:h-full">
<div class="h-10 flex justify-around items-center mb-1 space-x-2">
<a class="h-full w-full">
<div class="flex h-full w-full justify-center items-center text-center text-lg border rounded-lg border-red-900">
<span>Log in</span>
</div>
</a>
<a class="h-full w-full">
<div class="flex h-full w-full justify-center items-center text-center text-lg border rounded-lg border-red-900">
<span class="">Sign up</span>
</div>
</a>
</div>
<div style="height: calc(100% - 2.5rem) !important" class="p-2 border rounded-lg border-red-900 shadow-2xl">
<div class="w-full h-full flex relative">
<form class="w-full h-full">
<div style="height: calc(100% - 2.5rem) !important" class="w-full h-full flex flex-col justify-center overflow-auto">
<div class="w-3/4 my-3 mx-auto flex flex-col justify-center">
<label class="w-full">
<span class="font-mono ml-3">Email</span>
<input class="w-full px-3 border rounded-lg border-red-700 h-8 focus:outline-none focus:ring-1 focus:ring-red-700 focus:z-10" type="text"
placeholder="user#mail.com" required autofocus>
</label>
</div>
<div class="w-3/4 my-3 mx-auto flex flex-col justify-center">
<label class="w-full">
<span class="font-mono ml-3">Password</span>
<input class="w-full px-3 border rounded-lg border-red-700 h-8 focus:outline-none focus:ring-1 focus:ring-red-700 focus:z-10" type="password"
placeholder="********" required>
</label>
</div>
<div class="w-3/4 mx-auto text-right text-red-700">
<a>Forgot password?</a>
</div>
</div>
<div class="text-red-700 m-auto h-10 w-3/4 absolute bottom-0 inset-x-0 text-center border rounded-lg">
<button class="font-mono h-full w-full focus:bg-red-700 focus:text-white focus:outline-none focus:ring-0 border rounded-lg border-red-700 hover:bg-red-700 hover:text-white"
type="submit">Log in</button> <!-- [disabled]="!loginForm.valid" -->
</div>
</form>
</div>
</div>
</div>
</div>
</body>
</html>
The problem
As you can see, in the parent div, it contains the class overflow-auto. The issue is that when the overflow is activated, part of the first child is not shown for some reason. When removing the justify-center (also in the parent div) this issue is no longer a problem, however I want the content to be vertically centered.
Please see the following image to get a graphical idea. As the image shows, the scrollbar is at its top limit, however the first child is only partly displayed.
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
I have problem with my flex div in my portfolio. I have 3 services that I want to feature. They all have a svg image and some text underneath. I tried to give them all a flex: 1 property, but they still don't share the space evenly.
Here is the code:
<div class="flex flex-row">
<div class="px-24 pt-8 flex flex-1 flex-col justify-center items-center text-center">
<img src="/static/media/design.0e806bbe.svg">
<span class="font-montserrat font-bold text-4xl">Design</span>
</div>
<div class="px-24 pt-8 flex flex-1 flex-col justify-center items-center text-center">
<img src="/static/media/code.4871712c.svg">
<span class="font-montserrat font-bold text-4xl">Programmation</span>
</div>
<div class="px-24 pt-8 flex flex-1 flex-col justify-center items-center text-center">
<img src="/static/media/hosting.af9efcf1.svg">
<span class="font-montserrat font-bold text-4xl">Hébergement</span>
</div>
</div>
This is what I get:
PS: I am using TailwindCSS.