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?
Related
So i have component that i try to make it responsive, but when it comes to media below md: it not working at all and i have some problem on turning the view into what i want
Here is the look on the web view:
and here is the problem :
is that posible to make the button into this when it comes to phone view?
Here is my try:
const CardCalculation = () => {
return (
<div className="ml-2">
<div className="mx-auto lg:flex lg:items-center lg:justify-between">
<h2 className="tracking-tight text-gray-900 sm:text-xl">
<div className="gap-2">
<div className="w-[120px] h-[110px] absolute bg-[#d9d9d9] lg:mb-10"></div>
<div className="text-xl ml-32 text-left text-[#e44]">
Mie Goleng
</div>
<div className="ml-32 text-left text-[#b4b4b4]">Plant K103.</div>
<div className="ml-32 text-left text-[#b4b4b4]">500.02 UOG.</div>
</div>
</h2>
<div className="mt-4 flex lg:mt-0 lg:flex-shrink-0 md:mt-4 sm:mt-8">
<div>
<div className="rounded-md mb-2 shadow">
<a
href="#"
className="inline-flex items-center justify-center rounded-md border border-transparent bg-indigo-600 px-5 py-3 text-base font-medium text-white hover:bg-indigo-700"
>
Get started
</a>
</div>
<div className="rounded-md shadow">
<a
href="#"
className="inline-flex items-center justify-center rounded-md border border-transparent bg-indigo-600 px-5 py-3 text-base font-medium text-indigo-600 hover:bg-indigo-50"
>
Learn more
</a>
</div>
</div>
</div>
</div>
</div>
);
};
export default CardCalculation;
can someone explained to me why it not responsive to the screen and does it possible to turn the button into horizontal when it comes to phone view as below?
Use the following code:
<div class="p-2">
<div class="flex flex-col md:flex-row md:justify-between">
<div class="flex gap-4">
<div name="grey window" class="h-[110px] w-[120px] bg-[#d9d9d9]"></div>
<div name="text" class="pt-2 md:flex md:flex-col md:justify-evenly md:pt-4">
<div class="text-xl text-[#e44] md:text-3xl">Mie Goleng</div>
<div class="mt-2 text-[#b4b4b4] md:text-xl">Plant K103.</div>
<div class="mt-2 text-[#b4b4b4] md:text-xl">500.02 UOG.</div>
</div>
</div>
<div name="Buttons">
<div class="flex gap-4 md:flex-col p-4 md:p-0">
<div class="rounded-md shadow">
Get started
</div>
<div class="rounded-md shadow">
Learn more
</div>
</div>
</div>
</div>
</div>
Output on large devices:
Output on small devices:
Tailwind play
I am making a navbar in Tailwind consisting of links but I cannot get them to vertically center:
Here is what it looks like:
Steps I have tried:
items-center
justify-center
Setting the parent to flex-col
None of these options work.
How do you get the links to be exactly in the middle of the navbar vertically ?
Here is the code:
import React from 'react'
import Logo from '../images/Logo.png'
const Navbar = () => {
return (
<div className="flex justify-between items-center bg-gray-900">
<div className="">
<img className="w-40 py-2 px-2" src={Logo}></img>
</div>
<div className="flex flex-row items-center justify-center">
<p className="px-4 text-white">About</p>
<p className="px-4 text-white">Books</p>
<p className="px-4 text-white">Videos</p>
<p className="px-4 text-white">Quotes</p>
</div>
</div>
)
}
export default Navbar
The divs inside the flex class are aligned at the center, but the issue appears to be the first dive with the h-24 class which also contains the logo image. The logo aligns at the top of the div with the height of h-24 which is taller than the div containing the menu items. If you get rid of the h-24 or align the image vertically, they all align vertically. Try this:
<div class="flex justify-between items-center bg-gray-900">
<div class="h-24 flex items-center">
<img class="w-40 py-2 px-2" src="https://via.placeholder.com/150x50"></img>
</div>
<div class="flex">
<p class="px-4 text-white">About</p>
<p class="px-4 text-white">Books</p>
<p class="px-4 text-white">Videos</p>
<p class="px-4 text-white">Quotes</p>
</div>
</div>
It is working just fine. Please recheck the code you have sent, is it what it is producing the output you have produced in your question.
<div class="flex justify-between items-center bg-gray-900 h-24">
<div class="">
<img class="w-40 py-2 px-2" src=""></img>
</div>
<div class="flex ">
<p class="px-4 text-white">About</p>
<p class="px-4 text-white">Books</p>
<p class="px-4 text-white">Videos</p>
<p class="px-4 text-white">Quotes</p>
</div>
</div>
The output generated by the following code :
EDIT: The problem is that the list items were in tags and not tags - when changing the links from to , the list items centered vertically automatically without any further changes needed.
import React from 'react'
import Logo from '../images/Logo.png'
const Navbar = () => {
return (
<div className="flex justify-between items-center bg-gray-900 fixed inset-x-0 z-40">
<div className="">
<img className="w-40 px-2 mt-6" src={Logo}></img>
</div>
<div className="flex flex-row items-center justify-center mt-6">
<p className="px-4 text-white">About</p>
<p className="px-4 text-white">Books</p>
<p className="px-4 text-white">Videos</p>
<p className="px-4 text-white">Quotes</p>
</div>
</div>
)
}
export default Navbar
Hello I have that edit input :
<link rel="stylesheet" href="https://unpkg.com/boxicons#2.0.7/css/boxicons.min.css" />
<script defer src="https://unpkg.com/alpinejs#3.9.1/dist/cdn.min.js"></script>
<main class="flex min-h-screen w-full items-center justify-center bg-gray-100">
<div x-data="{ open : false }" class="p-2 bg-white border shadow rounded w-96">
<div x-show="!open" class="flex justify-between items-center">
<div class="ml-2">Hafiz Haziq</div>
<button type="button" class="btn bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 font-medium rounded "
#click="open = !open">Edit</button>
</div>
<!-- container after clicked "EDIT" -->
<div x-show="open" class="flex justify-between items-center">
<input type="text" class="w-full bg-gray-100 rounded p-2 mr-4" value="Hafiz Haziq">
<div class="flex justify-center items-center space-x-2">
<button type="button" class="rounded bg-emerald-500 hover:bg-emerald-600 w-10 h-10 text-white text-3xl">
<i class='bx bx-check'></i>
</button>
<button type="button" class="rounded bg-red-500 hover:bg-red-600 text-white w-10 h-10 text-3xl"
#click="open = false">
<i class='bx bx-x'></i>
</button>
</div>
</div>
</div>
</main>
that I found here : The edit input
And I would like to put it into my react project :
I tried that :
import "./styles.css";
const App = ()=> {
return (
<main class="flex min-h-screen w-full items-center justify-center bg-gray-100">
<div x-data="{ open : false }" class="p-2 bg-white border shadow rounded w-96">
<div x-show="!open" class="flex justify-between items-center">
<div class="ml-2">Hafiz Haziq</div>
<button type="button" class="btn bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 font-medium rounded "
#click="open = !open">Edit</button>
</div>
{/*<!-- container after clicked "EDIT" --> */}
<div x-show="open" class="flex justify-between items-center">
<input type="text" class="w-full bg-gray-100 rounded p-2 mr-4" value="Hafiz Haziq" />
<div class="flex justify-center items-center space-x-2">
<button type="button" class="rounded bg-emerald-500 hover:bg-emerald-600 w-10 h-10 text-white text-3xl">
<i class='bx bx-check'></i>
</button>
<button type="button" class="rounded bg-red-500 hover:bg-red-600 text-white w-10 h-10 text-3xl"
#click="open = false">
<i class='bx bx-x'></i>
</button>
</div>
</div>
</div>
</main>
);
}
export default App;
The code of the full project is there : My project
But it does not work ...
Could you help me please ?
Thank you very much !
It is not working, because this is not a React code. You would need to change few things in there.
You need use useState to keep track of open state
const [open, setOpen] = useState(false);
To handle click events on button you should use onClick instead of #click
<button onClick={() => setOpen(true)}>
Edit
</button>
Change places where you are defining classes for HTML elements. In react you should use className keyword for that.
<div className="ml-2">Hafiz Haziq</div>
You can also remove x-data and x-show attributes
<div x-show="!open" class="flex justify-between items-center">
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 a Form with several components:
return (
<>
<FormProvider {...methods} >
<div className="mt-12">
<form onSubmit={handleSubmit(onSubmit)} action="#" method="POST" >
<Email/>
<Personal/>
<h2 className='font-semibold text-xl'>Geburtsdaten</h2>
<p className='mb-5 text-gray-400 text-sm'>Du musst mindestens 18 Jahre alt sein, um online einen Vertrag abzuschließen.</p>
<div className="sm:col-span-2 grid grid-cols-3 gap-4 mb-5">
<div className="mt-1">
< SelectBirthYear
years={years}
value={selectedYear}
onChange={setSelectedYear}/>
</div>
<div className="mt-1">
< SelectBirthMonth
startYear={startYear}
selectedYear={selectedYear}
months={months}
value={selectedMonth}
reducedMonths={reducedMonths}
onChange={monthSelect}/>
</div>
<div className="mt-1">
<SelectBirthDay
startYear={startYear}
selectedYear={selectedYear}
selectedMonth={selectedMonth}
monthNow={monthNow}
days={days}
value={selectedDay}
reducedDays={reducedDays}
onChange={daySelect}
/>
</div>
</div>
<Contact/>
<BankDetails/>
<Checkboxes />
<div className="sm:col-span-2">
</div>
<div className="mt-5 sm:mt-8 sm:flex sm:justify-center lg:justify-center">
<div className="rounded-md shadow">
<a role="button" tabIndex={0}
onClick={prevFormStep}
className="w-full flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-white bg-yellow-500 hover:bg-yallow-600 md:py-4 md:text-lg md:px-10"
>
Zurück
</a>
</div>
<div className="mt-3 sm:mt-0 sm:ml-3">
<input
type='submit'
value='Vertrag abschließen'
className="w-full flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-white bg-yellow-500 hover:bg-yallow-600 md:py-4 md:text-lg md:px-10"
/>
</div>
</div>
</form>
</div>
</FormProvider>
</>
)
For my From validations I already use react-hook-form:
const methods = useForm({ mode: 'onTouched' });
const { handleSubmit } = methods;
So now, looking into documentation, I can't see the possibility of persisting values on input change. In the console I can access the _formValues in the control, but in my App I can't even manage to console.log those. Also, about control it is said: This object contains methods for registering components into React Hook Form. Important: do not access any of the properties inside this object directly. It's for internal usage only.
My thinking was, if I can access the formValues, then I could save those into Local Storage. But I am not getting that far. Also, having form with a lot of components, naming each where I wish to save the Value on every change woudn't be dry. So is there any strategy to get all values out of my Form and to add those to local storage, so if for whatever reason User reloads or goes back in the browser history, the filles out form persists?