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>
Related
I need to add 2 children of a parent element one on the top and another on the bottom. something like this.
and this is the code I have.
<div class=" w-full flex justify-betwen bg-white items-center">
<div class="ml-auto">
<img class="object-cover mr-2 md:mr-4 ml-2 md:ml-4 float-left h-40 lg:w-32 w-14 xs:w-16"
src="../img/Bless.png" alt="" />
</div>
<div class="w-full mx-8">
<div class="text-redfull text-ms xs:text-lg md:text-xl lg:text-2xl xl:text-3xl">
Some text here to top as a title.
</div>
<div
class=" text-gray70 flex justify-between items-center text-xs xs:text-base md:text-base lg:text-lg mb-0">
and this is the date to the bottom Uploaded Auguts 4, 2020
</div>
</div>
</div>
Title should stay at the top.
Date to the bottom.
If anyone knows:)
You can add two divs for Title and Date and add vertical margin to them.
I am not sure whether you want with the text or not so I had implemented for both the cases.
Case 1: With text
<script src="https://cdn.tailwindcss.com"></script>
<div class="justify-betwen flex w-full items-center bg-white">
<div class="ml-auto">
<img class="xs:w-16 float-left mr-2 ml-2 h-40 w-14 object-cover md:mr-4 md:ml-4 lg:w-32" src="http://commondatastorage.googleapis.com/codeskulptor-assets/lathrop/nebula_blue.s2014.png" alt="" />
</div>
<div class="mx-8 w-full">
<div class="text-3xl font-semibold text-red-900">Your Title here</div>
<div class="my-3">
<div class="text-ms xs:text-lg text-red-500 md:text-xl lg:text-2xl xl:text-3xl">Some text here to top as a title.</div>
<div class="xs:text-base mb-0 flex items-center justify-between text-xs text-gray-500 md:text-base lg:text-lg">and this is the date to the bottom Uploaded Auguts 4, 2020</div>
</div>
<div class="text-base font-extralight">25 June 2022</div>
</div>
</div>
Case 2: Without Text
<script src="https://cdn.tailwindcss.com"></script>
<div class="justify-betwen flex w-full items-center bg-white">
<div class="ml-auto">
<img class="xs:w-16 float-left mr-2 ml-2 h-40 w-14 object-cover md:mr-4 md:ml-4 lg:w-32" src="http://commondatastorage.googleapis.com/codeskulptor-assets/lathrop/nebula_blue.s2014.png" alt="" />
</div>
<div class="mx-8 w-full">
<div class="text-3xl font-semibold text-red-900">Your Title here</div>
<div class="my-12">
</div>
<div class="text-lg font-extralight">25 June 2022</div>
</div>
</div>
I had use an online image, so you can replace it with your image.
If You want more gap, then simply increase the my-12 to more.
I have section areas that I want to have equal elements. One side is just an image while the other side has content. I'm using Tailwind CSS and feel positive I have the correct classes. The section Divs are declared as Flex while the child elements each have a Flex-basis of 0 and a Flex grow of 1. The content div continues to be a little larger than my image div.
<section class="section-one flex flex-col-reverse md:flex-row-reverse">
<div class="basis-0 grow p-6 text-center md:text-left md:flex md:flex-col md:justify-center md:items-center">
<div>
<h2 class="font-fraunces text-4xl mb-4 md:text-left md:max-w-md">Stand our to the right audience</h2>
<p class="font-barlow text-gray-500 text-lg p-4 mb-6 md:max-w-md md:p-0">Using a collaborative formula of designers, researchers, photographers, videographers and copywriters, we'll build and extend your brand in digital places.</p>
<div class="flex flex-col">
Learn More
<span class="bg-rose-300/75 w-32 mx-auto h-4 rounded-full md:m-0"></span>
</div>
</div>
</div>
<div class="basis-0 grow">
<img src="images/desktop/image-stand-out.jpg" alt="" class="w-full" />
</div>
</section>
If you remove your p-6 class and add in the div below it will work.
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css" integrity="sha512-wnea99uKIC3TJF7v4eKk4Y+lMz2Mklv18+r4na2Gn1abDRPPOeef95xTzdwGD9e6zXJBteMIhZ1+68QC5byJZw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<section class="section-one flex flex-col-reverse md:flex-row-reverse">
<div class="basis-0 grow remove-this-p-6 text-center md:text-left md:flex md:flex-col md:justify-center md:items-center">
<div class="p-6"> <!-- add here your padding -->
<h2 class="font-fraunces text-4xl mb-4 md:text-left md:max-w-md">Stand our to the right audience</h2>
<p class="font-barlow text-gray-500 text-lg p-4 mb-6 md:max-w-md md:p-0">Using a collaborative formula of designers, researchers, photographers, videographers and copywriters, we'll build and extend your brand in digital places.</p>
<div class="flex flex-col">
Learn More
<span class="bg-rose-300/75 w-32 mx-auto h-4 rounded-full md:m-0"></span>
</div>
</div>
</div>
<div class="basis-0 grow">
<img src="https://via.placeholder.com/500" alt="" class="w-full" />
</div>
</section>
<section class="section-one flex flex-col-reverse md:flex-row-reverse ">
<div class="basis-0 grow">
<img src="https://via.placeholder.com/500" alt="" class="w-full" />
</div>
<div class="basis-0 grow remove-this-p-6 text-center md:text-left md:flex md:flex-col md:justify-center md:items-center">
<div class="p-6"><!-- add here your pading -->
<h2 class="font-fraunces text-4xl mb-4 md:text-left md:max-w-md">Stand our to the right audience</h2>
<p class="font-barlow text-gray-500 text-lg p-4 mb-6 md:max-w-md md:p-0">Using a collaborative formula of designers, researchers, photographers, videographers and copywriters, we'll build and extend your brand in digital places.</p>
<div class="flex flex-col">
Learn More
<span class="bg-rose-300/75 w-32 mx-auto h-4 rounded-full md:m-0"></span>
</div>
</div>
</div>
</section>
By using grid you can achieve this
Here is the best explanation how to use grid system in tailwindcss
I have made code for you please check here: https://play.tailwindcss.com/wldkQ1txrU
Using Tailwind With ReactJS I'm trying to align an image to the center but I can't, this is my code:
<div class="grid md:grid-cols-2 gap-1 place-content-center">
<div className="hidden md:block my-10 md:ml-10 shadow rounded-sm">
<img
src={ Logo }
alt= "Logo"
className="object-none object-center"
/>
</div>
<form className="my-10 md:mr-10 bg-white shadow rounded-sm px-10 py-5">
...
</form>
</div>
Here is a screenshot of the result:
Make the div parent flex instead of block, add justify-center
like this :
<div class="grid place-content-center gap-1 md:grid-cols-2">
<div class="hidden md:inline-flex my-10 md:ml-10 shadow rounded-sm w-full justify-center">
<img src="https://picsum.photos/200" alt="Logo" class="object-none object-center" />
</div>
<form class="my-10 md:mr-10 bg-white shadow rounded-sm px-10 py-5">...</form>
</div>
have a look https://play.tailwindcss.com/lQAKX22Qf7
Or you could just add mx-auto to img
Okay so I suppose you just want to align the image to the center of that grid item, in that case you can just simply add justify-self-center class into the div that contain the image, something like this:
<div className="grid md:grid-cols-2 gap-1 place-content-center">
<div className="hidden md:block my-10 md:ml-10 shadow rounded-sm justify-self-center">
<img
src={ Logo }
alt= "Logo"
className="object-none object-center"
/>
</div>
<form className="my-10 md:mr-10 bg-white shadow rounded-sm px-10 py-5">
...
</form>
</div>
Also I noticed there's a typo problem at the outer div, it should be className instead of class.
Hope this helps
you need to add m-auto to image. you can see here
<div class="grid place-content-center gap-1 grid-cols-2">
<div class="my-10 shadow rounded-sm w-full justify-center">
<img src="https://picsum.photos/200" alt="Logo" class="object-none object-center m-auto" />
</div>
<form class="my-10 bg-white shadow rounded-sm px-10 py-5">...</form>
</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>
<div class="">
<div class="w-16 h-16 border-b-30 border-l-30 border-solid border-black">
<div class="h-16 w-16 border-t-30 border-r-30 bg-transparent"></div>
</div>
</div>
how to make a triangle with tailwindCss without plugin ??
You may try using transform:
<link href="https://unpkg.com/tailwindcss#^2/dist/tailwind.min.css" rel="stylesheet">
<div class="w-16 overflow-hidden inline-block">
<div class=" h-11 w-11 bg-black rotate-45 transform origin-bottom-left"></div>
</div>
<div class="w-16 overflow-hidden inline-block">
<div class=" h-11 w-11 bg-black -rotate-45 transform origin-top-left"></div>
</div>
<div class="w-11 overflow-hidden inline-block">
<div class=" h-16 bg-black -rotate-45 transform origin-top-right"></div>
</div>
<div class="w-11 overflow-hidden inline-block">
<div class=" h-16 bg-black rotate-45 transform origin-top-left"></div>
</div>
<div class="w-11 overflow-hidden inline-block">
<div class=" h-16 bg-black -rotate-45 transform origin-bottom-right"></div>
</div>
<div class="w-11 overflow-hidden inline-block">
<div class=" h-16 bg-black rotate-45 transform origin-bottom-left"></div>
</div>
<div class="w-11 overflow-hidden inline-block">
<div class=" h-16 bg-black -rotate-45 transform origin-top-left"></div>
</div>
<div class="w-11 overflow-hidden inline-block">
<div class=" h-16 bg-black rotate-45 transform origin-top-right"></div>
</div>
You can also try using borders
tailwind playground
<!-- down -->
<div class="border-solid border-t-black border-t-8 border-x-transparent border-x-8 border-b-0"></div>
<!-- up -->
<div class="border-solid border-b-black border-b-8 border-x-transparent border-x-8 border-t-0"></div>
<!-- left -->
<div class="border-solid border-r-black border-r-8 border-y-transparent border-y-8 border-l-0"></div>
<!-- right -->
<div class="border-solid border-l-black border-l-8 border-y-transparent border-y-8 border-r-0"></div>
Maybe you want to use the triangle for tooltip. (such search got me here):
<div class="group relative mt-4 ml-4 inline-block">
<button type="button" class="rounded-md border border-neutral-600 px-1">...</button>
<!-- container for triangle and the menu ↓-->
<div class="invisible absolute left-0 -mt-[2px] flex flex-col group-focus-within:visible group-active:visible">
<div class="ml-2 -mb-[1px] inline-block overflow-hidden"> <!-- ← triangle container -->
<!-- triangle ↓ -->
<div class="h-3 w-3 origin-bottom-left rotate-45 transform border border-neutral-500 bg-neutral-100"></div>
</div>
<!-- menu ↓ -->
<div class="flex min-w-max flex-col rounded-md border border-neutral-500 bg-neutral-100 px-2 py-1">
<div class="cursor-pointer hover:underline">Do amazing stuff</div>
<div class="cursor-pointer hover:underline">Go back</div>
</div>
</div>
</div>
Demo on play.tailwindcss.com
Based on:
#temani-afif answer
https://github.com/tesar-tech/BlazorAndTailwind/blob/master/Articles/DropdownMenu/README.md
By pseudo-element (small triangle):
<script src="https://cdn.tailwindcss.com"></script>
<div>small triangle:</div>
<div class="flex gap-x-1">
<div class="before:content-['▴']"></div>
<div class="before:content-['▾']"></div>
<div class="before:content-['◂']"></div>
<div class="before:content-['▸']"></div>
</div>
By pseudo-element (normal triangle):
<script src="https://cdn.tailwindcss.com"></script>
<div>normal triangle:</div>
<div class="flex gap-x-1">
<div class="before:content-['▲']"></div>
<div class="before:content-['▼']"></div>
<div class="before:content-['◀']"></div>
<div class="before:content-['▶']"></div>
</div>
By border:
<script src="https://cdn.tailwindcss.com"></script>
<div>triangle by border</div>
<div class="flex gap-x-3">
<div class="w-0 h-0 border-8 border-solid border-transparent border-b-black"></div>
<div class="w-0 h-0 border-8 border-solid border-transparent border-t-black"></div>
<div class="w-0 h-0 border-8 border-solid border-transparent border-r-black"></div>
<div class="w-0 h-0 border-8 border-solid border-transparent border-l-black"></div>
</div>
By border (simplify):
<script src="https://cdn.tailwindcss.com"></script>
<div>triangle by border (simplify)</div>
<style type="text/tailwindcss">
#layer components { .triangle { #apply w-0 h-0 border-8 border-solid border-transparent } }
</style>
<div class="flex gap-x-3">
<div class="triangle border-b-black"></div>
<div class="triangle border-t-black"></div>
<div class="triangle border-r-black"></div>
<div class="triangle border-l-black"></div>
</div>