I wanted to place an absolute element behind a relative element. I have mentioned the z-index and also the position for the respective elements but its still not working.
This is what i had tried. I am using tailwind css.
const Searchbar: React.FC<SearchbarProps> = ({}) => {
const [toggle, setToggle] = useState(false);
const [dropdown, setDropdownToggle] = useState(false);
return (
<form className={`search flex items-center basis-9/12 pl-5 z-20 relative ${toggle ? 'dark': ''}`} >
{/* ICON */}
<svg className="ico-svg" viewBox="0 0 20 20" width="20">
<path d="M20,8c0-4.4-3.6-8-8-8C7.6,0,4,3.6,4,8c0,1.9,0.6,3.6,1.7,4.9L0,18.6L1.4,20l7.1-7.1l-0.2-0.2 C6.9,11.6,6,9.9,6,8c0-3.3,2.7-6,6-6c3.3,0,6,2.7,6,6c0,3.3-2.7,6-6,6c-0.7,0-1.3-0.1-1.9-0.3L10,13.7l-1.5,1.5l0.4,0.2 c1,0.4,2.1,0.7,3.2,0.7C16.4,16,20,12.4,20,8z"></path>
</svg>
{/* INPUT */}
<input className='basis-9/12 pl-3 h-[48px] text-sm font-normal self-stretch'
onClick={() => setToggle(!toggle)}
type="text" name="search" id="search" placeholder='Search websites, elements, courses...'/>
<div className="dropdown flex items-center justify-end basis-3/12">
{/* TEXT */}
<p className='uppercase mr-9 font-light text-xs'>in</p>
{/* DROPDOWN */}
<button className={`flex items-center h-[48px] justify-between basis-6/12 px-5 ${dropdown ? 'active': ''}`} onClick={(e) => {
e.preventDefault();
setDropdownToggle(!dropdown)
}
}>
<p className="capitalize text-sm font-medium">inspiration</p>
<svg className="dropdown__arrow" viewBox="0 0 20 20" width="12">
<path d="M1.6,4.1c-0.4,0-0.9,0.2-1.2,0.5c-0.7,0.7-0.7,1.7,0,2.4l8.4,8.4c0.7,0.7,1.7,0.7,2.4,0L19.5,7 c0.7-0.7,0.7-1.7,0-2.4c-0.7-0.7-1.7-0.7-2.4,0L10,11.8L2.8,4.6C2.5,4.3,2.1,4.1,1.6,4.1z"></path>
</svg>
</button>
{/* DROPDOWN LIST */}
<div className={`dropdown__list capitalize px-5 pt-2 pb-5 text-sm font-normal ${dropdown ? 'active' : ''}`}>
<ul>
<li className='pt-3'>Inspiration</li>
<li className='pt-3 pl-3'>websites</li>
<li className='pt-3 pl-3'>elements</li>
<li className='pt-3 pl-3'>collections</li>
<li className='pt-3'>blog</li>
<li className='pt-3'>courses</li>
<li className='pt-3'>directory</li>
</ul>
</div>
</div>
{/* SUGGESTIONS */}
<div className="search__suggestions z-10 absolute">
</div>
</form>
);
}
This is how its behaving:
Actual behaviour
Instead of this:
Expected Behaviour
As you can see i have a form tag that is relative places and i also have a div with the class "search__suggestions" that is placed absolutely. I have also provided the appropriate index to the tags, but for some reason its not working. Anyone knows why its behaving this way?
I'm trying to recreate this with tailwindcss however when I implement this the hover effect is not working.
export default Home(){
return(
<a
href={item.href}
className="px-3 py-2 text-sm font-medium after:origin-center after:scale-x-0 after:border-b-2 after:transition-all after:duration-500 after:ease-in-out after:content-none hover:after:scale-x-100 hover:after:border-white"
aria-current="current item"
>
Item name
</a>
)
}
I created a working example using Tailwind following your desired result.
You can check the live demo here: stackblitz
The environment is installed following Tailwind official guide.
Hope this will help!
Example:
<div className="flex flex-col gap-6 justify-center items-center">
<a
href="#"
className="inline-block text-4xl text-slate-400 uppercase visited:text-slate-400 hover:text-slate-400 after:block after:origin-center after:scale-x-0 after:border-b-4 after:transition-all after:duration-500 after:ease-in-out hover:after:scale-x-100 hover:after:border-sky-500"
aria-current="current item"
>
Hover effect center
</a>
<a
href="#"
className="inline-block text-4xl text-slate-400 uppercase visited:text-slate-400 hover:text-slate-400 after:block after:origin-left after:scale-x-0 after:border-b-4 after:transition-all after:duration-500 after:ease-in-out hover:after:scale-x-100 hover:after:border-sky-500"
aria-current="current item"
>
Hover effect left
</a>
<a
href="#"
className="inline-block text-4xl text-slate-400 uppercase visited:text-slate-400 hover:text-slate-400 after:block after:origin-right after:scale-x-0 after:border-b-4 after:transition-all after:duration-500 after:ease-in-out hover:after:scale-x-100 hover:after:border-sky-500"
aria-current="current item"
>
Hover effect right
</a>
</div>
This is a react app .I want to add a linear gradient of 0.7 on the background image with bootstrap. But how?
<Carousel.Item>
<img className='banner-bg d-block w-100 bg-dark bg-gradient ' src='https://i.ibb.co/YQ8MmpM/hero-bg-1-1.jpg' ' />
<Carousel.Caption className='position-absolute top-0 start-0 text-start px-5 pt-5 mt-5 ms-5 '>
<h2 className='fw-bold display-4 px-5 '>
Get Your Amazing <br />
Car Solution
</h2>
<p className=' px-5'>Take payments online with a scalable platform that <br /> grows with your perfect business
</p>
<div className='lc-block d-grid gap-2 d-md-flex justify-content-md-start px-5'>
<a className='btn btn-danger px-4 me-md-2' href='#' role='button'>About Us</a>
<a className='btn btn-outline-secondary px-4' href='#' role='button'>Latest Projects</a>
</div>
</Carousel.Caption>
</Carousel.Item>
All you need to do is to add a .bg-gradient class to the element (a linear gradient will be added as background image to the backgrounds).
If you want to add in your custom CSS class,
Just add below line:
background-image: var(--bs-gradient);
You can target bootstrap gradient with below style in React:
style={{
backgroundImage: linear-gradient( 170deg, var(--bs-gradient), 'navy' )
}}
OR
Replace you image tag with below tag:
<img style={{backgroundImage:linear-gradient(170deg,var(--bs-gradient),'navy')}} className='banner-bg d-block w-100 bg-dark bg-gradient ' src='https://i.ibb.co/YQ8MmpM/hero-bg-1-1.jpg' ' />
If above code worked, change linear-gradient property values as per your requirement.
I'm using tailwind and Vue to make some reusable toggle component. Border of component is gray color, but plan is when I click on component, border will be red like on a image below (I'm using/trying using focus).
Problem is because I can use focus just on input and button, but I need focus on div tag
I have one div, inside is two paragraph and one input (type:checkbox). I tried with tabindex and it doesn't work, when I click in checkbox or input field (gray button) it doesn't focus. Only focuses when I click inside a component but not in checkbox field.
Code is
<template>
<div>
<div tabindex="1"
class="relative border border-gray-300 px-10 max-w-md mx-auto my-2 cursor-pointer rounded-lg px-5 py-4 rounded-lg border bg-white transition duration-150
ease-in-out placeholder:text-zinc-400 hover:bg-zinc-100 focus:border-transparent
focus:outline-none focus:ring disabled:opacity-50 motion-reduce:transition-none
dark:bg-zinc-900 dark:placeholder:text-zinc-500 dark:hover:bg-zinc-800" :class="[ error
? 'border-red-500 caret-red-500 focus:ring-red-500/50'
: 'border-zinc-300 caret-primary focus:ring-primary/50 dark:border-zinc-600 dark:focus:border-transparent',
]"
>
<div class="flex justify-between">
<div>
<h1 class="text-md font-semibold text-black">
{{ titleToggle }}
</h1>
<p class="inline text-md text-gray-500">
{{ subtitleToggle }}
</p>
</div>
<label class="switch my-auto">
<input
:value="toggleSwitch"
v-bind="$attrs" type="checkbox"
class="rounded-lg " :class="[
error
? 'border-red-500 caret-red-500 focus:ring-red-500/50'
: 'border-zinc-300 caret-primary focus:ring-primary/50
dark:border-zinc-600 dark:focus:border-transparent',]" #click="updateInput"
>
<span :class="[toggleSwitch ? 'bg-red-500 border-red-500' : 'bg-gray-300 border-gray-300',
]" class="slider round absolute cursor-pointer inset-0 border rounded-full"
/>
</label>
</div>
</div>
</div>
</template>
Is anyone have advice, or maybe different way how to do it ?
I don't really understand your question, but you may have a look at this from the tailwind documentation :
focus-within (:focus-within) : Style an element when it or one of its descendants has focus using the focus-within modifier:
<div class="focus-within:shadow-lg ...">
<input type="text" />
</div>
https://tailwindcss.com/docs/hover-focus-and-other-states#focus
I have an image
231x419
this size won't change, but the scale might.
I want to display a smaller profile image but only filling the circle with a part of the top of the image.
Basically just showing the circle part in the image above.
This circle area will be shown on a header.
Not sure what the best way to go about this, where the full image does not distort the header height etc.
My current circle image is:
<a href="#" className="block relative">
<img
alt="name"
src="/images/1.jpg"
className="h-10 mx-auto object-cover rounded-full w-10"
/>
</a>
I don't think this is quite what you wanted as I am not sure how it would handle different sizes. I can delete the answer or leave it here if it will help anyone.
I gave it a go using object-none and then a custom class that sets the object-position.
See how this looks,
https://play.tailwindcss.com/XnHzOUO2IO
<a href="#" className="block relative">
<img
alt="name"
src="https://i.stack.imgur.com/HgkK0.png"
className="object-none w-36 h-36 rounded-full custom-position" />
</a>
.custom-position {
object-position: 60% -3px;
}
In addition to #stickyuser's answer, you can avoid having custom class by using object-[59%_-4px] class.
Tailwind playground: https://play.tailwindcss.com/olB8hotsAX
<a href="#" className="block relative">
<img alt="name" src="https://i.stack.imgur.com/HgkK0.png" class="h-36 w-36 rounded-full object-none object-[59%_-4px]" />
</a>
It can be also done with background position:
<a href="#" className="block relative">
<div class="h-36 w-36 rounded-full bg-[59%_-4px]" style="background-image:url(https://i.stack.imgur.com/HgkK0.png)"></div>
</a>