Skip to content

Instantly share code, notes, and snippets.

@zenkodr

zenkodr/BorderCards.jsx

Forked from Mif2006/BorderCards.jsx
Created August 8, 2025 22:51
Show Gist options
  • Save zenkodr/db314d26f9d2573e823128730baf4516 to your computer and use it in GitHub Desktop.
Save zenkodr/db314d26f9d2573e823128730baf4516 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. @Mif2006 Mif2006 created this gist May 30, 2024.
    59 changes: 59 additions & 0 deletions BorderCards.jsx
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,59 @@
    import { useState } from "react";
    import OrangeCity2 from "../assets/OrangeCity2.jpg";
    import OrangeCity3 from "../assets/OrangeCity3.jpg";
    import OrangeCity4 from "../assets/OrangeCity4.jpg";

    const BorderCards = () => {
    const [isHovering, setIsHovering] = useState(false);
    return (
    <div
    className="w-full min-h-screen flex flex-col md:flex-row gap-10 items-center justify-center bg-center bg-cover"
    style={{ backgroundImage: `url(${OrangeCity2})` }}
    >
    <div className="animated_card cursor-pointer group">
    <div className="animated-card-before h-[500px] w-[350px] bg-orange-500 z-[1] rounded-[16px] group-hover:h-[508px] group-hover:w-[358px]" />

    <div
    className="h-[500px] w-[350px] rounded-[16px] z-[10] flex items-center justify-center bg-center bg-cover"
    style={{ backgroundImage: `url(${OrangeCity3})` }}
    >
    <h2 className="text-[20px] font-bold text-cyan-200">About Me</h2>
    </div>
    </div>

    <div
    className={`card h-[500px] w-[500px] rounded-[16px] cursor-pointer border group border-white hover:border-black border-opacity-60 ${
    isHovering ? "tilted" : ""
    }`}
    onClick={() => setIsHovering(!isHovering)}
    onMouseEnter={() => setIsHovering(true)}
    onMouseLeave={() => setIsHovering(false)}
    >
    <div className="w-full h-full rounded-[16px] flex items-center justify-center flex-col gap-10 text-center">
    <h1 className="group-hover:animate-textRotation text-cyan-200 font-bold text-6xl z-[20]">
    Welcome
    </h1>
    <p className="text-gray-200 text-[16px]">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
    eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
    ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
    aliquip ex ea commodo consequat
    </p>
    </div>
    </div>

    <div className="animated_card hover:h-[508px] hover:w-[357px] cursor-pointer overflow-hidden rounded-[16px] group">
    <div className="animated-card-before w-[50%] h-[180%] rounded-[12px] z-[1] rotate-45 bg-white group-hover:animate-rotate360" />

    <div
    className="h-[500px] w-[350px] rounded-[16px] z-[10] flex items-center justify-center bg-center bg-cover"
    style={{ backgroundImage: `url(${OrangeCity4})` }}
    >
    <h2 className="text-[20px] font-bold text-cyan-200">My Projects</h2>
    </div>
    </div>
    </div>
    );
    };

    export default BorderCards;
    32 changes: 32 additions & 0 deletions index.css
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,32 @@
    @tailwind base;
    @tailwind components;
    @tailwind utilities;

    .animated_card {
    display: grid;
    place-items: center;
    position: relative;
    height: 500px;
    width: 350px;
    }

    .animated-card-before {
    position: absolute;
    transition: 0.3s;
    animation: animate 5s linear infinite;
    }

    @keyframes animate {
    50% {
    filter: hue-rotate(350deg);
    }
    }

    .card {
    transition: transform 1s;
    transform-style: preserve-3d;
    }

    .tilted {
    transform: rotate3d(1, 0, 0, 40deg);
    }
    26 changes: 26 additions & 0 deletions tailwind.config.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,26 @@
    /** @type {import('tailwindcss').Config} */
    export default {
    content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
    theme: {
    extend: {
    keyframes: {
    rotate360: {
    "0%": { transform: "rotate(0deg)" },
    "100%": { transform: "rotate(360deg)" },
    },
    textRotation: {
    "0%": { transform: "rotate(0deg)" },
    "20%": { transform: "rotate(25deg)" },
    "50%": { transform: "rotate(0deg)" },
    "80%": { transform: "rotate(-25deg)" },
    "100%": { transform: "rotate(0deg)" },
    },
    },
    animation: {
    rotate360: "rotate360 2s linear infinite",
    textRotation: "textRotation 2s linear infinite",
    },
    },
    },
    plugins: [],
    };