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

778

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

cards
cards with background animation

Author:
Anonymous

2 years ago

11.4k
cards
cards with background animation

Author:
Anonymous

2 years ago

11.9k
cards
cards with background animation

Author:
Anonymous

1 year ago

3.2k
Invoice
Invoice

Author:
Ameth Galarcio

1 year ago

2.7k
Chat Bot
Simulation of a chat bot that can be used for conversations as a sketch idea

Author:
Ameth Galarcio

1 year ago

3.7k
Payment Cards

Author:
Shammi Nethupul

1 year ago

2.7k
google meet clone
Meeting application with fully responsive connect my web for jsx https://abhirajk.vercel.app/

Author:
Abhiraj

1 year ago

1.4k
DailyDev Card
Card -based card used in the Dailydev Card, this is created to be modified to taste of each user

Author:
Ameth Galarcio

1 year ago

1.9k
masonary grids effect for cards using columns
As part of the redesign I was trying to think of ways to lay out testimonials from students, which may have varying length/content, I stumbled onto the idea of using a masonry layout (think bricks, think Pinterest).

Author:
rohit whyphy

1 year ago

1.3k
Responsive Cards with Hover Text Reveal Animation - Built with Tailwind CSS
nhance your website with these sleek, responsive cards designed using Tailwind CSS! Featuring a stylish hover animation, the text smoothly reveals when you hover over the card, adding a dynamic touch to your user interface. Perfect for portfolios, team profiles, or project showcases, this design adapts seamlessly to all screen sizes.

Author:
Abdul Baset Bappy

11 months ago

1.9k
Active Beauty Main Page

Author:
Maxim

11 months ago

1.2k
Tailwind CSS Service Card Component
An HTML and Tailwind CSS code snippet for creating a responsive service card component. Ideal for marketplaces, portfolios, or listing pages. Includes sections for image/video preview, seller info, rating, pricing, and additional details. Easy to customize using Tailwind utility classes.

Author:
Hamza Atig

10 months ago

1.2k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components