const Product = ({product}) => {
return (
<div className="rounded shadow flex-col justify-center overflow-hidden">
<img className="" src={product.image} />
<span className="block h-16">{product.name}</span>
<span className="block">{product.price}</span>
<button className="px-4 py-2 my-2 bg-green-200 rounded block">Add to Cart</button>
</div>
)
}
This is a card component in React using Tailwind CSS.
I cannot get the items to be centered in the card.
I used flex-col so the direction is now vertical and tried justify-center as well as items-center with tailwind but it doesn't seem to be moving anything.
If you use flex-col doesn't the axis get swapped so you need to use align-items: center to make it vertically centered?
The justify-content CSS property aligns on the current flex-direction axis, while the align-items CSS property aligns on the axis perpendicular to the current flex-direction.
Therefore, if the container has flex-direction set to column (.flex-col), you need to use .items-center (in CSS: align-items: center) to center its children horizontally.
However, if the centered child is block level, its text might still be left-aligned even though the element, (being a 100% width box) is centered in the column, in which case you'll need to use text-align: center (.text-center) on the child to horizontally align its contents.
For an in-depth article on flexbox, I recommend A complete guide to flexbox.
Related
I have animations on titles. One is at the bottom of the screen, and we don't need to scroll to see it.
Here is my code :
<section className='relative px-5 lg:px-10'>
[...]
<h2 data-aos='fade-right' data-aos-duration="700" data-aos-delay="400" className='mt-12 mb-4 flex text-2xl font-bold text-lightBlack'>[...]</h2>
[...]
<h2 data-aos='fade-right' data-aos-duration="700" data-aos-delay="400" className='mb-4 flex text-2xl font-bold'>[...]</h2>
[...]
Problem : The title at bottom of screen does not display until I scroll. I would like it so be displayed and animated when the page load like the others h2.
How can I do this ?
Found the solution, in case it helps. Setting an offset to trigger when the animation start did the job :
AOS.init({
offset: 20,
});
This means : when the target element is at 20px from bottom of screen, trigger animation.
Hi All,
I am looking for a responsive way using TailwindCSS to bind the outer card component to the viewport.
I've tried w-screen and h-screen, however they don't ensure that the card component remains in view across differing window sizes.
I want to get rid of the white space around the card.
Any suggestions are much appreciated.
Thanks,
Brandon
import BlogPost from './BlogPost';
const CardDisplay = () => {
return (
<div class="object-cover w-screen relative bg-white rounded-xl shadow-md overscroll-contain overflow-hidden ">
<div class="md:flex">
<div class="lg:shrink-0">
<img class="h-full w-full object-cover md:h-full md:w-64" src="/img/store.jpg" alt="Man looking at item at a store"></img>
</div>
<div class="p-32">
<div class="uppercase tracking-wide text-sm text-indigo-500 font-semibold">Case study</div>
<BlogPost/>
<BlogPost/>
<BlogPost/>
</div>
</div>
</div>
)
}
export default CardDisplay;
I have a nav with tabs.
But because it has a lot of tabs the user needs to scroll right to see them all.
The issue is on first load the user might not know this and think what is shown is all the tabs.
So I want to show a scrollbar on it all the time.
<nav
className="-mb-px flex space-x-8 overflow-x-auto"
aria-label="Tabs"
>
I have tried:
<nav
className="-mb-px flex space-x-8 overflow-x-scroll"
aria-label="Tabs"
>
But it did nothing.
I would also like to style the scrollbar with a smaller height and a different main and background color for it if possible.
The nav itself exists inside:
<div className=" pb-3 lg:fixed z-10 bg-white grid grid-cols-1 mr-16 ">
Thank you
For the scrollabar to show all the time,Use overflow-x-scrollAnd Make sure you add the fixed width to the parent element.
For styling scrollbar ,Tailwind CSS doesn't provide a built-in way . However, you can use the various ::-webkit-scrollbar pseudo-elements to style it.
so add the following in your main index.css file
#layer components {
.scrollbar::-webkit-scrollbar {
width: 15px;
height: 15px;
}
.scrollbar::-webkit-scrollbar-track {
border-radius: 100vh;
background: #f7f4ed;
}
.scrollbar::-webkit-scrollbar-thumb {
background: #e0cbcb;
border-radius: 100vh;
border: 3px solid #f6f7ed;
}
.scrollbar::-webkit-scrollbar-thumb:hover {
background: #c0a0b9;
}
}
So the final code goes like:
<div className=" pb-3 lg:fixed z-10 grid grid-cols-1 mr-16 w-64 ">
<nav
className="-mb-px flex text-green-400 space-x-8 overflow-x-scroll scrollbar"
aria-label="Tabs"
>
<div className="mx-4">Item</div>
<div className="mx-4">Item</div>
<div className="mx-4">Item</div>
<div className="mx-4">Item</div>
<div className="mx-4">Item</div>
</nav>
</div>
Final output (with custom styling of the scrollbar)
I am using React With Tailwind
I need to Apply same Gradient to Navbar as well as Sidebar
but applying gradient on both give different flow.
Please give me solution!
<navbar className="flex h-16 w-full bg-gradient-to-r from-gray-800 to-blue-800 justify-center"></navbar>
<sidebar className='flex absolute h-full w-1/4 bg-gradient-to-r from-gray-800 to-blue-800'></sidebar>
If you can make sure your navbar is 100vw, then you can add Pseudo-element to the sidebar and add gradient background to it. If there is a vertical scrollbar, it may shift the gradient a bit. You can apply the same trick to the navbar to avoid this behavior, but overflow:hidden may affect some overflow element like menu dropdown. In this case, you may nest another full width, height, absolute div then add Pseudo-element into it in your navbar.
<div className="flex h-16 w-full justify-center bg-gradient-to-r from-gray-800 to-blue-800 overflow-y-scroll"></div>
<div className="relative flex h-full w-1/4 overflow-hidden from-gray-800 to-blue-800 before:h-full before:absolute before:w-screen before:bg-gradient-to-r before:content-[''] before:-z-10"></div>
Code can be found here
I'm trying to do the infamous center operation both vertical and horizontal and have sorta succeeded in doing so.
I'm trying to render a simple react component on my page that will show a 404 message. I want this message to be centered. The way I managed to do this some whitespace is leftover resulting in vertical scroll bars showing up. Ofc I could get rid of them using something like overflow-hidden, but surely there must be a way to center this message perfectly just using a better structure or certain bootstrap classes.
Here is my component:
const NotFoundPage = () => {
return (
<div>
<NavbarComp />
<div className="d-flex align-items-center justify-content-center text-center min-vh-100">
<div>
<h3 className="m-4">
<Badge variant="primary">404</Badge> Page not found...
</h3>
<Link to="/">
<Button variant="secondary">Go to main page</Button>
</Link>
</div>
</div>
</div>
);
};
In the end, I don't care that the scrollbars appear but it bothers me that this positional issue keeps occurring for me in some form or another and I wanna learn to put an end to this :)
You have already figured out how to center your "Not Found" message. What's messing it up for you is the Navbar, which you can test by taking it out. You will notice that the scroll bars disappear.
This class min-vh-100 gives the flex box below the Navbar the height of 100% of the viewport, which avoids adding any scrolls bars. The issue is that Navbar barges in and throw the page off blalance by attaching itself to the top. So the amount of srolling is exactly the height of the Navbar and since it's empty, there is very little scrolling.
An intutitive solution is to put your Navbar INSIDE the flex box. But that won't work in your case, because of how your flex box adjusts items. So I will give you a simpler solution, which should be viewed as more of a work-around.
Bootstrap does not come with classes such as min-vh-95 or min-vh-80, but luckily they are super easy to create. You can add this class to your custom CSS:
.not-found-container {
min-height: 95vh !important;
}
(or you could just stick to the naming convention and name it min-vh-95 for example)
And then change the flex box classes from:
<div className="d-flex align-items-center justify-content-center text-center min-vh-100">
to
<div className="d-flex align-items-center justify-content-center text-center not-found-container">
Here is a Sandbox to illustrate the idea: https://codesandbox.io/s/peaceful-sanne-e3m9w?file=/src/App.js
Obviously the min-height value would need to be adjusted based on the height if your Navbar.