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

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

Team Members Showcase with Portfolio Backlink
Showcase your team's talent with this beautifully designed and responsive team members grid. Each card includes the member's photo, name, role, and social links. A special portfolio backlink is included to highlight your personal contributions as a developer. Supports light and dark modes.

Author:
Abhiraj

9 months ago

1.3k
Profile Card
Responsive modern profile card

Author:
Rajesh Maheshwari

8 months ago

752
Pricing card
basic pricing card with single price

Author:
Amit Pachange

2 years ago

10.6k
Customer testimonial card
Responsive user testimonial card with image

Author:
Arya

3 years ago

11.8k
Features
A clean, responsive feature section with icons, smooth hover effects, soft backgrounds, and clear titles for modern website designs.

Author:
SAURAV SINGH

3 months ago

183
Border gradient

Author:
Samuel Dawson

2 years ago

16.1k
Card with Dark Mode
For blog post and e-commerce websites

Author:
OmKar Mehta

1 year ago

2.2k
Responsive Multi-Tier Pricing Table Component
flexible and responsive 3-tier pricing table component built with HTML and Tailwind CSS. Features distinct visual styles for different plans (e.g., highlighting a recommended option), adapts to various screen sizes, and supports both light and dark color schemes. Uses generic placeholders for easy adaptation to any product or service.

Author:
Hamza Atig

6 months ago

884
Landing page

Author:
Maxim

7 months ago

1.6k
Info Card

Author:
Prem..

3 years ago

19.4k
Chat Bot
Simulation of a chat bot that can be used for conversations as a sketch idea

Author:
Ameth Galarcio

1 year ago

3.2k
YouTube Community Post UI Mockup
A static HTML and Tailwind CSS component mimicking the user interface of a YouTube Community Post. This mockup features the channel header (avatar, name, verified badge, timestamp), post content (text and optional media), engagement actions (Like, Dislike, Comment, Share with counts), and the 'Add a comment' section. It's designed to be responsive, supports YouTube's light and dark themes via custom styling, and uses accurate iconography.

Author:
Hamza Atig

6 months ago

885

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components