PD
Papp David
Software engineer
function Card(){
    return(
        <>
            <a
                href=""
                className="h-[344px] w-full max-w-[280px] transition-all duration-300 ease-in-out relative cursor-pointer group border-2"
            >
                <div className="relative overflow-hidden h-full max-h-[280px]">
                    <img
                        src="/s1-1.jpg"
                        alt="def1"
                        className="h-full w-full object-cover transition-all duration-300 ease-in-out group-hover:scale-110"
                    />
                </div>
                <div
                    className="mt-2 absolute top-0 right-2 backdrop-blur-lg  p-1 px-2 flex gap-1 items-center bg-purple-500/30"
                >
                    <div className="text-xs text-zinc-200">Epic</div>
                </div>
                <div
                    className="mt-2 absolute top-0 left-2 bg-green-500/30 backdrop-blur-lg  p-1 px-2 flex gap-1 items-center"
                >
                    <div className="text-xs text-green-400">S1</div>
                </div>
                <div className="w-full bg-zinc-900 px-2 py-2">
                    <div className="flex justify-between items-center">
                        <div className="text-start text-white text-xl">
                            Kai
                        </div>
                        <div className="text-xs text-zinc-200">#3012</div>
                    </div>
                    <div className="flex justify-between items-center">
                        <div className="font-body text-start text-zinc-400 text-xs">
                            Floor price
                        </div>
                        <div className="text-xs text-zinc-400 flex gap-1">
                            <svg
                                xmlns="http://www.w3.org/2000/svg"
                                width="16"
                                height="16"
                                viewBox="0 0 16 16"
                            ><path
                                    fill="currentColor"
                                    fill-rule="evenodd"
                                    d="M2.45 6.76h9.59c.12 0 .23.05.32.14l1.52 1.56c.28.29.08.78-.32.78H3.97c-.12 0-.23-.05-.32-.14L2.13 7.54c-.28-.29-.08-.78.32-.78m-.32-2.07l1.52-1.56c.08-.09.2-.14.32-.14h9.58c.4 0 .6.49.32.78l-1.51 1.56c-.08.09-.2.14-.32.14H2.45c-.4 0-.6-.49-.32-.78m11.74 6.61l-1.52 1.56c-.09.09-.2.14-.32.14H2.45c-.4 0-.6-.49-.32-.78l1.52-1.56c.08-.09.2-.14.32-.14h9.58c.4 0 .6.49.32.78"
                                /></svg
                            >
                            <div className="">0.26</div>
                        </div>
                    </div>
                </div>
            </a>
        </>
    )
}
export default Card