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.9k

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

User Profile Sidebar Menu
A clean and modern user profile sidebar menu built with TailwindCSS. This component displays a user’s profile picture, name, and a vertical navigation menu with links such as Dashboard, Order History, Account Details, Address, Reviews, and Logout. Ideal for account dashboards in web applications, the design features rounded corners, subtle shadows, and interactive hover effects, delivering a smooth and user-friendly experience.

Author:
SHARIFUL ISLAM

7 months ago

912
Profile Card
Responsive modern profile card

Author:
Rajesh Maheshwari

7 months ago

736
Sign up form

Author:
Rajesh Maheshwari

7 months ago

795
Signup And Signin page
Signup And Signin page with tab controller

Author:
Akram Khan

1 year ago

2.6k
card appetizer
ss

Author:
Anonymous

11 months ago

1.6k
content section

Author:
Crimson

8 months ago

879
card profie
profile card

Author:
Aman kumar

1 year ago

3.9k
email card
email card

Author:
Rushikesh Latpate

2 months ago

308
Simple responsive cards

Author:
Shakti

2 years ago

9.6k
Active Beauty Main Page

Author:
Maxim

6 months ago

898
Responsive Grid with Featured image

Author:
_Amar_

3 years ago

12.3k
Why Us section with hover animation
Why to choose us section, responsive and hove animation

Author:
Amit Pachange

1 year ago

4.6k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components