Card Focus

use leptos::prelude::*;
use leptos_meta::Stylesheet;

#[component]
pub fn DemoCardFocus() -> impl IntoView {
    view! {
        <Stylesheet id="card-focus" href="/components/card-focus.css" />

        <div class="flex flex-col gap-4 items-center cards lg:flex-row">
            <div class="card red bg-[rgba(65,65,65,0.11)] border border-[rgba(144,161,255,0.171)] font-sans text-2xl font-semibold rounded-lg cursor-pointer flex items-center justify-center flex-col w-[200px] h-[180px]">
                <p class="text-base font-bold text-black tip">Hover Me</p>
            </div>
            <div class="card blue bg-[rgba(65,65,65,0.11)] border border-[rgba(144,161,255,0.171)] font-sans text-2xl font-semibold rounded-lg cursor-pointer flex items-center justify-center flex-col w-[200px] h-[180px]">
                <p class="text-base font-bold text-black tip">Hover Me</p>
            </div>
            <div class="card green bg-[rgba(65,65,65,0.11)] border border-[rgba(144,161,255,0.171)] font-sans text-2xl font-semibold rounded-lg cursor-pointer flex items-center justify-center flex-col w-[200px] h-[180px]">
                <p class="text-base font-bold text-black tip">Hover Me</p>
            </div>
        </div>
    }
}