Skip to content
geeksforgeeks
  • Courses
    • DSA to Development
    • Get IBM Certification
    • Newly Launched!
      • Master Django Framework
      • Become AWS Certified
    • For Working Professionals
      • Interview 101: DSA & System Design
      • Data Science Training Program
      • JAVA Backend Development (Live)
      • DevOps Engineering (LIVE)
      • Data Structures & Algorithms in Python
    • For Students
      • Placement Preparation Course
      • Data Science (Live)
      • Data Structure & Algorithm-Self Paced (C++/JAVA)
      • Master Competitive Programming (Live)
      • Full Stack Development with React & Node JS (Live)
    • Full Stack Development
    • Data Science Program
    • All Courses
  • Tutorials
    • Data Structures & Algorithms
    • ML & Data Science
    • Interview Corner
    • Programming Languages
    • Web Development
    • CS Subjects
    • DevOps And Linux
    • School Learning
  • Practice
    • Build your AI Agent
    • GfG 160
    • Problem of the Day
    • Practice Coding Problems
    • GfG SDE Sheet
  • Contests
    • Accenture Hackathon (Ending Soon!)
    • GfG Weekly [Rated Contest]
    • Job-A-Thon Hiring Challenge
    • All Contests and Events
  • Tailwind CSS Tutorial
  • Tailwind Interview Questions
  • Tailwind Layout
  • Tailwind Flexbox
  • Tailwind Grid
  • Tailwind Alignment
  • Tailwind Spacing
  • Tailwind Sizing
  • Tailwind Typography
  • Tailwind Backgrounds
  • Tailwind Borders
  • Tailwind Effects
  • Tailwind Filters
  • Tailwind Tables
  • Tailwind Transitions and Animation
  • Tailwind Transforms
  • Tailwind Interactivity
  • CSS Frameworks
  • Web Technology
Open In App
Next Article:
Create A Real Estate Website Using React and Tailwind CSS
Next article icon

Create a Portfolio Website Template using Tailwind CSS

Last Updated : 28 Mar, 2024
Comments
Improve
Suggest changes
Like Article
Like
Report

In this tutorial, we'll guide you through the process of creating a stunning portfolio website using Tailwind CSS, a powerful CSS framework that makes styling web pages easy and efficient.

Preview of Final Output: Let us have a look at how the final output will look like.

img-(1)
Personal Portfolio

Prerequisites:

  • HTML
  • CSS
  • Tailwind CSS

Approach:

  • Create an HTML file and name it index.html. Then, link the Tailwind CSS library by adding the CDN link in the head section of your HTML file.
  • Design the layout of your portfolio website. Create sections for About Me, Projects, Skills, and Contact Me
  • Utilize Tailwind CSS for styling to achieve a modern and professional look.
  • Create responsive layout design for optimal viewing across various devices.
  • Incorporate interactive navigation menu for easy navigation between different sections.

Tailwind CSS CDN Link:

<script src="https://cdn.tailwindcss.com"></script>

Example: The below mentioned code implements the above approach

HTML 
<!DOCTYPE html> <html lang="en">  <head>     <title>Portfolio Website</title>     <script src="https://cdn.tailwindcss.com"></script> </head>  <body class="bg-gradient-to-b from-green-500 to-green-800 text-white">     <!-- Sticky container for navbar and profile image -->     <div class="sticky top-0 z-50">         <!-- Navigation menu -->         <nav class="bg-gray-700 py-2 fixed w-full top-0 left-0 z-50 h-20">             <div class="container flex justify-between items-center my-5">                 <div class="text-xl font-bold ml-40">                       Geek's Portfolio                   </div>                 <div class="flex space-x-4">                     <a class="hover:bg-gray-800 text-white px-4 py-2                                no-underline transition duration-300                                bg-transparent hover:bg-gray-700"                         href="#about">About</a>                     <a class="hover:bg-gray-800 text-white px-4 py-2                                no-underline transition duration-300                                bg-transparent hover:bg-gray-700"                         href="#projects">Projects</a>                     <a class="hover:bg-gray-800 text-white px-4 py-2                                no-underline transition duration-300                                bg-transparent hover:bg-gray-700"                         href="#skills">Skills</a>                     <a class="hover:bg-gray-800 text-white px-4 py-2                                no-underline transition duration-300                                bg-transparent hover:bg-gray-700"                         href="#contact">Contact</a>                 </div>             </div>         </nav>          <!-- Profile image -->         <div class="relative">             <div class="w-36 h-36 rounded-full bg-white absolute top-0                          left-1/2 transform -translate-x-1/2 z-50">                 <img alt="imageofProfile"                       class="w-36 h-36 rounded-full border-4 border-green-600"                      src= "https://media.geeksforgeeks.org/wp-content/uploads/20240327094110/pro.jpg" />             </div>         </div> <!-- White circle for profile image -->     </div>      <!-- Main content -->     <div class="mb-16 container mx-auto pt-20">         <!-- About section -->         <section id="about"             class="m-20 justi-center text-center mt-20 relative                     my-5 mb-16 px-4 py-4 rounded-lg shadow-md relative                     overflow-hidden bg-gradient-to-b from-gray-600 to-gray-800">             <h2 class="text-2xl font-bold mb-4 text-center">                   About Geek               </h2>             <p class="text-base">                   Hi, I'm Geek, a passionate full-stack developer with a                    focus on building scalable and responsive web applications.                    I have extensive experience in front-end technologies                    such as HTML, CSS, and JavaScript, along with expertise in                    popular frameworks like React.js. On the back end, I specialize                 in Node.js and Express.js for building robust server-side                    applications. My goal is to leverage my skills and creativity                    to deliver innovative solutions that meet and exceed                    client expectations.               </p>             <a                 class="inline-block mt-5 px-4 py-2 rounded-md bg-green-500                         text-white hover:bg-blue-600 transition duration-300">                   Resume               </a>         </section>          <!-- Projects section -->         <section id="projects"             class="m-20 rounded mb-16 bg-gradient-to-b from-gray-600                     to-gray-800 text-white mb-8 px-4 py-10">             <h2 class="text-4xl font-bold mb-10 text-center">                   Projects               </h2>             <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">                  <!-- Project  -->                 <div                     class="bg-gray-800 p-4 shadow rounded overflow-hidden                             transition-transform duration-300 transform                             scale-100 hover:scale-110">                     <img src= "https://media.geeksforgeeks.org/wp-content/uploads/20240327093718/img.jpg"                         alt="Travel Website" class="w-full h-auto">                     <h3 class="font-bold mt-4">Travel Website</h3>                     <p class="text-sm leading-relaxed">                           A travel booking website that allows users to search for                         destinations, book flights, hotels, and plan their itinerary.                       </p>                 </div>                 <div                     class="bg-gray-800 p-4 shadow rounded overflow-hidden                             transition-transform duration-300 transform                             scale-100 hover:scale-110">                     <img src= "https://media.geeksforgeeks.org/wp-content/uploads/20240327093718/img.jpg"                         alt="Travel Website" class="project-image">                     <h3 class="font-bold mt-4">Travel Website</h3>                     <p class="text-sm leading-relaxed">                           A travel booking website that allows users to search for                         destinations, book flights, hotels, and plan their itinerary.</p>                 </div>                 <div                     class="bg-gray-800 p-4 shadow rounded overflow-hidden                             transition-transform duration-300 transform                             scale-100 hover:scale-110">                     <img src= "https://media.geeksforgeeks.org/wp-content/uploads/20240327093718/img.jpg"                         alt="Travel Website" class="project-image">                     <h3 class="font-bold mt-4">Travel Website</h3>                     <p class="text-sm leading-relaxed">                           A travel booking website that allows users to search for                         destinations, book flights, hotels, and plan their itinerary.</p>                 </div>                 <div                     class="bg-gray-800 p-4 shadow rounded overflow-hidden                             transition-transform duration-300 transform                             scale-100 hover:scale-110">                     <img src= "https://media.geeksforgeeks.org/wp-content/uploads/20240327093718/img.jpg"                         alt="Travel Website" class="project-image">                     <h3 class="font-bold mt-4">Travel Website</h3>                     <p class="text-sm leading-relaxed">                           A travel booking website that allows users to search for                         destinations, book flights, hotels, and plan their itinerary.</p>                 </div>                 <div                     class="bg-gray-800 p-4 shadow rounded overflow-hidden                             transition-transform duration-300 transform                             scale-100 hover:scale-110">                     <img src= "https://media.geeksforgeeks.org/wp-content/uploads/20240327093718/img.jpg"                         alt="Travel Website" class="project-image">                     <h3 class="font-bold mt-4">Travel Website</h3>                     <p class="text-sm leading-relaxed">                           A travel booking website that allows users to search for                         destinations, book flights, hotels, and plan their itinerary.</p>                 </div>                 <div                     class="bg-gray-800 p-4 shadow rounded overflow-hidden                             transition-transform duration-300 transform                             scale-100 hover:scale-110">                     <img src= "https://media.geeksforgeeks.org/wp-content/uploads/20240327093718/img.jpg"                         alt="Travel Website" class="project-image">                     <h3 class="font-bold mt-4">Travel Website</h3>                     <p class="text-sm leading-relaxed">                           A travel booking website that allows users to search for                         destinations, book flights, hotels, and plan their itinerary.</p>                 </div>                 <div                     class="bg-gray-800 p-4 shadow rounded overflow-hidden                             transition-transform duration-300 transform                             scale-100 hover:scale-110">                     <img src= "https://media.geeksforgeeks.org/wp-content/uploads/20240327093718/img.jpg"                         alt="Travel Website" class="project-image">                     <h3 class="font-bold mt-4">Travel Website</h3>                     <p class="text-sm leading-relaxed">                           A travel booking website that allows users to search for                         destinations, book flights, hotels, and plan their itinerary.</p>                 </div>                 <div                     class="bg-gray-800 p-4 shadow rounded overflow-hidden                             transition-transform duration-300 transform                             scale-100 hover:scale-110">                     <img src= "https://media.geeksforgeeks.org/wp-content/uploads/20240327093718/img.jpg"                         alt="Travel Website" class="project-image">                     <h3 class="font-bold mt-4">Travel Website</h3>                     <p class="text-sm leading-relaxed">                           A travel booking website that allows users to search for                         destinations, book flights, hotels, and plan their itinerary.</p>                 </div>                 <div                     class="bg-gray-800 p-4 shadow rounded overflow-hidden                             transition-transform duration-300 transform                             scale-100 hover:scale-110">                     <img src= "https://media.geeksforgeeks.org/wp-content/uploads/20240327093718/img.jpg"                         alt="Travel Website" class="project-image">                     <h3 class="font-bold mt-4">Travel Website</h3>                     <p class="text-sm leading-relaxed">                           A travel booking website that allows users to search for                         destinations, book flights, hotels, and plan their itinerary.</p>                 </div>             </div>         </section>          <!-- Skills section -->         <section id="skills"             class="m-20 p-10 mb-16 rounded-lg shadow-md text-white relative                     overflow-hidden rounded mb-16 bg-gradient-to-b                     from-gray-600 to-gray-800 text-white mb-8 px-4 py-10">             <h2 class="text-2xl font-bold mb-4">Skills</h2>             <!-- Skill progress bars -->             <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">                 <div>                     <p class="font-bold">HTML</p>                     <div class="bg-gray-600 h-4 w-full rounded-full">                         <div class="bg-green-400 h-full rounded-full w-4/5"></div>                     </div>                 </div>                 <div>                     <p class="font-bold">CSS</p>                     <div class="bg-gray-600 h-4 w-full rounded-full">                         <div class="bg-green-400 h-full rounded-full w-4/5"></div>                     </div>                 </div>                 <div>                     <p class="font-bold">JavaScript</p>                     <div class="bg-gray-600 h-4 w-full rounded-full">                         <div class="bg-green-400 h-full rounded-full w-4/5"></div>                     </div>                 </div>                 <div>                     <p class="font-bold">React.js</p>                     <div class="bg-gray-600 h-4 w-full rounded-full">                         <div class="bg-green-400 h-full rounded-full w-4/5">                         </div>                     </div>                 </div>                 <div>                     <p class="font-bold">Node.js</p>                     <div class="bg-gray-600 h-4 w-full rounded-full">                         <div class="bg-green-400 h-full rounded-full w-3/5"></div>                     </div>                 </div>                 <div>                     <p class="font-bold">Express.js</p>                     <div class="bg-gray-600 h-4 w-full rounded-full">                         <div class="bg-green-400 h-full rounded-full"                               style="width: 65%;"></div>                     </div>                 </div>             </div>         </section>          <!-- Contact section -->         <section id="contact"             class="m-20 p-10 rounded-lg shadow-md text-white relative                     overflow-hidden rounded mb-16 bg-gradient-to-b                     from-gray-600 to-gray-800 flex">             <div class="w-1/2">                 <h2 class="mb-20 text-2xl leading-6 font-bold mb-4">                       Contact Me                   </h2>                 <!-- Contact details -->                 <p>Email: [email protected]</p>                 <p>Phone: +1234567890</p>                 <!-- Hire Me button -->                 <a href="#"                     class="inline-block px-4 my-5 py-2 rounded-md bg-green-500                             text-white hover:bg-blue-600 transition duration-300">                       Hire Me</a>                 <!-- Social media links -->                 <div class="flex items-center space-x-4 mt-5">                     <!-- LinkedIn -->                     <a href="#"                         class="inline-block px-4 py-2 rounded-md bg-green-500                                 text-white hover:bg-blue-600 transition duration-300">                       LinkedIn</a>                     <!-- GitHub -->                     <a href="#"                         class="inline-block px-4 py-2 rounded-md bg-green-500                                 text-white hover:bg-blue-600 transition duration-300">                       GitHub</a>                     <!-- Twitter -->                     <a href="#"                         class="inline-block px-4 py-2 rounded-md bg-green-500                                 text-white hover:bg-blue-600 transition duration-300">                       Twitter</a>                 </div>             </div>             <div class="w-1/2">                 <!-- Image section -->                 <img                      src= "https://media.geeksforgeeks.org/wp-content/uploads/20240327094110/pro.jpg"                      alt="Your Image"                     class="w-72 h-72 mx-auto">             </div>         </section>     </div> </body>  </html>

Output:

out


Next Article
Create A Real Estate Website Using React and Tailwind CSS

J
jhrowym65
Improve
Article Tags :
  • Web Technologies
  • Tailwind CSS
  • Web Templates
  • Dev Scripter
  • Dev Scripter 2024

Similar Reads

  • Create Podcast Template using React and Tailwind CSS
    Podcasts have become a popular medium for sharing knowledge and entertainment. Creating a podcast application can be a fun project that not only enhances your skills in React and Tailwind CSS but also provides a platform to showcase your favourite podcasts. In this template we will build a responsiv
    6 min read
  • Create Documentation Template using React and Tailwind CSS
    This documentation template serves as a comprehensive guide for developers to understand the setup configuration and functionalities of the project. We are going to build the Documentation Template using React and Tailwind CSS. PrerequisitesReact.jsTailwind CSSNode.js npmReact IconsApproachTo create
    4 min read
  • Create Landing Page Template using React and Tailwind CSS
    This article guides you through creating a professional landing page template using React and Tailwind CSS, designed to showcase your skills, projects, and services effectively. It covers the setup of various sections, including a hero area for introductions, a services section to highlight offering
    8 min read
  • How to Create a Website Using HTML and CSS?
    Creating a website using HTML and CSS is a foundational skill if you are learning web development. HTML (HyperText Markup Language) is used to structure content, while CSS (Cascading Style Sheets) is used for styling, including colors, fonts, margins, and positioning. In this article, we’ll go throu
    5 min read
  • Create A Real Estate Website Using React and Tailwind CSS
    A Real Estate Website built with React JS and Tailwind CSS is a modern and responsive web application that is designed to showcase real estate listings. It typically includes features such as OnSale property, a Features section, and a Contact Us section. The website is created using React JS, which
    9 min read
  • Create Team Sections Using React and Tailwind CSS
    In this article, we will create a Team Section using React and Tailwind CSS. The team section will display team member information including their name role, and profile picture with a responsive and modern layout. Tailwind CSS simplifies styling by using utility first classes making the development
    3 min read
  • Create a Simple Weather App UI using Tailwind CSS
    Tailwind CSS helps build simple weather app interfaces with its easy styling and responsive features. Developers use Tailwind CSS to enhance user experience in weather apps, adding functionality and engagement. ApproachCreate a basic HTML structure and then link the Tailwind CSS CDN link.Then apply
    3 min read
  • Bootcamp Website Template using HTML and CSS
    We will explore how to design a simple BootCamp website template using HTML and CSS. Creating an attractive template can be challenging for those who are not proficient in CSS. Without CSS, enhancing the visual appeal of a web page is difficult. Therefore, to create a compelling web page, knowledge
    6 min read
  • Create Contact Form Template in Tailwind CSS
    A Contact Form Template is a pre-designed layout that simplifies the process of creating a contact form for a website. It typically includes input fields for the user's name, email address, subject, and message, along with a submit button. The form is styled using Tailwind CSS, a utility-first CSS f
    4 min read
  • Create Testimonials Using React and Tailwind CSS
    Customer testimonials are important in modern websites, particularly for businesses that rely on social proof to attract new customers. Displaying authentic customer feedback in an aesthetically pleasing manner can boost credibility and trust. In this article, we’ll create a Testimonials Section usi
    4 min read
geeksforgeeks-footer-logo
Corporate & Communications Address:
A-143, 7th Floor, Sovereign Corporate Tower, Sector- 136, Noida, Uttar Pradesh (201305)
Registered Address:
K 061, Tower K, Gulshan Vivante Apartment, Sector 137, Noida, Gautam Buddh Nagar, Uttar Pradesh, 201305
GFG App on Play Store GFG App on App Store
Advertise with us
  • Company
  • About Us
  • Legal
  • Privacy Policy
  • In Media
  • Contact Us
  • Advertise with us
  • GFG Corporate Solution
  • Placement Training Program
  • Languages
  • Python
  • Java
  • C++
  • PHP
  • GoLang
  • SQL
  • R Language
  • Android Tutorial
  • Tutorials Archive
  • DSA
  • Data Structures
  • Algorithms
  • DSA for Beginners
  • Basic DSA Problems
  • DSA Roadmap
  • Top 100 DSA Interview Problems
  • DSA Roadmap by Sandeep Jain
  • All Cheat Sheets
  • Data Science & ML
  • Data Science With Python
  • Data Science For Beginner
  • Machine Learning
  • ML Maths
  • Data Visualisation
  • Pandas
  • NumPy
  • NLP
  • Deep Learning
  • Web Technologies
  • HTML
  • CSS
  • JavaScript
  • TypeScript
  • ReactJS
  • NextJS
  • Bootstrap
  • Web Design
  • Python Tutorial
  • Python Programming Examples
  • Python Projects
  • Python Tkinter
  • Python Web Scraping
  • OpenCV Tutorial
  • Python Interview Question
  • Django
  • Computer Science
  • Operating Systems
  • Computer Network
  • Database Management System
  • Software Engineering
  • Digital Logic Design
  • Engineering Maths
  • Software Development
  • Software Testing
  • DevOps
  • Git
  • Linux
  • AWS
  • Docker
  • Kubernetes
  • Azure
  • GCP
  • DevOps Roadmap
  • System Design
  • High Level Design
  • Low Level Design
  • UML Diagrams
  • Interview Guide
  • Design Patterns
  • OOAD
  • System Design Bootcamp
  • Interview Questions
  • Inteview Preparation
  • Competitive Programming
  • Top DS or Algo for CP
  • Company-Wise Recruitment Process
  • Company-Wise Preparation
  • Aptitude Preparation
  • Puzzles
  • School Subjects
  • Mathematics
  • Physics
  • Chemistry
  • Biology
  • Social Science
  • English Grammar
  • Commerce
  • World GK
  • GeeksforGeeks Videos
  • DSA
  • Python
  • Java
  • C++
  • Web Development
  • Data Science
  • CS Subjects
@GeeksforGeeks, Sanchhaya Education Private Limited, All rights reserved
We use cookies to ensure you have the best browsing experience on our website. By using our site, you acknowledge that you have read and understood our Cookie Policy & Privacy Policy
Lightbox
Improvement
Suggest Changes
Help us improve. Share your suggestions to enhance the article. Contribute your expertise and make a difference in the GeeksforGeeks portal.
geeksforgeeks-suggest-icon
Create Improvement
Enhance the article with your expertise. Contribute to the GeeksforGeeks community and help create better learning resources for all.
geeksforgeeks-improvement-icon
Suggest Changes
min 4 words, max Words Limit:1000

Thank You!

Your suggestions are valuable to us.

What kind of Experience do you want to share?

Interview Experiences
Admission Experiences
Career Journeys
Work Experiences
Campus Experiences
Competitive Exam Experiences