Experience Card

Experience card section you can use for portfolio or other profiles.

This tailwind example is contributed by Khalid, on 08-Mar-2024. Component is made with Tailwind v3.4. It is responsive. It supports dark mode. similar terms for this example are Author box, User information,CV template

Card Profile Resume template

Author Khalid

Tailwind v3.4 4.4k 12

Fork Fullscreen

<div class="bg-white flex justify-center items-center w-screen h-screen p-5">
    <div class='flex flex-col items-center justify-between bg-white dark:bg-gray-800 shadow-md shadow-gray-300 text-gray-800 dark:text-gray-200 border border-gray-200 dark:border-gray-600 w-full md:w-8/12 mx-auto h-auto rounded-xl transition-all ease-in-out duration-500 mb-4 py-2 px-2 md:px-4'>
        <div class='w-full flex items-center justify-between'>
            <div class='flex items-center justify-center px-2 md:px-6'>
                <img class='w-16 hidden rounded-full ring-2 ring-green-600 shadow-lg shadow-green-600 m-2 md:block' src='https://img.freepik.com/free-vector/illustration-user-avatar-icon_53876-5907.jpg?size=626&ext=jpg' alt="" />
                <div class='text-left '>
                    <h4 class='text-lg md:text-2xl lg:text-3xl ease-in-out duration-1000 uppercase'><span class='text-red-500'>Code</span>101</h4>
                    <h4 class='text-sm md:text-base font-medium dark:text-gray-200'>Software Engineer</h4>
                </div>
            </div>
            <div class='text-sm md:text-base text-right p-2 gap-4 ease-in-out duration-500'>
                <p class='text-sm md:text-base text-gray-800 dark:text-gray-200'>July 2022 - Present </p>
                <p class='text-sm md:text-base text-gray-800 dark:text-gray-200'>Techtopia, Digital Realm</p>
            </div>
        </div>
        <div class='text-left p-2'>
            <p class='text-sm lg:text-base text-gray-600 dark:text-gray-400 pb-4'>I am a Software Engineer currently employed at Code101, where I work as a full-stack developer as part of the Web Application Development team. Together, we utilize ReactJS and NodeJS to create software solutions that provide users with a seamless and enjoyable experience.</p>
            <h4 class='text-base text-green-400 font-semibold'>Key Responsibilities</h4>
            <ul class='text-sm list-disc ml-6'>
                <li>Develop and maintain the NodeJS server and backend of the Web Application team's software solutions.</li>
                <li>Collaborate with the full-stack developer to contribute to the application's frontend development.</li>
                <li>Write reusable, flexible, and high-quality code to ensure the reliability and longevity of our products.</li>
            </ul>
        </div>
    </div>
</div>

Related Examples

Modern resume template
modern resume template with data

Amit Pachange

3 years ago

23.3k
Profile card
Profile card with social icons

Krishna Gudpalle

4 years ago

13.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:

Prashant

4 years ago

65.6k
User profile card with Cover Image

Noob

4 years ago

33.9k
User Profile Card
Useful for testimonials and reviews section

Abhijit Sen

3 years ago

11.2k
Minimal Profile card

Abhijit Sen

3 years ago

12.3k
Responsive user card with tailwind

Gopi Yadav

3 years ago

11.9k
Author box

Mr Robot

3 years ago

12.5k
Profile card

Mr Robot

3 years ago

13.4k
User profile card

Mr Robot

3 years ago

12k
Testimonial card with image

Simon Scheffer

3 years ago

12.8k
Basic Resume template
simple and clean layout that provides a professional look.

R.P Ketan

3 years ago

28.1k