I am trying to create a visual for my project where the image is placed in a rotated container (div), however when the container is rotated the image inside gets rotated to the same number of degrees as the container.
Does anyone know how can I have the image straight and covering the container while the container is rotated?
<template>
<div class="p-4">
<div class="w-80 h-80 bg-blue-500 rotate-90">
<div class="w-80 h-80 bg-red-500 rotate-45">
<img
class="h-full w-full object-cover object-center"
src="https://www.aerointernational.de/content/uploads/2022/09/albums-global-8000-exterior-1_0-scaled-1150x600.jpg"
fit="fill"
alt="aircraft"
/>
</div>
</div>
</div>
</template>
Please see image codesandbox to for a clearer depiction of the issue.
https://codesandbox.io/s/hardcore-microservice-vix2uh?file=/pages/index.vue
I am using Nuxt / Tailwind CSS.
This one is using clip path: https://play.tailwindcss.com/vPFMKkR9WS
Otherwise, you can also do something like this: https://play.tailwindcss.com/Mume9LHfhm
<div class="m-20">
<section class="relative pt-20 pl-8">
<div class="absolute h-64 w-64 rotate-45 rounded-3xl bg-blue-500"></div>
<img class="absolute h-64 w-64 -rotate-[38deg] rounded-3xl object-cover object-center" src="http://i.imgur.com/kreZqnx.jpg" fit="fill" alt="aircraft" />
</section>
</div>
Related
Here I want these tick elements to stay behind the image and only show those ticks that image does not cover and I want that tick elements relative to these images. So I made these these ticks absolute and the parent div relative. But the problem is it is showing tick marks in front of the image. I tried to remove them with z-index but z-index did not work.
What could be the solution for this?
<div className=' relative flex justify-around '>
<div className='grid grid-cols-1 sm:grid-cols-2 w-full lg:w-1/2'>
<div className='flex justify-end mr-12 relative'>
<img className=' ' src={data.imgLink} alt="" />
<img className=' absolute top-4' src="/image/thirdpart/Group 7.png" alt="" />
</div>
<div className='text-white flex flex-col justify-center min-w-80 ml-14 sm:ml-0'>
<div className='text-2xl font-bold mb-4'>{data.title}</div>
<div>{data.description}
</div>
<div className='bg-[#239CAC] w-fit p-4 rounded-full my-5 font-semibold cursor-pointer'>
<button>Read the documentation</button>
</div>
</div>
</div>
<div></div>
</div>[![enter image description here][1]][1]
I am trying to make the following happen:
On image hover, at the bottom it will show comments/reactions on the left and name on the right
I cannot get the 2 divs to space between at the bottom and I do not know why.
https://play.tailwindcss.com/jyBq62Ok90 is the working code
You need to set a width, e.g. w-full on the absolute positioned div. Otherwise the div will be as wide as the content and there will be no space between.
See this tailwind play
Hope this helps.
As far as I understood , you need to highlight the comment div below as you hover the image with a space between two divs
You can use group-hover utility with a div wrapper. Below code will help you much more
<script src="https://cdn.tailwindcss.com"></script>
<div class="group">
<div class="group mb-4 flex aspect-auto w-full overflow-visible duration-300 ease-in hover:scale-105 hover:rounded-lg">
<img src="https://imagesvc.meredithcorp.io/v3/mm/image?url=https%3A%2F%2Fstatic.onecms.io%2Fwp-content%2Fuploads%2Fsites%2F13%2F2015%2F04%2F05%2Ffeatured.jpg&q=60" class="h-full w-full bg-gray-900 object-cover hover:opacity-40" />
</div>
<div class="bottom-0 mx-4 mb-4 hidden bg-gray-700 px-3 duration-300 group-hover:block group-hover:transition group-hover:ease-in">
<div class="flex justify-between">
<div class="flex text-sm font-medium text-white">
<ChatAlt2Icon class="h-5 w-5 text-white" />
<span class="pl-1 text-white">12</span>
<HeartIcon class="ml-2 h-5 w-5 text-white" />
<span class="pl-1 text-white">12</span>
</div>
<div class="flex text-white">Added: Today</div>
</div>
</div>
</div>
I want to create a <hr> divider using Tailwind CSS, but instead of the horizontal rule spanning the entire width of the page unbroken, I want to add some text in the middle.
For example:
----------------------------------- Continue -----------------------------
I can't find anything like this in the documentation. How can I achieve this effect?
If necessary, I can change the HTML to something other than an <hr> element. That was just the only way I knew how to create a horizontal rule.
You can use this HTML syntax to create what you want :
<div class="relative flex py-5 items-center">
<div class="flex-grow border-t border-gray-400"></div>
<span class="flex-shrink mx-4 text-gray-400">Content</span>
<div class="flex-grow border-t border-gray-400"></div>
</div>
See here the result: https://play.tailwindcss.com/65JULZ5XES
Try this instead...
<script src="https://cdn.tailwindcss.com"></script>
<div class="relative py-4">
<div class="absolute inset-0 flex items-center">
<div class="w-full border-b border-gray-300"></div>
</div>
<div class="relative flex justify-center">
<span class="bg-white px-4 text-sm text-gray-500">Continue</span>
</div>
</div>
Example
https://play.tailwindcss.com/Yx4OmAlBsv
Yes, you can do this:
<script src="https://cdn.tailwindcss.com"></script>
<h1 class="text-center overflow-hidden before:h-[1px] after:h-[1px] after:bg-black
after:inline-block after:relative after:align-middle after:w-1/4
before:bg-black before:inline-block before:relative before:align-middle
before:w-1/4 before:right-2 after:left-2 text-xl p-4">Heading
</h1>
Try this.
Need to adjust the height, margin, bg-color, etc. to fit your website.
https://play.tailwindcss.com/FzGZ1fMOEL
<div class="h-5 border-b-4 border-black text-2xl text-center">
<span class="bg-white px-5">your text</span>
</div>
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 am trying to place my Image on the left side of the div.
Anything I try to do to move the Image or the div fail to work. Why is the Image stuck in the center?
I was able to achieve this using flexbox but had to switch to relative positioning because of the Nextjs Image component conflict. In the Image tag you'll see "layout='fill'" which was the root of my problem, but I am unable to rid myself of that piece of code
<div className="relative w-full bg-blue p-4 my-4 rounded-2xl lg:basis-5/12">
<Image className="float-left mr-4" src={"/"+icon} layout={"fill"} objectFit={"contain"} />
<div>
<h3>{ title }</h3>
<p>
{ paragraph }
</p>
</div>
</div>
What I am getting right now:
The float will not work with layout='fill'. Change it to either 'fixed' or 'intrinsic'. I recommend wrapping the Image tag into a div and making the div float. Try something like this.
<div className="bg-blue relative my-4 w-full rounded-2xl p-4 lg:basis-5/12">
<div className="float-left mr-4">
<Image src={'/' + icon} layout={'fixed'} height="120" width="120" />
</div>
<div>
<h3>{title}</h3>
<p>{paragraph}</p>
</div>
</div>
And to improvise it. You do not even need to use float. You can achieve same with flex. So if using float is not important you can do something like this
<div className="bg-blue my-4 flex w-full gap-4 rounded-2xl p-4 lg:basis-5/12">
<Image src={'/' + icon} layout={'intrinsic'} height="120" width="120" alt="" />
<div>
<h3>{title}</h3>
<p>{paragraph}</p>
</div>
</div>