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

Author:
Geoffrey Callaghan

1 year ago

4.4k
tailwind contact form
tailwind contact form

Author:
Geoffrey Callaghan

11 months ago

2.6k
tailwind contact form
tailwind contact form

Author:
Geoffrey Callaghan

11 months ago

1.8k
Experiance & Explanation
Here my beautiful component that is being seen and used more and more. Hopefully you like it and find it useful too

Author:
Matti

4 months ago

571
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

1 year ago

11.2k
Checkout form

Author:
Sienna

2 years ago

13.4k
Responsive Contact Section Using Tailwind CSS
This HTML and Tailwind CSS snippet creates a visually appealing and responsive contact section. Designed to adapt seamlessly across different screen sizes, this component features two main areas: the contact information block and a contact form. The contact block displays essential details like phone, email, and address, alongside social media links, all encapsulated within a cyan-themed card with rounded corners and shadow effects for depth. The form area, highlighted with a contrasting white background, ensures a user-friendly interface for submitting contact details. This code snippet is perfect for integration into any modern web application requiring a responsive and stylish contact section.

Author:
Fathallah Anass

11 months ago

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

Author:
seth dridi

9 months ago

1.4k
Survey form
User survey form

Author:
JaxStone

2 years ago

15.2k
Input Formulario
Input used in the form Link form: https://tailwindflex.com/@ameth1208/login

Author:
Ameth Galarcio

10 months ago

1.6k
Credit / Debit card payment information form

Author:
Santos78

2 years ago

19.2k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components