I've got this html <ul class="flex gap-3"><li class="after:content-[''] after:block after:w-0 after:h-2 after:bg-black hover:after:w-full transition duration-1000 ease-in-out"><a href="/" class="text-lg font-bold text-black uppercase" > home </a></li></ul> on hover I'd like to apply transition for a nice animation but there is no animation…
Picture of corresponding example I want to move the Hello text, next to the border of CapName instead of underneath it. Any ideas? <div className='h-screen dark:bg-gray-900 grid items-center justify-items-center'> <div className='h-20 w-3/5 dark:bg-gray-500 border-2'> <div> <div className='border-2 p-2 w-2/5 h-full…
I am trying to make a chat ui using tailwind css. What i am trying to create is a sidebar annotated with a message list view and lastly, a input to send message. I am unable to get the desired…
i have a normal modal, like the kind that you have for sign up forms and stuff. on the modal i have a main content div and a side bar div. my plan is to have the side bar div…
I had a similar question previously. I'm still having problems so changed the question. I'll summarize suggested responses and why they did not work. When I create a new project in laravel and add some tailwind css, the styles are…
I need to make business section in react project using Tailwind css so if this section is popular the background must color changes,so I need to make background color is dynamic in this line <div className{`flex flex-col p-6 mx-auto max-w-lg…
I'm quite new to Tailwind and I need to make 2 rows of divs: Row 1 needs 4 divs of 1/4 width each Row 2 needs 2 divs, 1 of 3/4 and another with 1/4 width, the bigger one will…
I am a new learner and have only been developing for about 4 months now on react. I was building a simple portfolio for myself and came in to a error. I have created a toggler and a button and…
im facing Uncaught TypeError: Cannot destructure property 'basename' of 'React2.useContext(...)' as it is null. in the link component of the code import React, { useEffect, useState } from 'react'; import { Link } from 'react-router-dom'; import { styles } from…
so i have a code that look like this <div className='w-[50%] h-full flex items-center justify-center flex-col'> <div className='container grid grid-cols-2 grid-rows-4 p-10 gap-5 w-full h-full'> <div className='row-span-1 border-2 border-black'>1</div> <div className='row-span-2 border-2 border-black'>2</div> <div className='row-span-2 border-2 border-black'>3</div> <div className='row-span-2 border-2…