Below is a schematic layout of one of the pages of my site. And also code FirstPage.tsx export function FirstPage() { return ( <div> <div> <Sidebar /> </div> <div className="w-[100vw]"> <MainPage /> </div> </div> ); } And also code for…
I have a parent div which has a background image (an SVG with just a diagonal line). My child div will have some background-color depending on the value of a variable. I want to show the parent background image (diagonal…
The first button isn't respecting the height of the div that's surrounding it, causing the image to poke out of the div. <div class="bg-card text-card-foreground overflow-hidden rounded-xl border shadow-sm animate-fade-in h-[330px] w-64"> <div class="flex items-center justify-center gap-2 h-36 p-0"><button class="inline-flex…
I have this code that shows a video on mobile. It just shows a play button without the video behind it. When I press on play the video starts normally but I want something behind it. This is what it…
I'm contributing to a project and i'm creating a footer for a landing page. The red box is the dimension of the container i'm having trouble with. I don't want to center the entire div, because i like the current…
please anyone knows how I can clip a div to get the green shapes in the attached image, using clip-path or anything else Attached Image here I have tried using clip path but I am not getting the desired results.…
where the error is occurred? this is my end points: theme: { screens: { 'mobile-sm': '320px', 'mobile-md': '481px', 'tablet': '769px', 'desktop-sm': '1025px', 'desktop-md': '1201px' }, I need to apply style as, flex-col in the mobile view and flex-row in desktop…
I'm trying to make a custom triangle slider. This is what I'm trying to achieve: So far, I'm able to make this shape, but as I slide it, the blue fill covers the shape: {/* track */} <div className={"absolute h-48…
I am trying to build react native expo app using npx create-expo-app -e with-router-tailwind After creating the project and running I get a tailwind build failed error. I tried node D:ProjectsChat 101 (APP)chat-101-masternode_modulestailwindcsslibcli.js --input "D:ProjectsChat 101 (APP)chat-101-mastersrcglobal.css" --output "D:ProjectsChat 101…
I started my Tailwind journey with react, but I faced one problem. I hate inline CSS because of its poor code readability. So, is there any way to write Tailwind CSS in another separate file and import it into my…