Home
Akram Khan
Gridaient Card Information Section

Gridaient Card Information Section

a card in neon design

This tailwind example is contributed by Akram Khan, on 13-Sep-2024. Component is made with Tailwind CSS v3. It is responsive.

Card

Author Akram Khan

2.5k

Fork Fullscreen

<body class="bg-gradient-to-br from-purple-900 via-blue-900 to-indigo-900 flex items-center justify-center min-h-screen p-4">
    <div class="bg-black bg-opacity-50 rounded-lg shadow-2xl p-8 max-w-md w-full neon-border">
        <div class="flex items-center justify-center mb-6">
            <img class="w-32 h-32 rounded-full object-cover border-4 border-pink-500" src="https://via.placeholder.com/150" alt="Profile Picture">
        </div>
        <h2 class="text-3xl font-bold text-center text-white mb-2 neon-text">John Dey</h2>
        <p class="text-center text-pink-300 mb-4">Master of Computer Applications (MCA)</p>
        <div class="border-t border-pink-500 pt-4 space-y-2">
            <p class="text-white"><span class="font-semibold text-pink-300">Father's Name:</span> John Smith</p>
            <p class="text-white"><span class="font-semibold text-pink-300">Date of Birth:</span> 15 August 1995</p>
            <p class="text-white"><span class="font-semibold text-pink-300">University:</span> XYZ University</p>
            <p class="text-white"><span class="font-semibold text-pink-300">Specialization:</span> Artificial Intelligence</p>
            <p class="text-white"><span class="font-semibold text-pink-300">Skills:</span> Python, Machine Learning, Data Analysis</p>
        </div>
        <div class="mt-6 flex justify-center space-x-4">
            <button class="bg-gradient-to-r from-pink-500 to-purple-500 hover:from-pink-600 hover:to-purple-600 text-white font-bold py-2 px-4 rounded-full transition duration-300 ease-in-out transform hover:scale-105 neon-border">
                Contact Me
            </button>
            <button class="bg-gradient-to-r from-blue-500 to-teal-500 hover:from-blue-600 hover:to-teal-600 text-white font-bold py-2 px-4 rounded-full transition duration-300 ease-in-out transform hover:scale-105 neon-border">
                View Portfolio
            </button>
        </div>
    </div>
</body>

Related Examples

Profit Card
Profit card with deatils

Author:
dongol heart

1 year ago

2.2k
Form package

Author:
Hunter Guru

1 year ago

2.6k
Card Princing

Author:
Raul antonio de la cruz hernandez

2 months ago

161
opulent
this a page didicated for laptops,phones using tailwindcss

Author:
ishimwe shadad

10 months ago

1.2k
Services
Card Services Section. find it makecomponents.com

Author:
makecomponents

1 year ago

2.3k
Cards
the best tailwind cards with responsive

Author:
irahoza daniel

10 months ago

971
Animated Ripple Avatar
Ripple Effect Avatar (Tailwind CSS Component) A visually striking animated component that displays a centered avatar or image surrounded by expanding ripple circles. Built with Tailwind CSS and custom animations, this effect simulates a pulsing or water ripple reaction, drawing attention to the central image. Ideal for user profile sections, hero banners, landing pages, or highlighted features in modern web interfaces. The ripples gradually fade and expand, creating a soft, calming motion that enhances interactivity and depth.

Author:
Code Master(Mfuranziza Dusabe Hamza)

10 months ago

1.3k
Animated Info Card
Animated info card

Author:
Shivam Vishwakarma

1 year ago

1.4k
Trending Users
Tailwind Flex Trending Users Card Design

$$@(\/)(\/)¥$ Author:
$@(\/)(\/)¥

1 year ago

4.2k
Dashboard Stats Widget
Here’s a sleek Stats Widget built with Tailwind CSS that you can sell on TailwindFlex. It includes animated hover effects, trend indicators, and responsive design.

Author:
dev-fab250

10 months ago

1.8k
Features cards section
Features cards section with dark theme

Author:
Sophia Baker

3 years ago

10.6k
Card profile
profile card

Author:
Aman kumar

2 years ago

2.9k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components