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

1.1k

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

Weather info Card
Inspired from Mamba UI

Author:
Ron Hicks

2 years ago

11.1k
Amazing E-commerce card
An amazing e-commerce card with stunning hover effect

Author:
Robert Chunga

3 months ago

1.1k
Beautiful post cards

Author:
Matej Kovač

10 months ago

1.9k
Tailwind AoPS Demo - Isabel
Starter code for an interactive Tailwind Demo

Author:
Isabel McGuigan

8 months ago

1.6k
Beautiful Info card
Info card with info type section on the corner.

Author:
TailwindFlex

2 years ago

9.1k
Info cards for admin panal

Author:
Sophia Baker

2 years ago

8.7k
Card with link
This example can be used to show a CTA as a link instead of a button inside the card.

Author:
Md. Tofayel islam

11 months ago

1.6k
Testimonial card with image

Author:
Simon Scheffer

2 years ago

10.6k
User Profile Card
Useful for testimonials and reviews section

Author:
Abhijit Sen

2 years ago

9.7k
Blog Card

Author:
Md. Tofayel islam

3 months ago

419
Beautiful card design with image

Author:
Brandon D

2 years ago

11.7k
User Profile Card
The card features a user's profile picture, name, location, and options for interactions. It has a clean and modern design with rounded edges and icons for user engagement. It also has support for dark mod:

Author:
Prashant

2 years ago

58.8k

Explore components by Tags

Didn't find component you were looking for?

Search from 2000+ components