Home
Anonymous
free tailwind personal portfolio template

free tailwind personal portfolio template

Forked from> @geoffrey-callaghan/free-tailwind-personal-portfolio-template

This tailwind example is contributed by Anonymous, on 18-Aug-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 Anonymous

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

beautiful tailwind contact form
beautiful tailwind contact form

Author:
Geoffrey Callaghan

1 year ago

5.8k
free tailwind personal portfolio template
free tailwind personal portfolio template

Author:
Geoffrey Callaghan

1 year ago

4.9k
tailwind contact form
tailwind contact form

Author:
Geoffrey Callaghan

1 year ago

3.1k
tailwind contact form
tailwind contact form

Author:
Geoffrey Callaghan

1 year ago

2k
Contact Us form

Author:
ABDO-SY

6 months ago

934
Product feature section
Showcase product features with an image

Author:
Anonymous

2 years ago

13.6k
Service section

Author:
inbarajan P

1 year ago

1.6k
tailwind services section
display features/services of your product

Author:
L.J. Weber

2 years ago

20.1k
Checkout form
A versatile checkout form component for users to provide shipping and payment information. It has fields for first name, last name, address, city, state, ZIP code, card number, expiration date, and CVV.

Author:
Anonymous

2 years ago

12.6k
Simple Form

Author:
Mr Robot

3 years ago

9.7k
Work Showcase Cards
Highlight your top projects or products with these cards, featuring images and brief descriptions. This example has a subtle hover effect.

Author:
Computer guy

2 years ago

12k
form text

Author:
Severino Victtorino

5 months ago

675

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components