🔧 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:

Tailwind Profile Card

John Doe

Frontend Developer

Creating modern UIs and delightful user experiences.

Follow
Message

<button class="cursor-pointer mt-6 text-sm text-blue-500 hover:underline">
Toggle Dark Mode
</button>

Step 3: Key Features of the Code

* Dark Mode SupportThe dark class is added to the tag to enable dark mode.A button toggles the dark class dynamically using JavaScript.

* Responsive DesignThe 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 StylingThe 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 ButtonsButtons 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!