Home
Geoffrey Callaghan
Basic Tailwind Resume template

Basic Tailwind Resume template

Forked from> @rp-ketan/basic-resume-template

Tailwind resume. simple and clean layout that provides a professional look.

This tailwind example is contributed by Geoffrey Callaghan, on 20-Jun-2024. Component is made with Tailwind CSS v3. It is responsive. similar terms for this example are Author box, User information,CV template

Profile Resume template

Author Geoffrey Callaghan

230

Fork Fullscreen

<div class="bg-gray-100">
    <div class="container mx-auto py-8">Resume
        <div class="grid grid-cols-4 sm:grid-cols-12 gap-6 px-4">
            <div class="col-span-4 sm:col-span-3">
                <div class="bg-white shadow rounded-lg p-6">
                    <div class="flex flex-col items-center">
                        <img src="https://polywork-images-proxy.imgix.net/https%3A%2F%2Fwww.polywork.com%2Ffabform%2Favatar%3Fversion%3D0cff680649e03a4ca971c6e9ee8a2496?ixlib=rails-4.3.1&w=512&h=512&fit=crop&auto=format&s=b097b0d3e3db5a783064dd30ba909612" class="w-32 h-32 bg-gray-300 rounded-full mb-4 shrink-0">

</img>
                        <h1 class="text-xl font-bold">Geoffrey Callaghan</h1>
                        <p class="text-gray-700">Software Developer</p>
                        <div class="mt-6 flex flex-wrap gap-4 justify-center">
                            <a href="https://veilmail.io/irish-geoff" class="bg-blue-500 hover:bg-blue-600 text-white py-2 px-4 rounded">veilmail.io/irish-geoff</a>
                            <a href="#" class="bg-gray-300 hover:bg-gray-400 text-gray-700 py-2 px-4 rounded">Resume</a>
                        </div>
                    </div>
                    <hr class="my-6 border-t border-gray-300">
                    <div class="flex flex-col">
                        <span class="text-gray-700 uppercase font-bold tracking-wider mb-2">Skills</span>
                        <ul>
                            <li class="mb-2">JavaScript</li>
                            <li class="mb-2">React</li>
                            <li class="mb-2">Node.js</li>
                            <li class="mb-2">HTML/CSS</li>
                            <li class="mb-2">Tailwind Css</li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="col-span-4 sm:col-span-9">
                <div class="bg-white shadow rounded-lg p-6">
                    <h2 class="text-xl font-bold mb-4">About Me</h2>
                    <p class="text-gray-700">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed finibus est
                        vitae tortor ullamcorper, ut vestibulum velit convallis. Aenean posuere risus non velit egestas
                        suscipit. Nunc finibus vel ante id euismod. Vestibulum ante ipsum primis in faucibus orci luctus
                        et ultrices posuere cubilia Curae; Aliquam erat volutpat. Nulla vulputate pharetra tellus, in
                        luctus risus rhoncus id.
                    </p>

</a>
                      
                    </div>

<h2 class="text-xl font-bold mt-6 mb-4">Experience</h2>
                    <div class="mb-6">
                        <div class="flex justify-between flex-wrap gap-2 w-full">
                            <span class="text-gray-700 font-bold">Web Developer</span>
                            <p>
                                <span class="text-gray-700 mr-2">at ABC Company</span>
                                <span class="text-gray-700">2017 - 2019</span>
                            </p>
                        </div>
                        <p class="mt-2">
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed finibus est vitae
                            tortor ullamcorper, ut vestibulum velit convallis. Aenean posuere risus non velit egestas
                            suscipit.
                        </p>
                    </div>
                    <div class="mb-6">
                        <div class="flex justify-between flex-wrap gap-2 w-full">
                            <span class="text-gray-700 font-bold">Web Developer</span>
                            <p>
                                <span class="text-gray-700 mr-2">at ABC Company</span>
                                <span class="text-gray-700">2017 - 2019</span>
                            </p>
                        </div>
                        <p class="mt-2">
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed finibus est vitae
                            tortor ullamcorper, ut vestibulum velit convallis. Aenean posuere risus non velit egestas
                            suscipit.
                        </p>
                    </div>
                    <div class="mb-6">
                        <div class="flex justify-between flex-wrap gap-2 w-full">
                            <span class="text-gray-700 font-bold">Web Developer</span>
                            <p>
                                <span class="text-gray-700 mr-2">at ABC Company</span>
                                <span class="text-gray-700">2017 - 2019</span>
                            </p>
                        </div>
                        <p class="mt-2">
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed finibus est vitae
                            tortor ullamcorper, ut vestibulum velit convallis. Aenean posuere risus non velit egestas
                            suscipit.
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Related Examples

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

Author:
R.P Ketan

2 years ago

24.6k
Modern resume template
modern resume template with data

Author:
Amit Pachange

1 year ago

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

Author:
Khalid

11 months ago

2.4k
Portfolio Hero Section 2
visually stunning and captivating hero section component for your portfolio website.

Author:
Samuel Abera

8 months ago

3.4k
Modern CV Template - Stylish HTML and Tailwind CSS Design for Professionals
Download this modern CV template crafted with HTML and Tailwind CSS. Featuring a clean, stylish design and easy customization, this CV template is perfect for professionals looking to make a strong impression. Showcase your skills, experience, and education with a visually appealing and responsive layout.

Author:
Hezron Okoko

5 months ago

1.5k
Portfolio Hero Section 4

Author:
Samuel Abera

3 months ago

1.7k
Responsive Portfolio Webpage with Tailwind CSS
This is a reusable and responsive portfolio webpage template created with HTML and Tailwind CSS. Designed for developers or creatives, the template includes essential sections like Header, Hero, About, Skills, Experience, Projects, Testimonials, Contact Form, and Footer. It features a clean, modern design and is fully customizable without requiring JavaScript. Perfect for showcasing personal or professional work on the web.

Author:
Ayyamperumal S

3 weeks ago

435
Modern Responsive Footer with Tailwind CSS
This sleek and modern responsive footer is built using HTML and Tailwind CSS. It features three sections: brand information, useful links, and social media icons. The footer includes smooth hover effects, subtle fade-in animations, and a fully responsive design that adapts seamlessly to different screen sizes. Perfect for websites looking for a professional and stylish footer section.

Author:
Ayyamperumal S

1 week ago

146
Profile card
Profile card with social icons

Author:
Krishna Gudpalle

2 years ago

12k
Resume template for tech field
IT industry resume layout

Author:
Nishant Trivedi

1 year ago

8.5k
Profit Card
Profit card with deatils

Author:
dongol heart

2 months ago

664
Responsive portfolio with dark mode
responsive and support dark mode .portfolio website

Author:
ABDESLAMI ACHRAF

4 months ago

1.9k

Explore components by Tags

Didn't find component you were looking for?

Search from 2000+ components