guys how to achieve something like this in css

and i also want it to be responsive
34 Replies
Mannix
Mannix•2y ago
two divs one for each line and then you just need to wrap the 's in a span and give it the same styling as on text below
indee
indeeOP•2y ago
hwo to do this with grid
Mannix
Mannix•2y ago
there is no reason to use grid
indee
indeeOP•2y ago
i want it to be responsive
Mannix
Mannix•2y ago
you can use clamp for the font-size
indee
indeeOP•2y ago
Tailwind Play
Tailwind Play
An advanced online playground for Tailwind CSS that lets you use all of Tailwind's build-time features directly in the browser.
indee
indeeOP•2y ago
i want 's beside the priyasakhi like a collage
Mannix
Mannix•2y ago
https://play.tailwindcss.com/uEhDIYaHgI did you even look at the pen i did ?
Tailwind Play
Tailwind Play
An advanced online playground for Tailwind CSS that lets you use all of Tailwind's build-time features directly in the browser.
indee
indeeOP•2y ago
yaya ok ok i got
snxxwyy
snxxwyy•2y ago
@.indeevar here's an example https://codepen.io/deerCabin/pen/poQMyBj
R
CodePen
text example
...
indee
indeeOP•2y ago
bro thanks
snxxwyy
snxxwyy•2y ago
no worries
indee
indeeOP•2y ago
Tailwind Play
Tailwind Play
An advanced online playground for Tailwind CSS that lets you use all of Tailwind's build-time features directly in the browser.
indee
indeeOP•2y ago
this is what i did is it looking good ?
Mannix
Mannix•2y ago
change float-right to ms-auto 😉
indee
indeeOP•2y ago
why ? doesnt float-right look good ?
Mannix
Mannix•2y ago
add another section below and see what happens 🙂
indee
indeeOP•2y ago
Tailwind Play
Tailwind Play
An advanced online playground for Tailwind CSS that lets you use all of Tailwind's build-time features directly in the browser.
Mannix
Mannix•2y ago
i guess it's fine then you must be careful with float sometimes you can get undersired side effects 🙂
indee
indeeOP•2y ago
actually i have no idea what it does what kind of side effects i can expect ?
Mannix
Mannix•2y ago
Tailwind Play
Tailwind Play
An advanced online playground for Tailwind CSS that lets you use all of Tailwind's build-time features directly in the browser.
indee
indeeOP•2y ago
but i am not having any content in that div anymore so ig there will be no problems
Mannix
Mannix•2y ago
yup but for the future just fyi 🙂 this day float should really be used for images if you wanna wrap them around the text etc
indee
indeeOP•2y ago
oh thanks man great help
Jochem
Jochem•2y ago
float is intended, and should only be used for, putting images in paragraphs of text in such a way that the text flows around them. It's been abused for layout purposes a lot, but anything you can do with float, is better done with flex or grid or any other positioning method. Unless it's to ensure text flows around another element like an image and I just noticed I skipped over Mannix pretty much saying exactly that, sorry >_>
Mannix
Mannix•2y ago
nah it's ok two opinions is better then one and you explained it thoroughly
indee
indeeOP•2y ago
so how to do it with flex box ? ig position will do the thing
indee
indeeOP•2y ago
Tailwind Play
Tailwind Play
An advanced online playground for Tailwind CSS that lets you use all of Tailwind's build-time features directly in the browser.
indee
indeeOP•2y ago
solved it
Mannix
Mannix•2y ago
nice thumbup
indee
indeeOP•2y ago
is that correct ? no problems right ? guys i got an another problem
import { useState } from "react";

function Before({ sidebarButton }) {
return (
<div className="h-10 w-10 bg-accent mt-5 fixed" onClick={sidebarButton}></div>
);
}

function Sidebar({ sidebarButton }) {
return (
<>
<div className="fixed left-0 top-0 flex h-screen w-full sm:w-64 flex-col bg-primary p-5 text-center border-r z-10">
<div onClick={sidebarButton}>close</div>
<i className="text-4xl mb-10">Priyasakhi</i>
<i className="underline underline-offset-2 pb-1 text-xl">About</i>
<i className="underline underline-offset-2 pb-1 text-xl">All recepies</i>
<i className="underline underline-offset-2 pb-1 text-xl">Mains</i>
<i className="underline underline-offset-2 pb-1 text-xl">Snacks</i>
<i className="underline underline-offset-2 pb-1 text-xl">Breakfasts</i>
</div>
</>
);
}

function Hehe() {
const [sidebar, setSidebar] = useState(false);
function Button() {
setSidebar(!sidebar)
}

return (
<>
{sidebar ? <Sidebar sidebarButton={Button} /> : <Before sidebarButton={Button} />}
</>
);
}

export default Hehe;
import { useState } from "react";

function Before({ sidebarButton }) {
return (
<div className="h-10 w-10 bg-accent mt-5 fixed" onClick={sidebarButton}></div>
);
}

function Sidebar({ sidebarButton }) {
return (
<>
<div className="fixed left-0 top-0 flex h-screen w-full sm:w-64 flex-col bg-primary p-5 text-center border-r z-10">
<div onClick={sidebarButton}>close</div>
<i className="text-4xl mb-10">Priyasakhi</i>
<i className="underline underline-offset-2 pb-1 text-xl">About</i>
<i className="underline underline-offset-2 pb-1 text-xl">All recepies</i>
<i className="underline underline-offset-2 pb-1 text-xl">Mains</i>
<i className="underline underline-offset-2 pb-1 text-xl">Snacks</i>
<i className="underline underline-offset-2 pb-1 text-xl">Breakfasts</i>
</div>
</>
);
}

function Hehe() {
const [sidebar, setSidebar] = useState(false);
function Button() {
setSidebar(!sidebar)
}

return (
<>
{sidebar ? <Sidebar sidebarButton={Button} /> : <Before sidebarButton={Button} />}
</>
);
}

export default Hehe;
i when i toggle the side bar i want the whole background to be darker
Kevin Powell
Kevin Powell•2y ago
Since it's a different problem, I'd suggest making a new post for it 🙂
indee
indeeOP•2y ago
@Kevin i did that sir

Did you find this page helpful?