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

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

Horizontal card with image

Author:
Amit Pachange

2 years ago

13.8k
Minimal Testimonial Card

Author:
Amit Pachange

2 years ago

8.3k
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

61.5k
profile3

Author:
pablitodgb

1 week ago

16
Feature card

Author:
Matti

5 months ago

784
Info Card
info card with description

Author:
Prashant

2 years ago

12.3k
Responsive 3-Tier Pricing Card Section
A clean and responsive pricing table component featuring three distinct tiers (e.g., Basic, Standard, Premium) presented in a card layout. Built with HTML and Tailwind CSS, it stacks vertically on small screens and transitions to a side-by-side view on medium screens (md breakpoint - 768px) and up. Each plan card includes a placeholder icon, title, description, price details, a call-to-action button, and a bulleted list of features with checkmarks. The generic content makes it easy to adapt for various websites or applications needing a clear pricing comparison structure.

Author:
Hamza Atig

2 months ago

181
404 Error card
Error card at the center

Author:
Shakti

2 years ago

9k
Card grid for blog Posts / Articles

Author:
Abhijit Sen

2 years ago

22.9k
Product review card

Author:
Moriba Traore

2 years ago

14.7k
Admin dashboard cards
Card groups for showing stats/info. Change it for responsiveness for small and medium screen

Author:
RShubham kumar

1 year ago

3.7k
Simple responsive cards

Author:
Shakti

2 years ago

9.2k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components