guys how to achieve something like this in css

and i also want it to be responsive

34 Replies

Mannix•16mo 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•16mo ago

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

Mannix

CodePen

OJaKJmJ

...

indeeOP•16mo ago

hwo to do this with grid

Mannix•16mo ago

there is no reason to use grid

indeeOP•16mo ago

i want it to be responsive

Mannix•16mo ago

you can use clamp for the font-size

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

i want 's beside the priyasakhi like a collage

Mannix•16mo 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•16mo ago

yaya ok ok i got

snxxwyy•16mo ago

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

CodePen

text example

...

indeeOP•16mo ago

bro thanks

snxxwyy•16mo ago

no worries

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

this is what i did is it looking good ?

Mannix•16mo ago

change float-right to ms-auto 😉

indeeOP•16mo ago

why ? doesnt float-right look good ?

Mannix•16mo ago

add another section below and see what happens 🙂

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

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

indeeOP•16mo ago

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

Mannix•16mo 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•16mo ago

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

Mannix•16mo 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•16mo ago

oh thanks man great help

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

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

indeeOP•16mo ago

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

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

solved it

Mannix•16mo ago

nice

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

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

indeeOP•16mo ago

@Kevin i did that sir

Gaming

Programming

guys how to achieve something like this in css