Home
Muhammad Umair Arshad
Skills Showcase, My Tech Stack and Expertise & Skills

Skills Showcase, My Tech Stack and Expertise & Skills

🚀 Showcasing My Skills with TailwindCSS & Flexbox!
I’ve designed a responsive and interactive Skills Section using Tailwind CSS and Flexbox. With smooth hover effects and a clean layout, this section highlights my expertise in:
🔹 Frontend Technologies – HTML, CSS, JavaScript, React, Next.js
🔹 Styling Frameworks – TailwindCSS
🔹 Backend & Tools – Node.js, Git

This tailwind example is contributed by Muhammad Umair Arshad, on 25-Mar-2025. Component is made with Tailwind CSS v3. It is responsive.

Other

Author Muhammad Umair Arshad

530

Fork Fullscreen

<div class="w-full max-w-4xl text-center p-6">
        <h2 class="text-3xl font-bold text-black mb-6">My Skills</h2>
        <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-6">
            <div class="flex flex-col items-center p-4 bg-gray-800 rounded-xl shadow-lg transition transform hover:scale-105 hover:bg-gray-600">
                <img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/html5/html5-original.svg" alt="HTML" class="w-12 h-12 mb-2">
                <span class="text-gray-300">HTML5</span>
            </div>
            <div class="flex flex-col items-center p-4 bg-gray-800 rounded-xl shadow-lg transition transform hover:scale-105 hover:bg-gray-600">
                <img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/css3/css3-original.svg" alt="CSS" class="w-12 h-12 mb-2">
                <span class="text-gray-300">CSS3</span>
            </div>
            <div class="flex flex-col items-center p-4 bg-gray-800 rounded-xl shadow-lg transition transform hover:scale-105 hover:bg-gray-600">
                <img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/javascript/javascript-original.svg" alt="JavaScript" class="w-12 h-12 mb-2">
                <span class="text-gray-300">JavaScript</span>
            </div>
            <div class="flex flex-col items-center p-4 bg-gray-800 rounded-xl shadow-lg transition transform hover:scale-105 hover:bg-gray-600">
                <img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/react/react-original.svg" alt="React" class="w-12 h-12 mb-2">
                <span class="text-gray-300">React.js</span>
            </div>
            <div class="flex flex-col items-center p-4 bg-gray-800 rounded-xl shadow-lg transition transform hover:scale-105 hover:bg-gray-600">
                <img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/nextjs/nextjs-original.svg" alt="Next.js" class="w-12 h-12 mb-2">
                <span class="text-gray-300">Next.js</span>
            </div>
            <div class="flex flex-col items-center p-4 bg-gray-800 rounded-xl shadow-lg transition transform hover:scale-105 hover:bg-gray-600">
                <img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/tailwindcss/tailwindcss-original.svg" alt="TailwindCSS" class="w-12 h-12 mb-2">
                <span class="text-gray-300">TailwindCSS</span>
            </div>
            <div class="flex flex-col items-center p-4 bg-gray-800 rounded-xl shadow-lg transition transform hover:scale-105 hover:bg-gray-600">
                <img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/nodejs/nodejs-original.svg" alt="Node.js" class="w-12 h-12 mb-2">
                <span class="text-gray-300">Node.js</span>
            </div>
            <div class="flex flex-col items-center p-4 bg-gray-800 rounded-xl shadow-lg transition transform hover:scale-105 hover:bg-gray-600">
                <img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/git/git-original.svg" alt="Git" class="w-12 h-12 mb-2">
                <span class="text-gray-300">Git</span>
            </div>
        </div>
    </dgra6

Related Examples

Energy Efficiency Program - Oklahoma
Code for new IT proposal

Author:
Mario Williams

1 month ago

33
Privacy Policy Page Template

Author:
Anonymous

6 months ago

945
Date picker
Date picker example using flatpickr library

Author:
Lîmåã M

2 years ago

16k
Typewriter effect
using javascript

Author:
Samuel Dawson

2 years ago

40.2k
Powerful Website Features
Open Layout Design: No traditional boxes - content flows naturally Gradient Accents: Vibrant color gradients for visual interest Animated Icons: Subtle floating animations on feature icons Hover Effects: Soft glow backgrounds appear on hover Tag System: Color-coded tags for each feature's attributes Dark Theme: Sophisticated dark background with perfect contrast

Author:
KULDEEP

1 week ago

155
chart
to chart on your family and

Author:
Nishimwe Jeanine

1 month ago

245
Hero

Author:
ORGIN_DREAMS

2 months ago

385
random design

Author:
QQ-VVN

2 months ago

63
Payment Cards

Author:
Shammi Nethupul

11 months ago

2.2k
walletp2p

Author:
Anonymous

6 months ago

924
simple responsive blog layout with sidebar

Author:
Isabella Kowalski

2 years ago

9k
Todo List with Dark theme
Todo List with Dark theme

Author:
Muzammil Riaz

1 month ago

151

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components