Card Focus

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

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

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