Home
Geoffrey Callaghan
free tailwind personal portfolio template

free tailwind personal portfolio template

This tailwind example is contributed by Geoffrey Callaghan, on 01-Feb-2024. Component is made with Tailwind CSS v3. It is responsive. similar terms for this example are Services,Why choose us

Form Feature showcase

Author Geoffrey Callaghan

4.7k

Fork Fullscreen

<!DOCTYPE html>
<html lang="en">
    

  
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Quirky Portfolio</title>
    
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
    
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" rel="stylesheet">
</head>

<nav class="bg-gray-800 text-white py-4">
        <div class="container mx-auto px-4">
            <a href="#" class="text-2xl font-bold">🚀 My Quirky Portfolio 🎨</a>
            <ul class="flex space-x-4">
                <li><a href="#" class="hover:text-gray-300">🏠 Home</a></li>
                <li><a href="#" class="hover:text-gray-300">💡 Projects</a></li>
            </ul>
        </div>
    </nav>

<header class="py-20 bg-gradient-to-b from-gray-800 to-gray-700 text-center">
        <div class="container mx-auto px-4">
            <h1 class="text-5xl font-bold text-white mb-4">👋 Hey there! Welcome to My Crazy Portfolio! 🎉</h1>
            <p class="mt-2 text-lg text-gray-200">I code, I design, I drink coffee (a lot), and sometimes, I even sleep! 🛌</p>
        </div>
    </header>

<section class="py-16">
        <div class="container mx-auto px-4">
            <h2 class="text-4xl font-bold mb-8 text-center">🚀 Featured Projects</h2>
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-10">
                
                <div class="bg-white rounded-lg shadow-md overflow-hidden">
                    <img src="https://picsum.photos/seed/picsum/400/400" alt="Project Image" class="w-full h-64 object-cover">
                    <div class="p-6">
                        <h3 class="text-2xl font-bold mb-4">Project Title</h3>
                        <p class="text-gray-700">This project is so cool, even my cat approves! 🐱</p>
                        <a href="#" class="block text-blue-600 hover:underline mt-4">Check it out! 🚀</a>
                    </div>
                </div>
                <div class="bg-white rounded-lg shadow-md overflow-hidden">
                    <img src="https://picsum.photos/seed/picsum/400/400" alt="Project Image" class="w-full h-64 object-cover">
                    <div class="p-6">
                        <h3 class="text-2xl font-bold mb-4">Project Title</h3>
                        <p class="text-gray-700">This project is so cool, even my cat approves! 🐱</p>
                        <a href="#" class="block text-blue-600 hover:underline mt-4">Check it out! 🚀</a>
                    </div>
                </div>
                <div class="bg-white rounded-lg shadow-md overflow-hidden">
                    <img src="https://picsum.photos/seed/picsum/400/400" alt="Project Image" class="w-full h-64 object-cover">
                    <div class="p-6">
                        <h3 class="text-2xl font-bold mb-4">Project Title</h3>
                        <p class="text-gray-700">This project is so cool, even my cat approves! 🐱</p>
                        <a href="#" class="block text-blue-600 hover:underline mt-4">Check it out! 🚀</a>
                    </div>
                </div>
                
            </div>
        </div>
    </section>

<section class="bg-gray-200 py-16">
        <div class="container mx-auto px-4">
            <h2 class="text-4xl font-bold mb-8 text-center">✉️ Get in Touch!</h2>
            <div class="max-w-md mx-auto">
                <form  action="https://fabform.io/f/xxxxx" method="post" class="space-y-4">
<div>
                        <label for="name" class="block font-bold mb-2">Your Name</label>
                        <input type="text" id="name" name="name" class="w-full border-gray-300 rounded-md px-4 py-2 focus:outline-none focus:border-blue-500" placeholder="Enter your name">
                    </div>
                    <div>
                        <label for="email" class="block font-bold mb-2">Your Email</label>
                        <input type="email" id="email" name="email" class="w-full border-gray-300 rounded-md px-4 py-2 focus:outline-none focus:border-blue-500" placeholder="Enter your email">
                    </div>
                    <div>
                        <label for="message" class="block font-bold mb-2">Your Message</label>
                        <textarea name="message" id="message" rows="4" class="w-full border-gray-300 rounded-md px-4 py-2 focus:outline-none focus:border-blue-500" placeholder="Enter your message"></textarea>
                    </div>
                    <button type="submit" class="bg-blue-600 text-white font-bold py-2 px-4 rounded-md hover:bg-blue-700 transition duration-300">Send Message 🚀</button>
                </form>
                <p class="mt-4 text-center">Prefer email? Send me an email <a target=_blank" href="https://veilmail.io/irish-geoff" class="text-blue-600 font-bold hover:underline">https://veilmail.io/irish-geoff</a> instead!</p>
            </div>
        </div>
    </section>

<footer class="bg-gray-800 text-white py-8">
        <div class="container mx-auto px-4 text-center">
            <p>&copy; 2024 My Quirky Portfolio. All rights reserved. Designed with ❤️ by [Your Name]</p>
            <p>Powered by <a href="https://fabform.io" class="text-blue-400 hover:underline">FabForm.io</a></p>
        </div>
    </footer>

</body>

</html>

Related Examples

Features list with images and description

Author:
Noah Schmidt

2 years ago

13.8k
beautiful tailwind contact form
beautiful tailwind contact form

Author:
Geoffrey Callaghan

1 year ago

5.4k
tailwind contact form
tailwind contact form

Author:
Geoffrey Callaghan

1 year ago

2.9k
tailwind contact form
tailwind contact form

Author:
Geoffrey Callaghan

1 year ago

2k
Login / Register Form
Tailwind CSS styling only – no frameworks required Smooth tab switch with JavaScript Fully responsive for mobile and desktop Clean, modern form design with interactive elements

Author:
KULDEEP

1 month ago

360
stepper
The Stepper Component is a versatile and user-friendly tool designed to guide users through a sequence of steps. Whether you're building a multi-step form, a tutorial, or any process that requires sequential navigation, this component makes it easy to implement and customize.

Author:
Abhiraj

6 months ago

1.1k
progress-bar with Tailwind CSS and Alpinejs

Author:
Quêmia

11 months ago

1.7k
Contact Form
with hidden email

Author:
Geoffrey Callaghan

1 year ago

6.3k
Tailwind CSS Service Card Component
An HTML and Tailwind CSS code snippet for creating a responsive service card component. Ideal for marketplaces, portfolios, or listing pages. Includes sections for image/video preview, seller info, rating, pricing, and additional details. Easy to customize using Tailwind utility classes.

Author:
Hamza Atig

3 months ago

542
Tag input with Tailwind CSS and Alpinejs

Author:
Michael Andreuzza

1 year ago

2.4k
Sign up for newsletter form

Author:
Amit Pachange

2 years ago

11.7k
Login page with tailwind (SB admin 2)
This component features a split-screen design with a background image on one side and a registration form on the other.

Author:
Anonymous

1 year ago

2.8k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components