Back to Discover
Tailwind CSS Transition Effects Code

Amelia
Created Nov 03, 2025
0 views
0 likes
0 comments
0 forks
Export Fork Like
<script src="https://cdn.tailwindcss.com"></script>
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
<script type="module" src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js"></script>

<body class="bg-gradient-to-br from-slate-50 to-slate-100 min-h-screen p-8">
  <div class="max-w-6xl mx-auto">
    <div class="text-center mb-12">
      <h1 class="text-4xl font-bold text-slate-800 mb-2">Tailwind CSS Transition Effects</h1>
      <p class="text-slate-600">Hover or click to see smooth animations</p>
    </div>

    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">

      <!-- Scale Transition -->
      <div class="bg-white rounded-lg shadow-md p-6 hover:scale-105 transition-transform duration-300 cursor-pointer">
        <div class="flex items-center justify-center w-12 h-12 bg-blue-100 rounded-lg mb-4">
          <ion-icon name="expand-outline" class="text-2xl text-blue-600"></ion-icon>
        </div>
        <h3 class="text-lg font-semibold text-slate-800 mb-2">Scale on Hover</h3>
        <p class="text-slate-600 text-sm">hover:scale-105 transition-transform</p>
      </div>

      <!-- Opacity Transition -->
      <div class="bg-white rounded-lg shadow-md p-6 hover:opacity-70 transition-opacity duration-300 cursor-pointer">
        <div class="flex items-center justify-center w-12 h-12 bg-purple-100 rounded-lg mb-4">
          <ion-icon name="eye-outline" class="text-2xl text-purple-600"></ion-icon>
        </div>
        <h3 class="text-lg font-semibold text-slate-800 mb-2">Opacity Fade</h3>
        <p class="text-slate-600 text-sm">hover:opacity-70 transition-opacity</p>
      </div>

      <!-- Shadow Transition -->
      <div class="bg-white rounded-lg shadow-md p-6 hover:shadow-2xl transition-shadow duration-300 cursor-pointer">
        <div class="flex items-center justify-center w-12 h-12 bg-green-100 rounded-lg mb-4">
          <ion-icon name="sunny-outline" class="text-2xl text-green-600"></ion-icon>
        </div>
        <h3 class="text-lg font-semibold text-slate-800 mb-2">Shadow Lift</h3>
        <p class="text-slate-600 text-sm">hover:shadow-2xl transition-shadow</p>
      </div>

      <!-- Color Transition -->
      <div class="bg-white rounded-lg shadow-md p-6 hover:bg-indigo-500 transition-colors duration-500 cursor-pointer group">
        <div class="flex items-center justify-center w-12 h-12 bg-indigo-100 rounded-lg mb-4 group-hover:bg-white transition-colors">
          <ion-icon name="color-palette-outline" class="text-2xl text-indigo-600 group-hover:text-indigo-500 transition-colors"></ion-icon>
        </div>
        <h3 class="text-lg font-semibold text-slate-800 mb-2 group-hover:text-white transition-colors">Color Change</h3>
        <p class="text-slate-600 text-sm group-hover:text-indigo-100 transition-colors">hover:bg-indigo-500 transition-colors</p>
      </div>

      <!-- Rotate Transition -->
      <div class="bg-white rounded-lg shadow-md p-6 cursor-pointer group">
        <div class="flex items-center justify-center w-12 h-12 bg-orange-100 rounded-lg mb-4 group-hover:rotate-180 transition-transform duration-500">
          <ion-icon name="sync-outline" class="text-2xl text-orange-600"></ion-icon>
        </div>
        <h3 class="text-lg font-semibold text-slate-800 mb-2">Rotate Icon</h3>
        <p class="text-slate-600 text-sm">group-hover:rotate-180 transition-transform</p>
      </div>

      <!-- Translate Transition -->
      <div class="bg-white rounded-lg shadow-md p-6 cursor-pointer group overflow-hidden">
        <div class="flex items-center justify-center w-12 h-12 bg-pink-100 rounded-lg mb-4 group-hover:translate-x-2 transition-transform duration-300">
          <ion-icon name="arrow-forward-outline" class="text-2xl text-pink-600"></ion-icon>
        </div>
        <h3 class="text-lg font-semibold text-slate-800 mb-2">Slide Motion</h3>
        <p class="text-slate-600 text-sm">group-hover:translate-x-2 transition-transform</p>
      </div>

      <!-- Alpine.js Toggle Example -->
      <div x-data="{ expanded: false }" class="bg-white rounded-lg shadow-md p-6 cursor-pointer" @click="expanded = !expanded">
        <div class="flex items-center justify-between mb-4">
          <div class="flex items-center justify-center w-12 h-12 bg-teal-100 rounded-lg">
            <ion-icon name="chevron-down-outline" class="text-2xl text-teal-600 transition-transform duration-300" :class="expanded ? 'rotate-180' : ''"></ion-icon>
          </div>
        </div>
        <h3 class="text-lg font-semibold text-slate-800 mb-2">Toggle Expand</h3>
        <div class="overflow-hidden transition-all duration-300" :class="expanded ? 'max-h-40' : 'max-h-0'">
          <p class="text-slate-600 text-sm mt-3">This content smoothly expands and collapses using Alpine.js and Tailwind transitions!</p>
        </div>
      </div>

      <!-- Skew Transition -->
      <div class="bg-white rounded-lg shadow-md p-6 cursor-pointer group">
        <div class="flex items-center justify-center w-12 h-12 bg-red-100 rounded-lg mb-4 group-hover:skew-y-3 transition-transform duration-300">
          <ion-icon name="trending-up-outline" class="text-2xl text-red-600"></ion-icon>
        </div>
        <h3 class="text-lg font-semibold text-slate-800 mb-2">Skew Effect</h3>
        <p class="text-slate-600 text-sm">group-hover:skew-y-3 transition-transform</p>
      </div>

      <!-- Multiple Transitions -->
      <div class="bg-white rounded-lg shadow-md p-6 hover:scale-105 hover:shadow-xl hover:bg-gradient-to-r hover:from-cyan-50 hover:to-blue-50 transition-all duration-500 cursor-pointer">
        <div class="flex items-center justify-center w-12 h-12 bg-cyan-100 rounded-lg mb-4">
          <ion-icon name="flash-outline" class="text-2xl text-cyan-600"></ion-icon>
        </div>
        <h3 class="text-lg font-semibold text-slate-800 mb-2">Combined Effects</h3>
        <p class="text-slate-600 text-sm">transition-all duration-500</p>
      </div>

      <!-- Alpine.js Button -->
      <div x-data="{ loading: false }" class="bg-white rounded-lg shadow-md p-6">
        <div class="flex items-center justify-center w-12 h-12 bg-emerald-100 rounded-lg mb-4">
          <ion-icon name="checkmark-circle-outline" class="text-2xl text-emerald-600"></ion-icon>
        </div>
        <h3 class="text-lg font-semibold text-slate-800 mb-4">Interactive Button</h3>
        <button 
                @click="loading = true; setTimeout(() => loading = false, 2000)"
                class="w-full bg-emerald-500 text-white py-2 px-4 rounded-lg hover:bg-emerald-600 transition-colors duration-200 flex items-center justify-center gap-2"
                :disabled="loading">
          <ion-icon :name="loading ? 'hourglass-outline' : 'rocket-outline'" class="text-xl transition-all duration-300" :class="loading ? 'animate-spin' : ''"></ion-icon>
          <span x-text="loading ? 'Processing...' : 'Click Me'"></span>
        </button>
      </div>

    </div>

    <!-- Duration Examples -->
    <div class="mt-12 bg-white rounded-lg shadow-md p-8">
      <h2 class="text-2xl font-bold text-slate-800 mb-6">Transition Durations</h2>
      <div class="grid grid-cols-2 md:grid-cols-5 gap-4">
        <div class="text-center">
          <div class="h-20 bg-blue-500 rounded-lg hover:bg-blue-600 transition-colors duration-75 mb-2 cursor-pointer"></div>
          <p class="text-sm text-slate-600">duration-75</p>
        </div>
        <div class="text-center">
          <div class="h-20 bg-blue-500 rounded-lg hover:bg-blue-600 transition-colors duration-150 mb-2 cursor-pointer"></div>
          <p class="text-sm text-slate-600">duration-150</p>
        </div>
        <div class="text-center">
          <div class="h-20 bg-blue-500 rounded-lg hover:bg-blue-600 transition-colors duration-300 mb-2 cursor-pointer"></div>
          <p class="text-sm text-slate-600">duration-300</p>
        </div>
        <div class="text-center">
          <div class="h-20 bg-blue-500 rounded-lg hover:bg-blue-600 transition-colors duration-500 mb-2 cursor-pointer"></div>
          <p class="text-sm text-slate-600">duration-500</p>
        </div>
        <div class="text-center">
          <div class="h-20 bg-blue-500 rounded-lg hover:bg-blue-600 transition-colors duration-1000 mb-2 cursor-pointer"></div>
          <p class="text-sm text-slate-600">duration-1000</p>
        </div>
      </div>
    </div>
  </div>
Comments (0)

No comments yet. Be the first!