I am practicing my react skills and cant figure out how to get this button pictured below to be under the text.
This is my code:
<div className="font-secondary text-xs md:text-base max-w-{100px} flex flex-row items-center gap-2 bg-white rounded-xl px-5 py-4 text-content-button font-bold hover:opacity-70 duration-300">
{
<Button href={LINKS.application} target="_self" external>
Get Platinum access now!
</Button>
}
</div>
Thanks for helping in advance!
Try setting the styles to flex column. You're currently at flex row, which makes it parallel
Also you can remove the "{ }" since it is a children element of the div
Related
i'm having difficulty recreating a similar background hover transition to this one https://developer.spotify.com/ (scroll down to "whats new in our community?" section) .
I can make the background image appear when i hover but i can't seem to make the background size and opacity transitions work...
<div className="hover:bg-[url('/tile2.svg')] flex flex-col justify-end bg-primary_color relative text-white text-left h-[25vw] w-[25vw] max-w-[450px] max-h-[450px] sm:max-w-none bg-no-repeat overflow-hidden bg-cover p-0 z-[4]">
<div className="flex flex-col justify-between h-[100%] p-[40px]">
<p className="text-[18px] font-[400] z-[4]">TITLE</p>
<p className=" xs:text-[27px] text-[31px] font-extrabold z-[4]">
Lorem ipsum...
</p>
</div>
</div>
You can achieve that effect by manipulating the background opacity, transition duration and background size:
Background opacity links:
https://tailwindcss.com/docs/background-color#changing-the-opacity
https://v2.tailwindcss.com/docs/background-opacity
Transition duration links:
https://tailwindcss.com/docs/transition-duration
Background size links:
https://tailwindcss.com/docs/background-size
I am trying to create tooltip here by using Tailwind css and displaying it on Pebble SVG
<div className="relative items-center group">
<span tw="flex items-center gap-1">
Payment method
<Pebble />
</span>
<div tw="bottom-0 flex flex-col items-center hidden group-hover:flex">
<span tw="relative p-2 text-sm text-inkWhite-100 bg-inkBlack-100">
If you'd like to change your payment method, go to section.
</span>
<div tw="w-3 h-3 -mt-2 rotate-45 bg-black"></div>
</div
Any other way around for it?
I've run into this problem, while I was writing the Code for my Portfolio.
I want to position my two buttons (as seen in the image below) to the bottom of the parenting div. I also want the alignment of the two buttons to be the same (in the middle of the parenting div). Just at the bottom.
https://i.stack.imgur.com/T6Mmg.png
Here is the code of just one div.
<div className='md:flex justify-center'>
<div className='m-2 p-4 bg-gray-100 border-2 border-gray-300 rounded-lg max-w-md shadow-xl mx-auto md:mx-4 hover:scale-105 duration-150 group'>
<div className='flex justify-between'>
<h1 className='font-bold text-xl'>The[Creators] - NFT Homepage</h1>
<img src={tcLogo} alt="thecreatorslogo" className='w-14 hover:rotate-12 duration-150' />
</div>
<p className='py-2'>My first Project was a Homepage, which contains infos about Jan Lampert's and my NFT Collections. You can find the Link down here 👇.</p>
<div className='flex bottom-4 items-end md:scale-0 group-hover:scale-100 duration-150'>
<button className='mx-auto rounded-xl bg-cyan-400 hover:shadow-lg hover:shadow-cyan-600 duration-300 py-4 px-6 font-bold text-xl'>Github</button>
<button className='mx-auto rounded-xl bg-pink-400 hover:shadow-lg hover:shadow-pink-600 duration-300 py-4 px-6 font-bold text-xl'><a href="https://thecreatorsnft.com" target='blank'>Website</a></button>
</div>
</div>
Here's a possible solution that can work here, keep in mind that they're many ways to solve this problem; in general, you have a lot of duplicate code, and I would try to find some ways to create components dynamically—for example, the projects' boxes and the links you have in your footer.
Solution:
Apply flex and flex-col on your projects' containers. Then apply justify-between to create this kind of spacing between your elements:
flex flex-col justify-between
Tailwind Play with the example
If you don't want to have the spacing between your header and your paragraph, you may create another container with the two of them.
To keep it simple, I'll give each container the flex utilities as well:
<div class="flex flex-col">
<-- Your header and paragraph elements --!>
</div>
You can style it however you want with the specific gaps you desire:
Tailwind Play with the example
Please note that I added the class md:w-1/3 on each container (on the second to give each project the same width. It might not be necessary for you; you can style it in many other ways.
I'm currently using tailwind css as a beginner.
What i am trying to do is to have a 2 element on top of each other with the same width but different pixel size.
What i have now is.
If you can't get what i'm trying to do, you can check the attached file.
<div className="w-full h-screen">
<div className="max-w-[1500px] px-4 mx-auto h-full">
<div className="flex h-[700px] ">
<div className="w-[1000px] flex flex-col justify-start">
<div className="">
<h1 className="w-full font-bold inline border-y-2 ">
The moon is made
</h1>
</div>
<p className="text-[100px] font-bold ">
of
<span className="primary-bg text-[100px] font-bold inline">
Pancakes.
</span>
</p>
</div>
<div className="w-[500px]">qwe</div>
</div>
</div>
</div>
And i wanted to achieve is this.
You can do that by choosing the right font-size for every text because the width is depending on the font size
I tried to copy the image you provided and made it as simple as I can
check it here : https://play.tailwindcss.com/H4pBcGRvag
I have the following two buttons which I hope to merge into one.
<div className="mt-8 mb-16">
<button
onClick={handlePurchase}
type="button"
// disabled='{this[id] <= 10}'
className="inline-flex items-center px-16 py-3 border border-transparent text-base font-large elevation-15 rounded-md text-white bg-green-600
hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500"
>
Mint me a Marköbot!
</button>
</div>
<div className="mt-8 mb-16">
<button
type="button"
disabled='{this[id] <= 10}'
className="inline-flex items-center px-16 py-3 border border-transparent text-base font-large elevation-15 rounded-md text-gray-500 bg-gray-300"
>
All Marköbot have been minted!
</button>
</div>
The condition is this.id <=10. Using ReactJS and TailWind.
It's a alternative approach I am taking to solve the issue posted at Conditional disabling of button
Thanks lots for advice/help!
Markelous
Instead of merging the two buttons, the same could be performed using JSX callback. See solution on the other posting at Conditional disabling of button
The undefined return came from the callback. It needs to be bound before (in this case) passing to the button.
See some of the other approaches suggested: How to use ternary operator in the render method in reactjs?