Position elements to the bottom of a div with tailwindcss - reactjs

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.

Related

Hover transitions in React and tailwind?

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

How to move button down under text in React JS

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

How to do a 2 row text-element with same width but different font-size

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

How do I keep my child elements stationary when expanding the navbar?

Currently, when I hover over the navbar, it expands its width, as desired.
However, I don't want my centered icons in the navbar to move along with the expansion. I want them to stay where they are originally.
Here's a visual of what's happening:
Code:
<div
id="sidebarContainer"
className="bg-red-500 lg:w-24 lg:hover:w-44 ease-in duration-300 h-screen flex justify-center items-center group "
>
<div
id="sidebarLinkContainer"
className="space-y-10 flex flex-col items-center z-10 "
>
<div
id="sidebarHomeDiv"
className="flex align-center space-x-4 items-center"
>
<HomeIcon className="text-white h-7" />
<p className="text-white hidden group-hover:block ">HOME</p>
</div>
</div>
</div>
Removing the justify-center styling from the div tag that has the id of sidebarContainer will solve the issue.
Additionally you can add relative left-8 styling or pl-8, whatever your preference is to the div that has the id of sidebarLinkContainer this should give the div space from the left
like this:
<div
id="sidebarContainer"
className="bg-red-500 lg:w-24 lg:hover:w-44 ease-in duration-300 h-screen flex items-center group "
>
<div
id="sidebarLinkContainer"
className="space-y-10 flex flex-col relative left-8 items-center z-10 "
>
<div
id="sidebarHomeDiv"
className="flex align-center text-center space-x-4 "
>
<HomeIcon className="text-white h-7" />
<p className="text-white hidden group-hover:block ">HOME</p>
</div>
</div>
</div>
Add padding to the right side instead of expanding container
The width for elements will stay the same and container size will increase

How to merge two buttons into one?

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?

Resources