I am trying to make a rounded border on an element with an image as background and I am using the following code: https://jsfiddle.net/vLhpkerw/
<ol class="p-5 bg-gray-200">
<li class="rounded-lg relative overflow-hidden mb-2">
<a href="#"
class="items-center relative z-10 flex p-3 bg-gradient-to-r from-gray-200">
<div class="text-gray-800">
<div class="text-base font-normal">
Hello World
</div>
</div>
</a>
<img class="absolute top-0 object-cover w-full h-full" src="https://picsum.photos/seed/2/1920/1080/">
</ol>
but it has at the edges black corners depending on the image itself, and the only way to remove it as I discovered was to remove object-cover w-full h-full
but I need them because in small screens it gets shrunk and shows a gray background.
is there a work around while keeping the same image appearance?
Related
I'm trying to create a custom shape that has a triangle that overflows on the square left side.
I've tried to use absolute and relative positions to achieve it by putting the square behind it but then it hides the spans on the main square. How can I do it?
Shape that I'm trying to achieve
My code:
<div class="h-96 p-6 bg-white relative rounded-3xl border-3 border-white shadow-sm transition ease-in-out hover:scale-110">
<div class="flex justify-between">
<i class="fa-solid fa-gem text-4xl text-secondary"></i>
<div class="absolute -top-5 right-8 flex flex-col items-center p-4 bg-blue">
<span class="text-purewhite font-semibold text-3xl">25€</span>
<span class="text-gray-200 font-semibold">for month</span>
</div>
<!-- <span class="text-3xl text-primary font-medium">Base</span> -->
</div>
</div>
This is what my current UI looks like
Already written in the top
I am trying to move the rectangle to right to align it with image but when i do it there is a scroll bar below and i want to remove it
<section class="relative ">
<div class="container flex flex-col-reverse lg:flex-row items-center gap-12 mt-14 lg:mt-28">
<!-- Content -->
<div class="flex flex-1 flex-col items-center lg:items-start">
<h2 class="text-bookmark-blue text-3xl md:text-4 lg:text-5xl text-center lg:text-left mb-6">
A Simple Bookmark Manager
</h2>
<p class="text-bookmark-green text-lg text-center lg:text-left mb-6">
A clean and simple interface to organize your favourite websites. Open a mew tab and see it load instantly. Try it
for free.
</p>
<div class="flex justify-center flex-wrap gap-6">
<button type="button" class="btn btn-purple hover:bg-bookmark-white hover:text-black">Get it on Chrome</button>
<button type="button" class="btn btn-white hover:bg-bookmark-purple hover:text-white">Get it on Firefox</button>
</div>
</div>
<!-- Image -->
<div class="flex justify-center flex-1 mb-10 md:mb-16 lg:mb-0 z-10">
<img class="w-5/6 h-5/6 sm:w-3/4 sm:h-3/4 md:w-full md:h-full" src="/public/imgs/hero-bg.png" alt="" srcset="" />
</div>
</div>
<!-- Rounded Rectangle -->
<div
class="hidden md:block overflow-hidden bg-bookmark-purple rounded-l-full absolute h-80 w-2/4 top-32 right-0 lg:-bottom-28 lg:-right-36"
></div>
</section>
attached img for reference
https://prnt.sc/5Cf7y_5rUabl
overflow-hidden has to be applied to the container element (i.e. the parent), not to the element which you want to be cut off when going out of its container.
If you cannot apply overflow-hidden to the container for some reason, add another layer element between the original container and the element in question (i.e. a child of the original container, but at the same time parent of the to-be-cut element) and apply overflow-hidden to that inserted element.
So I have an Image card that I want to place an element to the bottom right of the image.
I'm using the TailwindCss aspect ratio plugin.
That Close X needs to be moved to the bottom-right side of the Image.
<div class="mt-5 grid grid-cols-2 gap-3 px-3">
<div class="aspect-w-3 aspect-h-4">
<image
src="http://unsplash.it/500/500?random&gravity=center"
alt="Profile Image"
class="rounded-md"
layout="fill"
/>
<div class="absolute bottom-2 right-0 text-white">X</div>
</div>
</div>
This is a Codesandbox demonstrating the problem
Since the TailwindCss aspect ratio plugin uses padding and 0 height, position absolute will not work as intended. So we can use flex to our advantage.
<div class="mt-5 grid grid-cols-2 gap-3 px-3">
<div class="flex aspect-w-3 aspect-h-4">
<image
src="http://unsplash.it/500/500?random&gravity=center"
alt="Profile Image"
class="rounded-md"
layout="fill"
/>
<div class="flex items-end justify-end p-5 text-white">X</div>
</div>
</div>
Working Solution:
https://codesandbox.io/s/morning-morning-ggr841?file=/public/index.html
you just need add relative class in div parent of image and add w-full class in image element, because width of image will be fit with width of div parent.
<div class="mt-5 grid grid-cols-2 gap-3 px-3">
<div class="aspect-w-3 aspect-h-4 relative">
<image
src="http://unsplash.it/500/500?random&gravity=center"
alt="Profile Image"
class="rounded-md w-full"
layout="fill"
/>
<div class="absolute bottom-2 right-0 text-white">X</div>
</div>
</div>
You just need to add a relative class to the div with the aspect ration styles.
<div class="mt-5 grid grid-cols-2 gap-3 px-3">
<div class="aspect-w-3 aspect-h-4 relative">
<image src="https://unsplash.it/500/500?random&gravity=center" alt="Profile Image" class="rounded-md" layout="fill" />
<div class="absolute bottom-2 right-0 text-white">X</div>
</div>
</div>
https://play.tailwindcss.com/7yFSnphcyq
EDIT
Updated answer that does not require the aspect ratio plugin and uses arbitrary values instead aspect-[3/4]. It also replaces the deprecated <image> tag which I would not recommend you use.
<div class="mt-5 grid grid-cols-2 gap-3 px-3">
<div class="relative aspect-[3/4]">
<img src="https://unsplash.it/500/500?random&gravity=center" alt="Profile Image" class="rounded-md w-full h-full" />
<div class="absolute bottom-2 right-0 text-white">X</div>
</div>
</div>
https://play.tailwindcss.com/TLAPFmRbZr
I got some starter code from a tutorial and I've been struggling to set the correct size. I've tried to find solutions via documentation but I feel like I'm missing something very basic. The issue that I am having is that the size of the box changes based on the content that is inside. I'd like a definitive size set regardless of the inside content. This is my code for the section:
<div className="flex flex-wrap -m-4">
{projects.map((project) => (
<a
href={project.link}
key={project.image}
rel="noopener noreferrer"
target="_blank"
className="flex w-1/2 h-full p-4">
<div className="flex relative">
<img
alt="gallery"
className="absolute inset-0 w-full h-full rounded-2xl object-cover object-center border-4 border-white"
src={project.image}
/>
<div className="px-8 py-10 relative z-0 w-full rounded-2xl border-4 border-gray-800 bg-gray-900 opacity-0 hover:opacity-100">
<h2 className="tracking-widest text-sm title-font font-medium text-orange-700 mb-1">
{project.subtitle}
</h2>
<h1 className="title-font text-lg font-medium text-white mb-3">
{project.title}
</h1>
<p className="leading-relaxed">{project.description}</p>
</div>
</div>
</a>
))}
</div>
Thank you!
On your a tag you have className="flex w-1/2 h-full p-4"> updating the h-full to be the specified height that you want should do the trick. The tailwind numbers will provide a value in em I believe. To get these to be a px value you can write the style like this: h-[50px] but include your desired height in the square brackets instead of teh 50px.
I am using Tailwind and I made this div:
The problem is that it looks like this when I shrink it down:
With white-space: nowrap it goes out of the div.
I am not able to fix this issue. However, I have made it go into columns when it goes below md screen however not sure how I can stop it from making another line when resolution changes.
Code:
<div className='bg-gray-1000 rounded shadow border border-opacity-50 text-white flex flex-col lg:flex-row w-7/12 mx-auto justify-between p-2 mb-2 items-center md:space-x-16 whitespace-nowrap'>
<div className='bg-primary rounded w-14 h-14 flex items-center'>
<img src={props.logo}/>
</div>
<div className='flex flex-col flex-grow'>
<div>{props.title}</div>
<div className='flex'>
<div><img className='w-6 mt-1' src={props.flag}/></div>
<div><FaInfoCircle className='inline ml-2 text-xl'/></div>
<div><button className={`ml-2 rounded px-4 py-0 text-sm uppercase bg-${props.color}-600`} disabled>{props.mode}</button></div>
</div>
</div>
<div className='flex flex-col'>
<div><FaCalendar className='inline mr-2 text-xl'/> {props.date}</div>
<div className='mt-1'><FaClock className='inline mr-2 text-xl'/> {props.time}</div>
</div>
<div className='flex flex-col'>
<div> <FaUsers className='inline mr-2 text-xl'/> {props.vs}</div>
<div className='mt-1'><FaUsers className='inline mr-2 text-xl'/> {props.slots} Slots</div>
</div>
<div className='flex flex-col md:pr-4'>
<div><AiFillDollarCircle color='green' className='inline mr-2 text-xl'/></div>
<div className='mt-1'><AiFillTrophy className='inline mr-2 text-xl md:text-2xl'/> {props.prize}</div>
</div>
</div>
the best solution for you if you don't want to make the fonts smaller, IMO would be: adding a wrapper on three columns at the right and making it a flex with justify-content: space-between.
It will adjust the gaps according the space left for use.
seems your title at the left content is dynamic and it can get really long, try limiting text width and using text-overflow: ellipsis on it. otherwise you cannot fit long text beside other content.