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.7k
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.8k
tailwind contact form
tailwind contact form

Author:
Geoffrey Callaghan

1 year ago

1.9k
Responsive Bank Card Information Form with TailwindCSS
A sleek and modern bank card information form built with raw HTML and styled using TailwindCSS. This responsive form includes fields for cardholder name, card number, expiry date, and CVV, designed for clean aesthetics and ease of use.

Author:
SHARIFUL ISLAM

5 months ago

579
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

2 months ago

460
Extreme Signup Page
I create a signup page using html, tailwindcss and font awesome icons using cdn.

Author:
Akram Khan

1 year ago

2.1k
countdown with Tailwind CSS and Alpinejs

Author:
Michael Andreuzza

1 year ago

1.8k
Contact me form

Author:
Arya

2 years ago

11.7k
Modern E-commerce Product Card with TailwindCSS
This product card is designed for e-commerce platforms using TailwindCSS. It features a discount badge, product image carousel, quick view and quick order buttons, ratings, product name, brand details, dynamic pricing with a strike-through original price, and a prominent add-to-cart button. The clean and professional layout is perfect for showcasing products on online stores.

Author:
SHARIFUL ISLAM

5 months ago

1.2k
Simple contact us form

Author:
Geoffrey Callaghan

1 year ago

6.5k
Responsive Form2

Author:
ABDO-SY

4 months ago

597

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components