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

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

Blog post cards
responsive blog post cards

Author:
Mr Robot

3 years ago

12.8k
User Feedback Card
A responsive user feedback card that displays user information, their role, and a testimonial. The card is styled using Tailwind CSS for a clean and modern look.

Author:
Anum Shahana

1 year ago

1.6k
cards
group of cards

Author:
TakaMorY

6 months ago

432
HighLight
Highlight section. Find it makecomponents.com

Author:
makecomponents

1 year ago

2.2k
Profile Card
Simple and Attractive Profile card in tailwind css

Author:
KULDEEP

8 months ago

738
Hover effect card

Author:
Samuel Dawson

3 years ago

32.3k
IMDB score and votes box

Author:
Darius G

2 years ago

8.8k
Simple product card

Author:
farid

1 year ago

1.7k
card
card section. find it makecomponents.com

Author:
makecomponents

1 year ago

2k
Info Card
Information card with image

Author:
Brandon D

3 years ago

9.8k
Premium Tailwind CSS Card Component
Discover this elegant premium card component built with Tailwind CSS featuring the Poppins font. This modern, responsive design features glassmorphism effects, gradient borders, smooth animations, and a sophisticated color scheme, making it ideal for showcasing premium products or services.

Author:
CodewithFaraz

6 months ago

311
Contact us form with map
Contact us form with map

Author:
Chithira Kumar M

2 years ago

12.4k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components