I need help changing a button to look like an arrow is coming out of it to show that it is the active button. The button is wrapped in a card component.
Below is a code example:
<div className="float-container">
<div className="creator-container float-child">
<div>
<Card className="bg-mainBlue rounded-xl">
<CardContent>
<Button
className=" text-white font-nunito text mx-2 pr-35 "
onClick={() => onFieldAdd('textField')}
>
<TextFieldsIcon />
<p> Text Box</p>
</Button>
</div>
</div>
</div>
I am struggling changing the buttons appearance. My code is build in React using TypeScript. and I would like to mostly achieve this using css.
I have included a picture of my desired outcome.
Can anyone please help?
So you can make the ::before element. Set it to be display:block, then add it the backround:_mainBlue_ and transform:rotate(45deg). Dont forget to content:''. Then just play with the position.
Example:
https://codepen.io/daniel-bedn-/pen/zYWbeeP
Related
Im trying to get some advice on Tailwind with div positioning using custom media breaks. Currently at screens over 350px(xs) the homepage layout is flex with flex-col direction. Yet when I set it to flex-row (flex) for large screens over 1100px(lg), it remains as flex-col and one of the flex children is hiding the other.
When I test to see if my custom screens work by changing font-color at each break (xs-lg), it works. Meaning my screens are set up fine. It just seems like its not registering changes in positioning particularly with flex but also with padding interestingly.
Sorry if this is obvious but I have read the tailwind docs and since they work with color changes It means the breaks are set up right. So I'm probably just missing something obvious.
```javascript
export default function HomeHero(){
return(
<div className={styles.HeroContainer}>
<div className={styles.HeroText}>
<div className={styles.title}>Stay connected off-grid</div>
<div className={styles.text}>paragraph text</div>
<form className={styles.form} action="/send-data-here" method="post">
<input type="text" className={styles.input} name="first" placeholder="Email Address"/>
<input type="text" className={styles.input} name="last" placeholder="Password"/>
<div className={styles.Button}><button type="submit">Log In</button></div>
<div className={styles.forgot}><Link href="/forgotpassword">Forgot your password?</Link></div>
</form>
</div>
<div className={styles.HeroImage}></div>
</div>
)
}
const styles = {
HeroContainer: 'flex xs:flex-col lg:flex-col lg:min-h-screen',
HeroText: 'flex flex-col border-2 text-left xs:p-10 md:p-24 w-1/3 lg:mt-12 lg:pr-36 lg:pl-36',
HeroImage: 'flex w-2/3 bg-hero bg-center bg-contain bg-no-repeat bg-top-32 self-stretch min-h-[500px]'
}
At first I was stumped until I realized that the flex-col on HeroText wasn't doing anything without it being a flex container. Now that I'm looking at it and your example, I think that is the problem.
Your flex direction classes are on the container which is just setting the flex direction on the HeroText div. You need to move those flex direction utilities to HeroText. Here's a Tailwind Play example: https://play.tailwindcss.com/MmfOrXgVa0 (OLD LINK)
You probably also want to rethink the styles on HeroImage. Seems like you'd want to absolutely position that.
UPDATE BASED ON COMMENTS:
Your comment changes things. The flex-direction was being updated with your with the code you had. You still had some extra classes, but that didn't stop it from working. I believe, the real issue was around using lg:bg-hero. Unless you added that as something in your config, that class wouldn't do anything, and it wouldn't be connected to the lg breakpoint.
Also, you are defining flex-1 and widths on the two elements, and these are conflicting with each other with the flex-1 winning. Because of this, when it was full screen, the background was only 50% wide, and since your content wasn't wide enough to wrap, you weren't seeing it.
If you fix those things, you should be good to go. Here is a working example in Tailwind Play: https://play.tailwindcss.com/kF7mi27UUC
Also, here would be some updated classes for your JS. I added a few classes to the HeroImage class so that it would show up:
const styles = {
HeroContainer: 'flex flex-col lg:flex-row lg:min-h-screen',
HeroText: 'flex flex-col text-left xs:p-10 md:p-24 lg:w-1/3 lg:mt-12 lg:pr-24 lg:pl-24',
HeroImage: 'lg:w-2/3 bg-center border-2 bg-cover bg-top-32 self-stretch bg-black min-h-[200px]',
}
I was wondering if there is a way to chain multiple tailwind css classes on a single hover instance on an html element instead of using multiple hover instances.
For instance instead of this
<button class="hover:bg-blue-900 hover:text-white"></button>
whether you can have this or something else
<button class="hover:bg-blue-900:text-white"></button>
No there isn't. As from the docs(https://tailwindcss.com/docs/hover-focus-and-other-states), you can see they themselves add multiple classes for focus/hover.
However you can create reusable styles to counter this
Sadly it seems not. Maybe something that should be suggested to the team
I was trying to do something similar, i wanted the text to change color when hover the div.
searching in the docs i found the 'group' that helped me:
https://tailwindcss.com/docs/hover-focus-and-other-states#styling-based-on-parent-state
i tried different types of hover like:
hover:bg-green-600 text-gray-50
hover:[bg-green-600 text-gray-50]
hover:(bg-green-600 | text-gray-50)
Maybe you can try wrapping the button in a div and add the group class
my code before, did not work like this
<Link to='/home'>
<div className="p-2.5 mt-3 flex items-center rounded-md px-4 duration-300 cursor-pointer hover:(bg-green-600 text-gray-50)">
<span className="text-[15px] ml-4 text-gray-500 font-bold">Home</span>
</div>
</Link>
after using gruop
<Link to='/home' className='group'>
<div className="p-2.5 mt-3 flex items-center rounded-md px-4 duration-300 cursor-pointer group-hover:bg-green-600" >
<span className="text-[15px] ml-4 text-gray-500 group-hover:text-gray-50 font-bold">Home</span>
</div>
</Link>
with group when i hover the div it also change the span text color, like this the cursor don't need to be right on top of the word to make hover work.
but I still wish there was a way to put more than one class on the same hover, I hope they add it in the future...
hope it may help
I stumbled upon the same issue and was going to write a Tailwind plugin for that but it turns out that it's hard to mess with the rules they have set, you can only extend it by adding new variants and utilities but cannot do something like hover:(text-white bg-red-500).
However, I did find out about twin.marco that has this variant groups feature so check do check that out.
I'm using CSS grid to do something very simple, and Tailwind to style ( in which I'm really new so I'm probably making a silly mistake).
This is the result I'm getting:
Pretty good because It's almost identical to the original design which I'm following but the line on the left => Shouldn't be there.
This is my code right now:
<nav
class="grid grid-cols-2 gap-6 divide-x text-white sm:flex sm:justify-center sm:text-md lg:justify-end sm:divide-white"
>
<div
v-for="item in [navigation[0], navigation[1]]"
:key="item.name"
class="text-center w-auto px-3 divide-x"
>
<a :href="item.href" class="text-white">
{{ t(item.name) }}
</a>
</div>
<div
v-for="item in [navigation[2], navigation[3]]"
:key="item.name"
class="text-center w-auto px-3 divide-x"
>
<a :href="item.href" class="text-white">
{{ t(item.name) }}
</a>
</div>
</nav>
I also tried this which is basically the same I think:
Hope you can tell me what's wrong, and how I remove that ugly & unnecessary line. Thxs!
It actually works as intended. The key to your problem is divide-x class - it adds left border for every element but first. You have 4 element therefore there are 3 dividers which is correct. It does not smart enough to understand your layout - it simply adds border. To solve this you may manually remove this border from 3rd element (element where you don't need this border) on mobile and bring it back on larger devices like
<div class="w-auto px-3 text-center border-none sm:border-solid">
DEMO
Note: you don't need to add divide-x class to any child. Only parent wrap need this
Another way is to remove divide-x completely and set border-l border-l-white manually on every element you need on every breakpoint. This way you'll have more control over layout but also more classes to add
P.S. Same "problem" applies for space-y-n and space-x-n utilities - sometimes when elements being wrapped you may see unnecessary margin
all. I currently meet a CSS problem with Vue. Suppose I want to render multiple component by using v-for, and I want bind hover effect with each component. Once I hover my mouse on one component, there will be hover effect on that component, and the other components will keep unchanged. However, as I typed code below, if I hover my mouse on one component, all component will be affected. So, my question is how could I achieve my purpose?
<component v-for="(item, index) in items" :key="index">
<div #mouseover="hover = true" #mouseleave="hover = false">
<div v-if="hover" class="xx"> Hover Effect </div>
<div v-else> Normal Effect </div>
</div>
</component>
The answer is pretty straightforward for this problem. What you have to do is keep track of the index or the key of the element which you hover and clear it when you leave. You can write two specific methods for this if you want.
<component v-for="(item, index) in items" :key="index">
<div #mouseover="hoveredIndex = index" #mouseleave="hoveredIndex = -1">
<div v-if="hoveredIndex===index" class="xx"> Hover Effect </div>
<div v-else> Normal Effect </div>
</div>
</component>
How to use Image overlay in ReactJS? I am making a movie site.
Here is the link : Project
I want to use overlay effect when the user hovers over the image.
When the user hovers over the image I want to show tagline with the overlay effect on the image.
Here is the link I tried : reference
But, it's not working in React.
Here is the code :
In image tag i want to add overlay effect.
<div className="main-description" >
<img src={"https://image.tmdb.org/t/p/w500"+res.poster_path}
className="result- image"/>
<b className="result-titles" >{res.original_title}</b>
<div className="extra-description">
<div className="rating_time_score_container">
<div className="sub-title Rating-data"><b>
Imdb
<span className="details" > {res.vote_average}/10 </span></b></div>
<div className="time-data">
<b><span className="time">
<i className="fa fa-clock-o"></i> </span> <span className="details">
{res.time_str}</span>
</b>
</div>
</div>
</div>
I don't think this has to do with CSS, It would of been nice to have a link to your github but i\I tracked down your code (since its open source) and I took and look. I suggest using a package like this one: https://github.com/ethanselzer/react-hover-observer
or even bootstraps classic react package like this one:
https://react-bootstrap.github.io/components/overlays/
Then what you can do is update the state of your application and add the overlay that way. Hope that helped and good luck with your project