i am trying to show text under image for responsive design.
right now it is showing behind icon. how i can show text below icon.
CODE
<link
rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"
/>
<div class="flex flex-wrap mt-4 border-2 border-gray-500 p-8 m-auto w-1/4 items-center justify-center">
<div class=" absolute fas fa-book-reader text-6xl text-gray-600"></div>
<div class=" text-base"> Caring Enviroment</div>
</div>
You need to remove absolute class
<link
rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"
/>
<div class="flex flex-wrap mt-4 border-2 border-gray-500 p-8 m-auto w-1/4 items-center justify-center">
<div class="fas fa-book-reader text-6xl text-gray-600"></div>
<div class=" text-base text-center"> Caring Enviroment</div>
</div>
Remove absolute or relpace absulte with relative. On this way you can position (top-10 etc.) the box if you want.
https://play.tailwindcss.com/TU6xLsUjj4
Related
How do you center a button in tailwind in a div?
I have tried:
justify-center
items-center
mx-auto
content-center
in all cases, the button is stuck on the left hand side.
The h2 and p center no problem.
<div class="container py-10 px-10 mx-0 min-w-full" className="contactdiv">
<h2 class="text-5xl text-white text-center">Contact Us</h2>
<br />
<p class="text-center text-white">Kickstart your career in BioPharma with the Mendeleev Institute right now</p>
<button class="bg-purple-900 text-white hover:bg-blue-400 font-bold py-2 px-4 mt-3 rounded items-center">Learn More</button>
</div>
I suggest to use flex flex-col items-center on the container to center children across the y axis.
<div class="container py-10 px-10 mx-0 min-w-full flex flex-col items-center">
<h2 class="text-5xl mb-3 text-black">Contact Us</h2>
<p class="text-black">Kickstart your career in BioPharma with the Mendeleev Institute right now</p>
<button class="bg-purple-900 text-white hover:bg-blue-400 font-bold py-2 px-4 mt-3 rounded">Learn More</button>
</div>
Here is the result on Tailwind Play
I used css grid on my solution. Here is my code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link href="https://unpkg.com/tailwindcss#^1.0/dist/tailwind.min.css" rel="stylesheet">
</head>
<body>
<div class="container py-10 px-10 mx-0 min-w-full grid place-items-center" className="contactdiv">
<h2 class="text-5xl text-black text-center">Contact Us</h2>
<br />
<p class="text-center text-black">Kickstart your career in BioPharma with the Mendeleev Institute right now</p>
<button class="bg-purple-900 text-white hover:bg-blue-400 font-bold py-2 px-4 mt-3 rounded items-center">Learn More</button>
</div>
</body>
</html>
Correction - Having encountered this problem multiple times - NONE of the solutions posted work.
Adding flex, flex-col and items-center to the parent component does nothing.
The only thing that works is to wrap the button in tags, only then does the button centre.
Wrap the button in a flex container and justify content to the center. Since the button is the only element in its container
<div class="container py-10 px-10 mx-0 min-w-full">
<h2 class="text-5xl text-white text-center">Contact Us</h2>
<br />
<p class="text-center text-white">Kickstart your career in BioPharma with the Mendeleev Institute right now</p>
<div class="flex justify-center">
<button class="bg-purple-900 text-white hover:bg-blue-400 font-bold py-2 px-4 mt-3 rounded items-center">Learn More</button>
</div>
</div>
Just use flex flex-col items-center justify-center in the parent div.
<div class="authButtons basis-1/4 border-4 flex flex-col items-center justify-center">
<button class="font-fa text-3xl border-2">Hey!</button>
</div>
You can check it out in this tailwind demo.
styles that need to be implemented
As shown,How to use tailwindcss to achieve the following styles?Many thanks
The styles I implemented are as follows
The styles I implemented, are not correct
<div class="p-4 bg-white shadow flex flex-wrap divide-x divide-y">
<div class="p-4 text-center w-1/3">1</div>
<div class="p-4 text-center w-1/3">1</div>
<div class="p-4 text-center w-1/3">1</div>
<div class="p-4 text-center w-1/3">1</div>
<div class="p-4 text-center w-1/3">1</div>
</div>
Instead of using flex box, you might be better off using CSS grid instead via the grid class. You can then use gap-px to specify a 1px gap between all your grid cells.
To have the colors 1px border, it is just a matter of setting the background color on the parent grid element, e.g. using the bg-gray-200 class.
To get the border radius, you can use rounded-lg. Use overflow-hidden to ensure children elements are properly clipped.
See proof-of-concept below:
<link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css" rel="stylesheet" />
<!-- Top level div only for display purposes -->
<div class="w-screen h-screen grid place-items-center">
<div class="shadow-xl grid grid-cols-3 gap-px bg-gray-200 rounded-lg overflow-hidden">
<div class="px-16 py-8 bg-white text-center">1</div>
<div class="px-16 py-8 bg-white text-center">2</div>
<div class="px-16 py-8 bg-white text-center">3</div>
<div class="px-16 py-8 bg-white text-center">4</div>
<div class="px-16 py-8 bg-white text-center">5</div>
<div class="px-16 py-8 bg-white text-center">6</div>
</div>
</div>
I'm trying to vertically center the div with a white border onto the div with a green background. Colors just for show. I cannot figure out why justify-center and items-center do not work. I know I can use margin to achieve what I want but I know there's a better way. I have tried referencing this SO post but have had no luck:Reference Post
Also, if there is a better solution to implement what I want I'm all ears.
My code:
<div class="flex flex-col min-h-screen bg-coolGray-900">
<div class="w-screen justify-center items-center h-screen bg-green-500 ">
<div class="text-center text-white border-2 ">
<h1 class="mb-10 text-6xl font-bold font-lato">Message Here</h1>
<h2 class="mb-8 text-2xl font-semibold font-lato">More Detailed Message Here</h2>
<button class="mx-auto btn btn-learn">Learn More</button>
</div>
</div>
</div>
You haven't displayed your container class as flex, this is why your justifies aren't working.
Add the class flex to your bg-green-500 class.
<link href="https://unpkg.com/tailwindcss#^2/dist/tailwind.min.css" rel="stylesheet"/>
<section>
<div class="flex flex-col min-h-screen bg-coolGray-900">
<div class="flex w-screen justify-center items-center h-screen bg-green-500 ">
<div class="text-center text-white border-2 w-screen">
<h1 class="mb-10 text-6xl font-bold font-lato">Message Here</h1>
<h2 class="mb-8 text-2xl font-semibold font-lato">More Detailed Message Here</h2>
<button class="mx-auto btn btn-learn">Learn More</button>
</div>
</div>
</div>
</section>
So this is the code I am working with:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.1.2/tailwind.min.css" />
<div class=" h-48 p-3 bg-gray-700">
<div class="h-full w-48 bg-gray-700 border border-gray-300">
<div class="h-6 bg-gray-400 opacity-50 w-full">
Username
</div>
<img class="w-full object-contain" src="https://images.unsplash.com/photo-1494790108377-be9c29b29330" />
</div>
</div>
I am having issues getting the image to constrain to the parent div. What I want to accomplish is to have the user image constrain inside the parent div and not overflow outside the border. The image attached is what it looks like now. I have no idea what I am doing wrong or missing.
make it a flexbox container
<link href="https://unpkg.com/tailwindcss#^2/dist/tailwind.min.css" rel="stylesheet">
<div class=" h-48 p-3 bg-gray-700">
<div class="h-full w-48 bg-gray-700 border border-gray-300 flex flex-col">
<div class="h-6 bg-gray-400 opacity-50 w-full">
Username
</div>
<img class="w-full object-contain min-h-0" src="https://images.unsplash.com/photo-1494790108377-be9c29b29330" />
</div>
</div>
OR CSS grid:
<link href="https://unpkg.com/tailwindcss#^2/dist/tailwind.min.css" rel="stylesheet">
<div class=" h-48 p-3 bg-gray-700">
<div class="h-full w-48 bg-gray-700 border border-gray-300 grid">
<div class="h-6 bg-gray-400 opacity-50 w-full">
Username
</div>
<img class="w-full object-contain min-h-0 h-full" src="https://images.unsplash.com/photo-1494790108377-be9c29b29330" />
</div>
</div>
Use flex flex-col on parent container and add min-h-0 to image.
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.1.2/tailwind.min.css" />
<div class=" h-48 p-3 bg-gray-700">
<div class="h-full w-48 bg-gray-700 border border-gray-300 flex flex-col">
<div class="h-6 bg-gray-400 opacity-50 w-full">
Username
</div>
<img class="w-full object-contain min-h-0" src="https://images.unsplash.com/photo-1494790108377-be9c29b29330" />
</div>
</div>
I need to programm the following design
I want to give the big image in the middle (dark red) the rematining space of my flexcontainer, where the yellow stuff is margin/paddings. The problem i have here is, that my image always overlapps the flex container and also the images in the bottom and the svgs. I dont want to give the image a fixed height nor some percentage values because i want to keep it responsive and dynamicaly. Here is my code:
<div
class="flex flex-col flex-1 fixed bg-black w-auto inset-x-11 inset-y-10 z-1003">
</svg>
<div class="fixed flex flex-1 flex-col inset-x-20 inset-y-20">
<div class="flex h-3/4 justify-center items-center">
<svg
</svg>
<img
class="mx-6 w-5/6 h-full bg-gray-light border-2 rounded-md"
My Big Image
/>
<svg
</svg>
</div>
<div class="flex w-full flex-row flex-1 items-end justify-center mt-6">
<div v-for="img in 3" class="mx-6 bg-black-normal rounded-lg">
<img
the orange images
/>
</div>
</div>
</div>
The best solution here would be for me to remove every heights and only work with flex flex-1 flex-shrink and so on but its not working properly as expected.
You can do this in many ways. Flexboxes are good approach, but for for thumbnails images I would use grid to make them even (but sure flexboxes can by used as well).
It does not matter if you use SVG or not for buttons. But if you have any problem with them - please provide real reproduction example (https://play.tailwindcss.com/ can be usefully).
Demo: https://play.tailwindcss.com/RsXsrdSYG3
<link href="https://unpkg.com/tailwindcss#^2/dist/tailwind.min.css" rel="stylesheet"/>
<div class="min-h-screen bg-gray-50 p-8 flex flex-col">
<div class="flex items-center">
<button class="flex-none w-16 h-16 bg-gray-500">PREV</button>
<div class="px-6">
<img src="https://via.placeholder.com/1920x1080" />
</div>
<button class="flex-none w-16 h-16 bg-gray-500">NEXT</button>
</div>
<div class="mt-6 grid grid-cols-3 gap-6">
<img src="https://via.placeholder.com/1920x1080" />
<img src="https://via.placeholder.com/1920x1080" />
<img src="https://via.placeholder.com/1920x1080" />
</div>
</div>
Or if you want to fill screen height (but empty space will be visible over big image to keep responsive ratio).
Demo: https://play.tailwindcss.com/hTYuGjPHHk
<link href="https://unpkg.com/tailwindcss#^2/dist/tailwind.min.css" rel="stylesheet"/>
<div class="h-screen bg-gray-50 p-8 flex flex-col">
<div class="flex items-center flex-1">
<button class="flex-none w-16 h-16 bg-gray-500">PREV</button>
<div class="px-6 h-full flex items-center">
<img src="https://via.placeholder.com/1920x1080" />
</div>
<button class="flex-none w-16 h-16 bg-gray-500">NEXT</button>
</div>
<div class="mt-6 grid grid-cols-3 gap-6">
<img src="https://via.placeholder.com/1920x1080" />
<img src="https://via.placeholder.com/1920x1080" />
<img src="https://via.placeholder.com/1920x1080" />
</div>
</div>