guys how to achieve something like this in css

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•2y ago

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

indeeOP•2y ago

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

indeeOP•2y 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•2y ago

solved it

Mannix•2y ago

nice

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•2y ago

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

indeeOP•2y ago

@Kevin i did that sir

Gaming

Programming

guys how to achieve something like this in css

Did you find this page helpful?