Home
irahoza daniel
Skill Cards with Tailwind CSS

Skill Cards with Tailwind CSS

A responsive and modern card section designed with Tailwind CSS to showcase professional skills. Each card features a smooth fade-in animation and hover scaling effect for an engaging user experience. Ideal for portfolio websites, developer profiles, and personal branding pages. Fully customizable and mobile-friendly.

This tailwind example is contributed by irahoza daniel, on 20-May-2025. Component is made with Tailwind CSS v3. It is responsive.

Card Other

Author irahoza daniel

463

Fork Fullscreen

<section class="bg-gray-100 py-12">
  <div class="max-w-6xl mx-auto px-4">
    <h2 class="text-3xl font-bold text-center text-gray-800 mb-10">Professional Skills</h2>
    
    <div class="grid gap-8 md:grid-cols-2 lg:grid-cols-3">
      
      
      <div class="bg-white p-6 rounded-2xl shadow-md transform hover:scale-105 transition duration-300 animate-fade-in">
        <h3 class="text-xl font-semibold text-blue-600 mb-2">React.js</h3>
        <p class="text-gray-600">Building dynamic user interfaces with reusable components and hooks.</p>
      </div>

<div class="bg-white p-6 rounded-2xl shadow-md transform hover:scale-105 transition duration-300 animate-fade-in delay-100">
        <h3 class="text-xl font-semibold text-green-600 mb-2">Node.js & Express</h3>
        <p class="text-gray-600">Creating fast and scalable backend APIs with RESTful architecture.</p>
      </div>

<div class="bg-white p-6 rounded-2xl shadow-md transform hover:scale-105 transition duration-300 animate-fade-in delay-200">
        <h3 class="text-xl font-semibold text-yellow-600 mb-2">MySQL</h3>
        <p class="text-gray-600">Designing and managing relational databases for web applications.</p>
      </div>

<div class="bg-white p-6 rounded-2xl shadow-md transform hover:scale-105 transition duration-300 animate-fade-in delay-300">
        <h3 class="text-xl font-semibold text-pink-600 mb-2">Tailwind CSS</h3>
        <p class="text-gray-600">Crafting beautiful, responsive designs using utility-first classes.</p>
      </div>

<div class="bg-white p-6 rounded-2xl shadow-md transform hover:scale-105 transition duration-300 animate-fade-in delay-400">
        <h3 class="text-xl font-semibold text-purple-600 mb-2">Git & GitHub</h3>
        <p class="text-gray-600">Version control and team collaboration with Git best practices.</p>
      </div>

<div class="bg-white p-6 rounded-2xl shadow-md transform hover:scale-105 transition duration-300 animate-fade-in delay-500">
        <h3 class="text-xl font-semibold text-red-500 mb-2">Problem Solving</h3>
        <p class="text-gray-600">Strong ability to debug, optimize code, and solve real-world problems.</p>
      </div>
      
    </div>
  </div>
</section>

.animate-fade-in {
    animation: fade-in 0.6s ease-out both;
  }

.delay-100 { animation-delay: 0.1s; }
  .delay-200 { animation-delay: 0.2s; }
  .delay-300 { animation-delay: 0.3s; }
  .delay-400 { animation-delay: 0.4s; }
  .delay-500 { animation-delay: 0.5s; }
</style>

Related Examples

Card Component
A Simple Card Component with full responsiveness and dark mode supported

Author:
Shariar Hasan

1 year ago

3.5k
Card
Card

Author:
Aman kumar

1 year ago

1.4k
Glassmorphism form

Author:
Geoffrey Callaghan

2 years ago

6.6k
Stacked Checkboxes

Author:
kishan pc

1 year ago

2.6k
Profile Card

Author:
Crimson

10 months ago

1.4k
Dynamic Service Showcase with Interactive Flip Cards
This component presents a visually engaging service section featuring interactive flip cards. Each service card displays an image on the front and reveals details on the back when hovered over. The layout is responsive, ensuring seamless adaptability across various screen sizes. The hover effect adds a modern and engaging touch, enhancing user interaction.

Author:
Vikas Kushwah

8 months ago

951
delivery
It will help us get our stuff delivered to your home in a way that your ordered items are delivered to your home.

Author:
Nishimwe Jeanine

6 months ago

319
Contact us form with map
Contact us form with map

Author:
Chithira Kumar M

2 years ago

12k
Greeting Card with CTA
card with two actions with greeting msg according to time

Author:
Amit Pachange

2 years ago

7.7k
card
It's a product card

Author:
SAURAV SINGH

7 months ago

1.1k
App Hero Section With header

Author:
Abdul Baset Bappy

5 months ago

768
Simple Payment Successfull Notification Page

Author:
Anonymous

6 months ago

1.2k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components