<div class="w-auto h-30 m-5 overflow-hidden flex justify-center">
<div>
<img class="object-fit" src="https://fs.easybanners.com/Templates/795/TemplateIcon/795.png" alt="" style="height: 50vh;">
<button class="bg-indigo-500 rounded absolute transform -translate-y-32 translate-x- px-12" style="transform:translateX(10px);"> Contact Us </button>
</div>
</div>
I'm currently using TailWindCSS.
I'm trying to make like a banner for my demo pet shop website.
The problem is that the button gets transported down when I added a style attribute in the button about translate. The button is absolute. Could somebody explain why does this happen in tailwind?
This is what I made so far:
<div class="w-auto h-30 m-5 overflow-hidden flex justify-center">
<div class="">
<img class="object-fit" src="images/banner/PetShopServicesBanner.png" alt="" style="height: 50vh;">
<div class="float-right transform -translate-y-14 -translate-x-60">
<button class="hidden md:block md:w-52 py-2 bg-orange-500 text-gray-900 rounded absolute">
<p> Make a pet groom schedule </p>
</button>
</div>
</div>
</div>
Related
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.
I am using Flex in tailwind in one my main div container to align the items inside of it horizontal
but somehow the items are of different sizes in the row the image link is below any fixes for it?
i have tried using height utility class but it just messes up the entire page.
[1]: https://i.stack.imgur.com/Yjs51.jpg
HOME
ORDERS
MENU CARD
FAQs
ABOUT
Butter Chicken
If you haven't tried butter chicken, you don't know what you'r missing.
</div>
</div>
</a>
<a href="butterchicken.html">
<div class="max-w-sm rounded overflow-hidden shadow-lg justify-center">
<img class= "w-full" src="images/download (1).jpg" alt="malai-chicken">
<div class="px-6 py-8">
<div class="font-extrabold text-xl pb-3">Malai Chicken</div>
<div>
<p class=" font-serif text-base mb-3">Clean as white and appetizing.</p>
</div>
</div>
</div>
</a>
</a>
<a href="butterchicken.html">
<div class="max-w-sm rounded overflow-hidden shadow-lg justify-center">
<img class= "w-full" src="images/download (2).jpg" alt="Shahi Paneer">
<div class="px-6 py-8">
<div class="font-extrabold text-xl pb-3">Shahi Paneer</div>
<div>
<p class=" font-serif text-base mb-3">First Pick of Royales.</p>
</div>
</div>
</div>
</a>
</div>
I'm using tailwindcss. I have a flexbox container and a login button inside it.
The button looks like it's being stretched.
<nav font-am class="m-6 text-xl">
<div class="flex flex-row justify-between container">
<div>
<img src="./img/Logo.png">
</div>
<div class="flex flex-row">
<img src="./img/AccountLog.png">
<p class="hidden md:flex">My Account</p>
</div>
<div class="flex flex-row">
<img src="./img/love_symbol.png">
<p class="hidden md:flex">My List</p>
</div>
<div class="flex box-border flex-row">
<img src="./img/LockLogo.png">
<button class="bg-darkPink hover:underline text-white font-bold py-2 px-4 rounded-full" role="button">Sign In</button>
</div>
</div>
</nav>
Here is how it looks with the logo:
And the button is displayed normally when I delete the logo:
What should I do to keep the button looks normal when the logo is on. Is the logo taking up too much space or something?
You've set your button as a stretched flex element in a flex row. You can do one of several things to fix it:
Align the row elements to center rather than stretching them. Here, '.self-center` seems to work nicely, though you could do it at the row level also.
Wrap the button in a div. This will make the div the stretched element, and you'll need to center the button vertically with other styles.
Both solutions are shown here.
.bg-darkPink {
background: pink;
}
<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"
/>
<nav font-am class="m-6 text-xl">
<div class="flex flex-row justify-between container">
<div class="flex box-border flex-row">
<img src="https://via.placeholder.com/80">
<button class="bg-darkPink hover:underline text-white_disabled font-bold
py-2 px-4 rounded-full self-center">Flex class</button>
</div>
<div class="flex box-border flex-row">
<img src="https://via.placeholder.com/80">
<div class="flex flex-column items-center">
<button class="bg-darkPink hover:underline text-white_disabled font-bold
py-2 px-4 rounded-full">Flex div</button>
</div>
</div>
</div>
</nav>
You can give the div which is the parent of the link and the button the tailwind classes grow-0 and shrink-0 to prevent it from changing shape. Set items-center to align the lock icon vertically with the button.
Don't let the logo disappear with display:none, do it with opacity:0
I am trying to position icon to the left side of a Link and have the text centered at the same time.
<div className="max-w-screen-2xl mx-auto sm:px-6 lg:px-8">
<Link
href="#"
className="px-6 py-3 mt-2 flex justify-center text-center"
>
<DocumentTextIcon
className="ml-1 mt-1 -mr-1 h-10 w-10"
aria-hidden="true"
/>
<p>
Some random text </p>
</Link>
</div>
With this the icon is in the middle with the text. I can push to the right with margin left but then it is not dynamic. Any idea how I can push the icon to the left and it remains dynamic?
Try this way:
<div class="my-10 flex items-center justify-center bg-gray-100 w-40">
<div class="flex-1">
<span class="mr-auto">icon</span>
</div>
<p>text</p>
<div class="flex-1"></div>
</div>
<div class="my-10 flex items-center justify-center bg-gray-100 w-80">
<div class="flex-1">
<span class="mr-auto">icon</span>
</div>
<p>with long text</p>
<div class="flex-1"></div>
</div>
Demo
I'm trying to learn tailwind-css or I would say learning css where I'm struggling with the position of elements. Working on Vue js components.
I achieved the designing few of the elements so far:
I want to add some shapes or designs inside the banner/dark-blue area and then would add some widget-box inside of it. My code look something like this:
<div class="bg-white block">
<nav-bar></nav-bar>
<div class="hidden md:block w-2/5 top-0 left-0">
<img src="/nits-assets/images/body_shape.png" alt="shape" align="left">
</div>
<div class="hidden md:block">
<img src="/nits-assets/images/body_shape_2.png" alt="shape" align="right">
</div>
<div class="block">
<div class="absolute w-full top-0 pl-12 pr-12 pt-40">
<slider></slider>
<div class="flex justify-around">
<card></card>
<card></card>
<card></card>
<card></card>
</div>
</div>
</div>
<div class="block">
<div class="bg-white overlflow-hidden">
<div class="relative">
<img src="/nits-assets/images/screenshot_banner.png" alt="screenshot_banner" align="center">
<img class="absolute top-0 left-0" src="/nits-assets/images/pattern_1.png" alt="banner" align="left">
</div>
</div>
</div>
<feature></feature>
</div>
For reference to the components code: https://github.com/nitish1986/sample_website
My approach was to fix position of the parent element or make it relative then position the shapes with absolute positioning respective to its parent element but whenever I try to put absolute position the shapes reaches to the top of the website. It is not taking respective positioning
<div class="bg-white overlflow-hidden">
<div class="relative">
<img src="/nits-assets/images/screenshot_banner.png" alt="screenshot_banner" align="center">
<img class="absolute top-0 left-0" src="/nits-assets/images/pattern_1.png" alt="banner" align="left">
</div>
</div>
How can achieve this positioning? I want to achieve something like this:
Any better approach into it are most welcome. Thanks.
I did a lot of research work on my issue, I found out that my absolute element is taking all the space needed for me. I came to know that I have to define an empty space or define the height of the div which is exactly consumed by my absolute elements. Since in my code I have a very long absolute element, so the only thing can cover is empty div space.
<div class="bg-white block">
<nav-bar></nav-bar>
<div class="hidden md:block w-2/5 top-0 h-auto">
<img src="/nits-assets/images/body_shape.png" alt="shape" align="left">
</div>
<div class="hidden md:block h-auto">
<img src="/nits-assets/images/body_shape_2.png" alt="shape" align="right">
</div>
<div class="block bg-white h-screen">
<div class="relative">
<div class="absolute w-full top-0 pl-12 pr-12 pt-40">
<slider></slider>
<div class="flex justify-around">
<card></card>
<card></card>
<card></card>
<card></card>
</div>
</div>
</div>
</div>
<div class="block mt-48 p-56">
<div class="p-2 w-full h-100"></div>
</div>
<feature></feature>
<preview></preview>
<about-us></about-us>
</div>
So in my code I kept empty space with:
<div class="block mt-48 p-56">
<div class="p-2 w-full h-100"></div>
</div>
Hope this helps someone. Thanks