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 v3.4. It is responsive.

Card Other

Author irahoza daniel

Tailwind v3.4 1.5k 4

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

GenzeStack Dumpy - Interactive Login Page with Mascot
A playful, fully responsive Tailwind CSS login component featuring "Dumpy" the GenzeStack mascot with interactive status tabs, custom SVG graphics, and dark mode support.

Sayista Yazdani

3 days ago

27
profil_eleve.html

Anonymous

11 months ago

683
3d Box
Let's build a 3d world empowered by Orgin Dreams.these are 3d objects

ORGIN_DREAMS

1 year ago

1.8k
Play, Pause and Stop buttons

Lukas Müller

3 years ago

12.2k
Contact Page

Sedat Kumcu

1 year ago

2.1k
Plant Game
Checking to see if it works

Becky Keyworth

1 year ago

1.1k
card
Tarjeta descriptiva

Raul antonio de la cruz hernandez

10 months ago

659
Product Details Card

ABDO-SY

1 year ago

3k
Serious Input Html
Input text serious like apple or smth

Cristian

2 years ago

2.8k
Animated cards

Michael Andreuzza

2 years ago

7.4k
Privacy policy page template

Sameer Sultana

3 years ago

19.8k
Why Us section with hover animation
Why to choose us section, responsive and hove animation

Amit Pachange

2 years ago

5.7k