🔧 What is Tailwind CSS?
Tailwind is a utility-first CSS framework. Instead of writing custom CSS, you use predefined classes to build your UI quickly.
Promotions👇
👨🏫Ultimate CSS Frameworks Course Bundle Promo : https://norbert-bm-s-school.teachable.com/p/landingpage
👨🏫Master Tailwind CSS: A Beginner’s Guide to Modern Web Design Course Promo: https://www.udemy.com/course/master-tailwind-css-a-beginners-guide-to-modern-web-design/?couponCode=DAYONE
✅ Why Tailwind?
Fast to build UIs
Responsive by default
No need to name CSS classes
Easy to customize with config files
Description
In this tutorial, you'll learn how to create a modern and responsive profile card using Tailwind CSS. This card will include a profile picture, name, job title, description, and interactive buttons. Additionally, we'll implement a dark mode toggle to enhance the user experience. Follow this step-by-step guide to create a sleek profile card for your portfolio or project.
Here's a short project perfect for teaching a Tailwind CSS crash course: a Responsive Profile Card with Dark Mode Toggle.
This shows off:
Tailwind’s utility classes
Responsive design
Flexbox
Dark mode support
Custom styles using @apply (optional)
🧪 Mini Project: Responsive Profile Card + Dark Mode
🔧 Tools Used
Tailwind via CDN (for simplicity)
Vanilla HTML/JS
Responsive layout
Dark mode toggle (uses class="dark")
💡 What You’ll Learn
Layout with Flex
Utility classes for spacing, colors, borders, and text
Responsive design with
md:, lg:
Dark mode using
dark: classes
Simple interactivity with JS
Step 1: Setup Your Project
Create a new folder for your project.
Inside the folder, create an
index.html
file.Add the Tailwind CSS CDN to your project for quick setup.
Step 2: HTML Structure
Open index.html
and add the following code:
<!DOCTYPE html>
<html lang="en" class="dark">
<head>
<meta charset="UTF-8" />
<title>Tailwind Profile Card</title>
<!-- V4.1 -->
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
<style type="text/tailwindcss">
@theme {
--color-primary: #2b7fff;
}
@custom-variant dark (&:where(.dark, .dark *));
</style>
</head>
<body
class="bg-gray-100 dark:bg-gray-900 min-h-screen flex items-center justify-center p-4"
>
<!-- Card -->
<div
class="bg-white dark:bg-gray-800 rounded-2xl shadow-xl p-6 max-w-sm w-full text-center"
>
<img
src="https://i.pravatar.cc/150?img=12"
alt="Avatar"
class="w-24 h-24 rounded-full mx-auto border-4 border-blue-500"
/>
<h2 class="text-2xl font-semibold mt-4 text-gray-800 dark:text-white">
John Doe
</h2>
<p class="text-gray-600 dark:text-gray-300">Frontend Developer</p>
<p class="mt-2 text-sm text-gray-500 dark:text-gray-400">
Creating modern UIs and delightful user experiences.
</p>
<!-- Buttons -->
<div class="mt-4 flex justify-center gap-4">
<a
href="#"
class="px-4 py-2 rounded bg-blue-600 text-white hover:bg-blue-700 transition"
>Follow</a
>
<a
href="#"
class="px-4 py-2 rounded border border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700 transition"
>Message</a
>
</div>
<!-- Dark Mode Toggle -->
<button
onclick="document.documentElement.classList.toggle('dark')"
class="cursor-pointer mt-6 text-sm text-blue-500 hover:underline"
>
Toggle Dark Mode
</button>
</div>
</body>
</html>
Step 3: Key Features of the Code
Dark Mode Support
The dark class is added to the<html>
tag to enable dark mode.
A button toggles the dark class dynamically using JavaScript.Responsive Design
The card is centered using Tailwind's flex, justify-center, and items-center utilities.
The card adjusts to different screen sizes with max-w-sm and w-full.Profile Card Styling
The card has a modern look with rounded corners (rounded-2xl), shadows (shadow-xl), and padding (p-6).
The profile picture is styled with rounded-full and a border.Interactive Buttons
Buttons have hover effects for better interactivity using hover:bg-blue-700 and hover:bg-gray-700.
Step 4: Customizing the Card
Replace the profile picture URL (https://i.pravatar.cc/150?img=12)
with your own image.
Update the name, job title, and description to match your profile.
Modify the button links (href="#")
to point to your social media or contact pages.
Step 5: Testing the Dark Mode
Open theindex.html
file in your browser.
Click the "Toggle Dark Mode" button to switch between light and dark themes.
Observe how the colors and styles adapt seamlessly.
GitHub Repository
https://github.com/NorbertBM/learn-web-development-for-beginners-.git
Conclusion
Congratulations! You've successfully created a responsive profile card with Tailwind CSS and implemented dark mode support. This card is perfect for showcasing your profile on a personal website or portfolio. Feel free to experiment with Tailwind's utilities to further customize the design.
Happy coding!
Share this post