guys how to achieve something like this in css

and i also want it to be responsive

34 Replies

Mannix•17mo 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

Mannix•17mo ago

https://codepen.io/MannixMD/pen/OJaKJmJ

Mannix

CodePen

OJaKJmJ

...

indeeOP•17mo ago

hwo to do this with grid

Mannix•17mo ago

there is no reason to use grid

indeeOP•17mo ago

i want it to be responsive

Mannix•17mo ago

you can use clamp for the font-size

indeeOP•17mo ago

https://play.tailwindcss.com/Aa5BSztvcL

Tailwind Play

An advanced online playground for Tailwind CSS that lets you use all of Tailwind's build-time features directly in the browser.

indeeOP•17mo ago

i want 's beside the priyasakhi like a collage

Mannix•17mo ago

https://play.tailwindcss.com/uEhDIYaHgI did you even look at the pen i did ?

Tailwind Play

An advanced online playground for Tailwind CSS that lets you use all of Tailwind's build-time features directly in the browser.

indeeOP•17mo ago

yaya ok ok i got

snxxwyy•17mo ago

@.indeevar here's an example https://codepen.io/deerCabin/pen/poQMyBj

CodePen

text example

...

indeeOP•17mo ago

bro thanks

snxxwyy•17mo ago

no worries

indeeOP•17mo ago

https://play.tailwindcss.com/Rg4UftfVRa

Tailwind Play

An advanced online playground for Tailwind CSS that lets you use all of Tailwind's build-time features directly in the browser.

indeeOP•17mo ago

this is what i did is it looking good ?

Mannix•17mo ago

change float-right to ms-auto 😉

indeeOP•17mo ago

why ? doesnt float-right look good ?

Mannix•17mo ago

add another section below and see what happens 🙂

indeeOP•17mo ago

https://play.tailwindcss.com/rXCdNyP1hm

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•17mo ago

i guess it's fine then you must be careful with float sometimes you can get undersired side effects 🙂

indeeOP•17mo ago

actually i have no idea what it does what kind of side effects i can expect ?

Mannix•17mo ago

https://play.tailwindcss.com/VAOuModdwn

Tailwind Play

An advanced online playground for Tailwind CSS that lets you use all of Tailwind's build-time features directly in the browser.

indeeOP•17mo ago

but i am not having any content in that div anymore so ig there will be no problems

Mannix•17mo 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

indeeOP•17mo ago

oh thanks man great help

Jochem•17mo 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•17mo ago

nah it's ok two opinions is better then one and you explained it thoroughly

indeeOP•17mo ago

so how to do it with flex box ? ig position will do the thing

indeeOP•17mo ago

https://play.tailwindcss.com/WNToeSWvkU

Tailwind Play

An advanced online playground for Tailwind CSS that lets you use all of Tailwind's build-time features directly in the browser.

indeeOP•17mo ago

solved it

Mannix•17mo ago

nice

indeeOP•17mo 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•17mo ago

Since it's a different problem, I'd suggest making a new post for it 🙂

indeeOP•17mo ago

@Kevin i did that sir

Gaming

Programming

guys how to achieve something like this in css