I am trying to align my button (JSX component) on the right-hand side, and have all the text on one line. I am using next.js and tailwindcss, and the button contains plain text and a react-icon. All of these components are contained within a card.
Currently, my output is this:
My code for the containing card is:
return (
<Fragment>
<div className=" bg-white rounded-md text-black overflow-hidden ">
<img className="object-cover w-full h-48" src={"/" + image}></img>
<div className=" flex-none" id="text">
<div>
<h1 className=" text-3xl font-semibold">{title}</h1>
</div>
<div>
<p className=" text-gray-700 font-bold">{humanReadableDate}</p>
<p className=" text-lg italic text-gray-500">{formattedAddress}</p>
</div>
<div className=" m-3">
<Button link={"/events/" + id}>
<span className="inline">Explore event</span>
<span className="inline"><AiOutlineArrowRight /></span>
</Button>
</div>
</div>
</div>
</Fragment>
);
And for the button:
return (
<Link href={props.link}>
<a className="inline-block text-right bg-emerald-500 text-white py-2 px-5 rounded-md">{props.children}</a>
</Link>
);
Check floats
https://tailwindcss.com/docs/float
Use float-right to float an element to the right of its container.
Check sizing
https://tailwindcss.com/docs/min-width
Utilities for setting the minimum width of an element (e.g. min-w-max)
Related
I have an accordion that uses Tailwind CSS.
The accordion has an equal width, but the height of the open accordion on the right is affecting the position of the one on the left.
Screenshot
Here's the code:
<div className="w-full lg:w-10/12 grid grid-cols-1 lg:grid-cols-2 gap-4 mx-auto">
<div>
/* item one on the left */
<Accordion className="rounded-3xl shadow-2xl bg-rb-light-200">
<AccordionSummary>
<span className="text-primary text-left font-semibold text-2xl">
The question
</span>
</AccordionSummary>
<AccordionDetails className=" w-11/12 text-xl text-left text-rb-dark-100">
<span>The answer</span>
</AccordionDetails>
</Accordion>
</div>
<div>
/* item two on the right */
<Accordion className="rounded-3xl shadow-2xl bg-rb-light-200">
<AccordionSummary>
<span className="text-primary text-left font-semibold text-2xl">
The question
</span>
</AccordionSummary>
<AccordionDetails className=" w-11/12 text-xl text-left text-rb-dark-100">
<span>The answer</span>
</AccordionDetails>
</Accordion>
</div>
</div>
<>
<div
className={
"border-2 border-amber-400 flex-shrink-0 h-[300px] w-[200px] rounded-lg"
}
>
<img
src={img}
// alt="Background Image"
className="object-cover h-[200px] w-[200px]"
/>
<div className="h-[30px]">ajjidf</div>
<div className="h-[30px]">sdfjio</div>
<button className="bg-blue-500 hover:bg-blue-700 text-white font-bold w-[196px] h-[50px] rounded-lg">
View Image
</button>
</div>
</>
align-stretch does not do the job and "h-full" just gets off the space.
I want the button to cover all the white space under the button.
My desired goal is that when I keyboard to the right outside of the flexbox, I want to push the other items to the left so I can see the terms in the overflow, like a scroll. I can currently keyboard to any item, but I want to make the CSS to where it pushes the first items to overflow left or something of that nature. Here is a screenshot. If I need to translate the tailwind to normal css let me know. thanks!
<section class="ml-8 border-2">
<slot />
<div class="m-auto uppercase border-2">
Popular Searches
</div>
<div class="popularSearchTerms">
{#each popularSearches as item, index}
<button
class="popularBtn"
class:popularSearchFocused={popularSearchesHasFocus &&
index === resultsPosition}
>
<div class="flex p-2">
<span class="w-4 h-4 mt-2">
<Search />
</span>
<span class="ml-2 mr-2">{item}</span>
</div>
</button>
{/each}
</div>
</section>
<style lang="postcss">
.popularSearchTerms{
#apply flex justify-between p-2 mt-6
overflow-hidden border-2
.popularBtn {
#apply bg-navBackground rounded-md mr-4;
}
.popularSearchFocused {
#apply transition-transform duration-300
ease-in-out transform scale-110 z-
10 bg-gray-100 border-4 border-
Orange rounded-md shadow-
vodTileFocus text-navBackground
text-shadow-none;
}
</style>
I have been trying to make a twitter clone, while making the sidebar I am not able to align the text of "Home" and "Explore". in img you can see "Home" is little bit towards the right. while inspecting I found that faHome icon is of 18x14 size, while faHashtag is of 14x14.
I need to know how I can I keep all button's text and Icon in same alignment.
Following the code for complete screen as shown in image. I am using Tailwind CSS
<div className="flex flex-row">
{--------- Div for Nav Bar ---------}
<div class="px-4 w-80 bg-white flex flex-col justify-start align-center top-0 bottom-0 left-0 fixed">
<div>
<button className="flex p-4 bg-red-500 mb-2 rounded-full mx-auto 2xl:mx-0 2xl:space-x-4 focus:outline-none hover:text-blue hover:bg-blue hover:bg-opacity-20">
<FontAwesomeIcon icon={faHome} className="mr-4 text-xl" />
<span>Home</span>
</button>
<button className="flex p-4 bg-red-500 rounded-full mx-auto 2xl:mx-0 2xl:space-x-4 focus:outline-none hover:text-blue hover:bg-blue hover:bg-opacity-20">
<FontAwesomeIcon icon={faHashtag} className="mr-4 text-xl" />
<span>Explore</span>
</button>
<button className="flex p-4 rounded-full mx-auto 2xl:mx-0 2xl:space-x-4 focus:outline-none hover:text-blue hover:bg-blue hover:bg-opacity-20">
<FontAwesomeIcon icon={faHashtag} size="lg" className="mr-4" />
<span>Explore</span>
</button>
</div>
</div>
{---------------------}
<div className="flex-auto h-screen bg-blue-400">Hello World</div>
<div className="w-96 h-screen bg-gray-400">Hello World</div>
</div>
I want Home and explore to look something like this.
The issue was there because of icons size coming from FontAwesome Icons. though I tried to wrap the size into a div, but that didn't work.
I found out that we can use following to get the desired size of icon.
<FontAwesomeIcon icon={faHome} style={{ width: "20px", height: "230px" }} />
I am trying to float a button to the right of a card. I want it to appear in the bottom righthand corner.
When I use a float right. It appears outside the parent div, is there a way to position it correctly?
<div class="m-10">
<div>
<div class="bg-white shadow-lg border-grey w-1/3 ">
<div class="p-4 flex">
<div class="pt-3 text-center font-bold text-2xl w-16 h-16 bg-grey-lightest">
D
</div>
<div class="ml-4">
Team Name
</div>
</div>
<div class="float-right">
<a :href="'/company/' + team.id">
<button class="ml-2 bg-blue hover:bg-blue-dark text-white text-sm font-bold rounded p-2">
View
</button>
</a>
</div>
</div>
</div>
</div>
I have a running sandbox here with the code
https://codesandbox.io/s/tailwind-css-nl0ph
Instead of using the float-right class use text-right
You just need to apply float-right to the button element instead of the parent div
<div class="m-10">
<div>
<div class="bg-white shadow-lg border-gray-400 w-1/3">
<div class="p-4 flex">
<div class="pt-3 text-center font-bold text-2xl w-16 h-16 bg-gray-200">
D
</div>
<div class="ml-4">Team Name</div>
</div>
<div class="h-fit min-h-full flex justify-end">
<a href="'/company/' + team.id">
<button class="float-right ml-2 bg-blue-400 hover:bg-blue-600 text-white text-sm font-bold rounded px-2 py-1">
View
</button>
</a>
</div>
</div>
</div>
</div>
Add this new class to clear floating element
.clearfix::after {
content: "";
clear: both;
display: table;
}
and then apply that class to the containing div (parent div of the button)
source: https://www.w3schools.com/howto/howto_css_clearfix.asp