Em

rx.text("We ", rx.text.em("had"), " to do something about it.")

class EmStressState(rx.State):
    words: list[str] = ["I", "never", "said", "she", "took", "it"]
    stressed: int = 1

    @rx.event
    def stress(self, i: int):
        self.stressed = i


rx.flex(
    rx.text(
        rx.foreach(
            EmStressState.words,
            lambda w, i: rx.fragment(rx.cond(i == EmStressState.stressed, rx.text.em(w), rx.text(w, as_="span")), " "),
        ),
        size="6",
    ),
    rx.flex(
        rx.foreach(
            EmStressState.words,
            lambda w, i: rx.button(
                w,
                size="1",
                variant=rx.cond(i == EmStressState.stressed, "solid", "soft"),
                on_click=EmStressState.stress(i),
            ),
        ),
        spacing="2",
        wrap="wrap",
    ),
    direction="column",
    spacing="3",
)

rx.flex(
    rx.text("Emphasis: I ", rx.text.em("really"), " liked it."),
    rx.text("Italic only: ", rx.text("Moby-Dick", as_="i"), " is a novel."),
    direction="column",
    spacing="3",
)

rx.flex(
    rx.text("Small: we ", rx.text.em("had"), " to.", size="2"),
    rx.text("Large: we ", rx.text.em("had"), " to.", size="6", color_scheme="indigo"),
    rx.text("Mixed: this is ", rx.text.strong("very ", rx.text.em("very")), " important."),
    direction="column",
    spacing="3",
)

rx.card(
    rx.text(
        "The coupon works on ",
        rx.text.em("any"),
        " item in the store, ",
        rx.text.em("including"),
        " items already on sale.",
        size="3",
    ),
    max_width="420px",
)