Center card in browser. Width and figure size mismatch

[lazarusA]

Several questions:

1. If I do the following, the card is smaller than the figure, should the figure be trimmed to the card's size?
2. Using class or style to change the background color of the card as it is is not working for me, where can I know more about the syntax needed in order for this to work?
3. How or where can I find out more about how to position my cards in the browser ? i.e. center, flex, relative, left, right... etc... ? I'm aiming and building a reactive dashboard, i.e. cards to be rearranged/ resize depending on the device screen.

using WGLMakie
using JSServe
import JSServe.TailwindDashboard as D
JSServe.browser_display()

Page()

function makie_plot()
    N = 10
    function xy_data(x, y)
        r = sqrt(x^2 + y^2)
        r == 0.0 ? 1.0f0 : (sin(r) / r)
    end
    l = range(-10, stop=10, length=N)
    z = Float32[xy_data(x, y) for x in l, y in l]
    surface(
        -1 .. 1, -1 .. 1, z,
        colormap=:Spectral,
        figure=(; resolution=(500, 500))
    )
end

App() do
    width = "200px"
    class="max-w-sm bg-white border border-gray-200 rounded-lg shadow dark:bg-gray-800 dark:border-gray-700"
    return DOM.div(
        D.Card(makie_plot(); class,
            width)
        )
end