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.3k
free tailwind personal portfolio template
free tailwind personal portfolio template

Author:
Geoffrey Callaghan

1 year ago

4.6k
tailwind contact form
tailwind contact form

Author:
Geoffrey Callaghan

1 year ago

2.7k
tailwind contact form
tailwind contact form

Author:
Geoffrey Callaghan

1 year ago

1.9k
Credit card form 2

Author:
Oliver Hansen

2 years ago

13.8k
Login Form

Author:
Amit Pachange

2 years ago

12.2k
Warb feature
Here another idea... [update] - mobile device fixed (curr iPh, Smg)

Author:
Matti

6 months ago

1.8k
Comment form

Author:
Sophia Baker

2 years ago

11.9k
update user
it is the layout for creating an event

Author:
seth dridi

10 months ago

1.5k
User registration form with Instructions

Author:
Fagundo67

2 years ago

23.7k
Employee Data Management System TailwindCSS,Html
This project is made of only html and even tailwind is using CDN to save storage space. Best for SPA and routing with other components .

Author:
Siva Naga Malleswararao Kurakula

4 months ago

673
Animated Iogin form
This section showcases a series of interactive image cards that reveal descriptive text on hover. Built using Tailwind CSS and Astro.js, each card features a smooth animation, background blur, and opacity transition, enhancing the user experience while presenting visually engaging content.

Author:
nicoleshal07

1 month ago

116

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components