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;
Related
I have a couple of images, and in mobile screen view I am using snapping to show 1 image at a time and the user can scroll right to the next image.
I want to put some pagination dots under the image to show the user that he/she can scroll to the right for more image.
const NUMBER_OF_PAGES = 4
const [currentPage,setCurrentPage] = useState(1)
return(
<>
<div className="flex flex-row overflow-scroll no-scrollbar snap-x snap-mandatory">
<img src={screen1} alt="Playstore image1" className='flex-none w-[100%] h-[100%] object-contain rounded-sm snap-center snap-always'/>
<img src={screen2} alt="Playstore image2" className='flex-none w-[100%] h-[100%] object-contain rounded-sm snap-center snap-always'/>
<img src={screen3} alt="Playstore image3" className='flex-none w-[100%] h-[100%] object-contain rounded-sm snap-center snap-always'/>
<img src={screen4} alt="Playstore image4" className='flex-none w-[100%] h-[100%] object-contain rounded-sm snap-center snap-always'/>
</div>
<div>
{Array.from({ length: NUMBER_OF_PAGES }, (_, i) => i + 1).map(item=>(
<div className='w-5 h-5 bg-slate-600 rounded-full shadow-md mx-4'/>
))}
</div>
</>
)
How can I track the currently selected image, and change the styling depending on that?
You can solve this by conditionally adding a class depending on whether the index of each pagination dot is equal to the currently selected page:
{Array.from({ length: NUMBER_OF_PAGES }, (_, i) => i + 1).map((item, index)=>(
<div className={`w-5 h-5 ${currentPage == index ? "bg-blue-600" : "bg-slate-600"} rounded-full shadow-md mx-4`}/>
))}
If you update your code with the JSX snippet above, the currently active pagination dot (ie: the dot matching the current page) will be styled differently to the non-active dots.
You can update this as you see fit; for the purposes of this example, I styled the active pagination dot to be blue. As the user moves through the images, the active pagination dot will then update.
I'm making a website using react and tailwind. I want to add a vertical scrollbar to a list in a section of my page, but when I do, the bullets disappear. Why is this happening?
<ul className="list-disc overflow-y-auto h-80 space-y-3 text-sm w-full sm:text-md items-start">
{experience.points.map((point, i) => (
<li key={i}>{point}</li>
))}
</ul>
I've tried using overflow-y-scroll instead but it has the same effect. I've also tried adjusting the margins of the list container but that doesn't work either. The bullets appear when I don't use any overflow utility. For now, I've just added them to each list-item string manually but I'm curious as to why this would happen.
what you are missing is the css rule that sets the counter inside or outside
in tailwind 3 it's the class list-inside
plain css: list-style-position: inside;
being it set outside by default, setting the overflow cuts them out
Try this -
<ul className="list-disc overflow-auto h-80 space-y-3 text-sm w-full sm:text-md items-start p-2">
{experience.points.map((point, i) => (
<li key={i} className='list-disc p-2'>{point}</li>
))}
</ul>
I am trying to apply a style to my links when they are focused. But it does not work. I am using tailwindcss (on a React js application).
Here is my code :
<Link to='/clients' className=''>
<div className="text-2sm font-semibold flex items-center mb-4 hover:bg-[#BE97C6] focus:bg-[#BE97C6] px-2 py-1 rounded-full transition ease-in-out ">
<IoPersonCircleSharp className="text-xl mx-1"/>
<p className="">Clients</p>
</div>
</Link>
Can you, please, help me to solve it ? Thanks you !
Your Link is getting focused and not the div.
Try to set group class on Link and then group-focus:bg-[#BE97C6] on the div.
I am trying to position an image over image. Basically I want the image to fit correctly at the chest area position on the hoodie, but it's not coming out properly. How do I do it in a clean way that is responsive as well?
My code:
<div className="basis-1/2">
<div className="max-w-lg container mx-auto">
<img className="w-full" src={`${router.basePath}/assets/images/Hoodie black label.jpg`} alt="Empty Hoodie"/>
<div className="place-items-center">
<img className="w-1/6 absolute top-1/3 right 1/4 place-items-center h-40 w-40" src={urlvalue} alt="Picked NFT to Print"/>
</div>
</div>
</div>
Thanks in advance!
You can overlay an image over another like this,
<script src="https://cdn.tailwindcss.com"></script>
<div class="relative mix-blend-lighten">
<img src="https://m.media-amazon.com/images/I/61ktWbf0z4L._UX679_.jpg" alt="BannerImage" class="absolute h-[] w-full object-cover object-right " />
<img src="http://codeskulptor-demos.commondatastorage.googleapis.com/GalaxyInvaders/back04.jpg" alt="BannerImage" class="absolute h-[20vh] w-[30vh] object-cover object-right mx-44 mt-44 sm:mx-72 sm:mt-72" />
</div>
But since both the image had absolute position, then you have to add different margins for the upper image for each screen breakpoints, so that it lies always on chest area of hoodie image.
I want to let rows intercalate each other, as represented below:
The problem is at the moment I can't intercalate the rows, so I end up having a layout that looks like this:
Or a more real example of what I have:
I tried a lot of ways, including Grid Auto Flow, Inline Grid and also making the child Inline Block but nothing seem to work. From what I inspected each column is as big in height as the one in right, which I don't want.
I can't think of a solution to achieve the desired output using grid layout.
A possible way to do it would be using w-1/2 to set the width of both columns and to absolutely position the second column at the top right corner of the parent. Please check the code snippet below for example.
<link href="https://unpkg.com/tailwindcss#^2/dist/tailwind.min.css" rel="stylesheet">
<div class="relative h-full w-full">
<div class="w-1/2">
<div class="w-full h-20 bg-blue-400"></div>
<div class="w-full h-10 bg-yellow-400"></div>
<div class="w-full h-36 bg-red-400"></div>
</div>
<div class="absolute right-0 top-0 w-1/2">
<div class="w-full h-40 bg-green-400"></div>
<div class="w-full h-36 bg-indigo-400"></div>
</div>
</div>