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.
Related
I have a main title, logo, and subtitle and want to put the subtitle at the center whatever the logo's width.
With the current code sub title's position changes according to the logo's width and does not align with to the main header
<div class="flex justify-between items-center p-4 pt-10">
<div class="w-40"></div>
<p mode="" class="pb-8 w-72 flex justify-center text-white">AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA</p>
</div>
<div class="w-screen bg-red-500 bg-opacity-50 mb-5 py-5 text-white flex justify-between">
<img src="{{ 'storage/'.$logo}}" class="h-14 pl-24" alt="">
<h1 class="block text-3xl font-semibold text-center my-auto">xxxxx</h1>
<div class="w-72"></div>
</div>
How to deal with it?
Easiest way to solve this issue is using position: absolute property on image tag. Use position property and remove extra unwanted div's. Try following code, I hope it will solve your issue.
<div class="flex justify-center bg-red-200 items-center p-4 pt-10">
<p mode="" class="pb-8 text-white">AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA</p>
</div>
<div class="w-screen bg-red-500 bg-opacity-50 mb-5 py-5 text-white flex justify-center relative">
<img src="https://placehold.it/150x150?text=logo" alt="" class="absolute left-0 top-0 h-14 pl-24 pt-4">
<h1 class="block text-3xl font-semibold text-center my-auto">xxxxx</h1>
</div>
You are trying to adjust the logo and subtitle with flex justifyContent so the logo width changes will cause movement of your subtitle.
There are many options in css for fixing this, one of them is to use absolute position for your img element:
<div class="w-screen bg-red-500 bg-opacity-50 mb-5 py-5 text-white flex justify-between">
<img src="{{ 'storage/'.$logo}}" class="absolute left-0 top-0 h-14 pl-24 pt-4" alt="">
<h1 class="block text-3xl font-semibold text-center my-auto">
Subtitle
</h1>
</div>
I'm trying to code as below
https://play.tailwindcss.com/5x8mBABcsW
How I can place the text over the circle image? I need the text centered and rounded on the bottom of the image.
I also want to be able to increase size of the image and everything should stay in proportion.
Something like this
<div class="relative w-40 h-40 rounded-full overflow-hidden">
<img src="https://www.w3schools.com/howto/img_avatar2.png" alt="Avatar" class="object-cover w-full h-full" />
<div class="absolute w-full py-2.5 bottom-0 inset-x-0 bg-blue-400 text-white text-xs text-center leading-4">this is a text</div>
</div>
Height of bottom element is set by paddings (but you can change it with height), image size handled by parent's w-40 h-40 - you may change them.
import React from 'react';
import hero from '../assets/img/hero-bg.jpg';
const Hero = () => {
return (
<div className='w-full h-screen'>
<img
className='top-0 left-0 w-full h-screen object-cover'
src={hero}
alt='/'
/>
<div className='bg-black/30 absolute top-0 left-0 w-full h-screen' />
<div className='absolute text-2xl md:text-7xl text-white top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2'>
<p className='tex-red-700'>I am Morgan Freeman</p>
</div>
</div>
);
};
export default Hero;
<div class="relative w-40 h-40 overflow-hidden rounded-full">
<img src="https://www.w3schools.com/howto/img_avatar2.png" alt="Avatar" class="rounded-full w-full h-full" />
<div
class="absolute w-full py-3 bottom-0 inset-x-0 bg-blue-400 text-white text-xs text-center leading-4 hover:translate-y-1 delay-500">this is a text</div>
</div>
OR-
<div class="relative w-40 h-40">
<img src="https://www.w3schools.com/howto/img_avatar2.png" alt="Avatar" class="rounded-full w-full h-full" />
<div class="absolute w-full h-full top-0 left-0 rounded-full bg-blue-400 text-white text-xs flex justify-center items-center opacity-0 hover:opacity-90">this is a text</div>
</div>
I think you will try with this code-
Also, you will change or adjust values-
<div class="grid grid-cols-5 gap-4">
<div class="overflow-hidden border hover:rounded-lg hover:shadow-lg justify-evenly">
<div class="flex px-3 pt-1 justify-end">
<a class="underline italic" href="desc.html" title="Description">More</a>
</div>
<a class="cursor-pointer" href="www.www.com">
<img src="img/img.JPG" />
</a>
<div class="flex w-full justify-evenly mt-1 mb-4">
<a href="www.www.com class="bg-green-700 hover:bg-green-800 text-white font-bold py-1 px-4 rounded">
Button
</a>
</div>
</div>
<div class="overflow-hidden border hover:rounded-lg hover:shadow-lg justify-evenly">
</div>
...
</div>
I have grid with multiple grid cells. Each cell contains image. Under image there is a button. Currently button is placed just under the image. However, heights of images are different. So those buttons are not aligned.
I wonder how to put these buttons at the bottom of each cell??
I tried to add align-bottom on button wrapper, but it doesn't help.
Just need to play around with h-# flex flex-col justify-*. See a working demo.
<div class="grid grid-cols-3">
<div class="col-span-1 h-96 flex flex-col justify-between">
<img src="https://homepages.cae.wisc.edu/~ece533/images/airplane.png" class="h-full bg-cover bg-center" />
<button class="w-24 px-4 py-2 bg-gray-200 rounded-lg">Button</button>
</div>
<div class="col-span-1 h-96 flex flex-col justify-between">
<img src="https://homepages.cae.wisc.edu/~ece533/images/arctichare.png" class="h-3/5 bg-cover bg-center" />
<button class="w-24 px-4 py-2 bg-gray-200 rounded-lg">Button</button>
</div>
<div class="col-span-1 h-96 flex flex-col justify-between">
<img src="https://homepages.cae.wisc.edu/~ece533/images/baboon.png" class="h-3/4 bg-cover bg-center" />
<button class="w-24 px-4 py-2 bg-gray-200 rounded-lg">Button</button>
</div>
</div>
I see the following changes:
The card div should be a flex column, with the classes flex and flex-col and justify-between. This one each child element will be vertically positioned so there is the same space between them
Wrap the Img and the more link in a div, this way the space between the img and the more won't be that large
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