Merge pull request #3 from canopas/update-readme

Update readme

Author: cp-sumi-k

README.md

@@ -6,7 +6,83 @@ We keep building complex animations using tailwind css. Our goal is to build rea
 
 ## 🚀 Showcase
 
- <img src="https://github.com/canopas/tailwind-animations/blob/main/src/assets/images/animations.gif">
+<table>
+ <tr>
+ <td align="center">
+  <img src="https://github.com/canopas/tailwind-animations/blob/main/assets/images/rotate-square.gif" width="250px" height="250px">
+  <br />
+  Rotate Square
+ </td>
+ <td align="center">
+  <img src="https://github.com/canopas/Jetpack-compose-animations-examples/blob/main/assets/images/progress-dot.gif" width="250px" height="250px">
+  <br />
+  Progress Dots
+ </td>
+ <td align="center">
+  <img src="https://github.com/canopas/Jetpack-compose-animations-examples/blob/main/assets/images/heart.gif" width="250px" height="250px">
+  <br />
+  Jumping Heart
+ </td>
+ </tr>
+ <tr>
+ <td align="center">
+  <img src="https://github.com/canopas/Jetpack-compose-animations-examples/blob/main/assets/images/rotate-dot.gif" width="250px" height="250px">
+  <br />
+  Rotate Dot
+ </td>
+ <td align="center">
+  <img src="https://github.com/canopas/Jetpack-compose-animations-examples/blob/main/assets/images/pacman.gif" width="250px" height="250px">
+  <br />
+  Pacman
+ </td>
+ <td align="center">
+  <img src="https://github.com/canopas/Jetpack-compose-animations-examples/blob/main/assets/images/three-bounce.gif" width="250px" height="250px">
+  <br />
+  Three Bounce
+ </td>
+ </tr>
+ <tr>
+ <td align="center">
+  <img src="https://github.com/canopas/tailwind-animations/blob/main/assets/images/arc-rotation.gif" width="250px" height="250px">
+  <br />
+  Arc Rotation
+ </td>
+ <td align="center">
+  <img src="https://github.com/canopas/Jetpack-compose-animations-examples/blob/main/assets/images/rotate-two-dots.gif" width="250px" height="250px">
+  <br />
+  Rotate Two Dots
+ </td>
+ <td align="center">
+  <img src="https://github.com/canopas/Jetpack-compose-animations-examples/blob/main/assets/images/square-fill.gif" width="250px" height="250px">
+  <br />
+  Square Fill
+ </td>
+ </tr>
+ <tr>
+ <td align="center">
+  <img src="https://github.com/canopas/Jetpack-compose-animations-examples/blob/main/assets/images/clock.gif" width="250px" height="250px">
+  <br />
+  Clock
+ </td>
+ <td align="center">
+  <img src="https://github.com/canopas/Jetpack-compose-animations-examples/blob/main/assets/images/rotate-circle.gif" width="250px" height="250px">
+  <br />
+  Rotate Circle
+ </td>
+ <td align="center">
+  <img src="https://github.com/canopas/Jetpack-compose-animations-examples/blob/main/assets/images/wave.gif" width="250px" height="250px">
+  <br />
+  Wave
+ </td>
+ </tr>
+ <tr>
+ <td align="center">
+  <img src="https://github.com/canopas/Jetpack-compose-animations-examples/blob/main/assets/images/twin-circle.gif" width="250px" height="250px">
+  <br />
+  Twin Circle
+ </td>
+ </tr>
+</table>
 
 # Bugs and Feedback
 For bugs, questions and discussions please use the [Github Issues](https://github.com/canopas/tailwind-animations/issues).

src/App.vue

@@ -35,6 +35,6 @@ import Pacman from "./components/Pacman.vue";
 
 <style scoped lang="postcss">
 .wrapper {
- @apply relative flex gap-2 h-64 w-64 bg-pink-100 items-center justify-center m-4;
+ @apply relative flex gap-4 h-64 w-64 bg-pink-100 items-center justify-center m-4;
 }
 </style>