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

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

Tag Input field
This code creates a dynamic tag input field using HTML, JavaScript, and TailwindCSS. Users can type tags into the input field and press "Enter" to add them. Each tag is displayed inside the input field as a styled container with a remove button. The tag input is limited to a maximum of 5 tags, and an error message is shown if the limit is exceeded. Users can remove tags to free up space for new ones. The input field and tags are styled using TailwindCSS, ensuring a clean and responsive design.

Author:
Ranit Saha

3 months ago

533
Responsive fullscreen youtube video

Author:
Anonymous

1 year ago

8.3k
OTP Verification Page
A responsive and interactive OTP verification page built with Tailwind CSS. The page features a gradient background, hover effects, and animations to enhance user experience. It includes input fields for the OTP, a resend OTP link, and a verify button. The design is optimized for both light and dark modes.

Author:
Abhiraj

2 months ago

765
Modern Testimonial
A simple and easy to use component for reviews and testimonials.

Author:
Coastal UI

1 month ago

254
Image - Figure with figcaption design

Author:
Maxim

2 months ago

260
Neon container

Author:
Anonymous

11 months ago

2.6k
Order History
Order History

Author:
Tanvir Hasan Bappy (Tanvir)

2 weeks ago

189
Track Your Order
Track Your Order

Author:
Tanvir Hasan Bappy (Tanvir)

2 weeks ago

77
Login page

Author:
Reuben Enahoro

4 months ago

901
Why Choose Us - Our Core Strengths
Discover what sets us apart with this engaging "Why Choose Us" section. Highlighting three key pillars—passion, honesty, and continuous improvement—this component features a bold, centered headline with a striking blue accent

Author:
Vikas Kushwah

3 weeks ago

140
trusted by
1. Color Scheme: 1. Updated the background to a gradient from Indigo-800 to Blue-900 2. Changed text colors to use Indigo-800 and Blue-900 shades 3. Updated ring colors on avatar images to match the new scheme 2. Enhanced Design: 1. Added a containing card with white background (dark gray in dark mode) 2. Increased the size of avatar images for better visibility 3. Added a shadow effect to the card that changes color on hover 3. Responsiveness: 1. Maintained the responsive layout, stacking vertically on smaller screens 4. Animations and Interactions: 1. Added a fade-in animation for the entire component 2. Enhanced hover effects on avatar images (scale and z-index change) 3. Added a ring effect on hover for each avatar 5. Accessibility: 1. Maintained alt text for images 2. Ensured proper color contrast for text readability 6. Dark Mode: 1. Implemented dark mode support 2. Adjusted colors and ring effects for dark mode 7. Additional Enhancements: 1. Increased font sizes for better readability 2. Added font weight variations to emphasize important text 3. Improved spacing and alignment This updated component maintains the original functionality while incorporating the Indigo-800 and Blue-900 color scheme and adding enhanced visual effects and interactions.

Author:
nejaa badr

5 months ago

1k
Apple Dock Navigation Bar

Author:
Cristian

3 months ago

729

Explore components by Tags

Didn't find component you were looking for?

Search from 2100+ components