docs(gifs): 📝 add intro gif for tailwind snippets added (#41) (#42)

closes #41

README.md

@@ -43,6 +43,10 @@ You can enable tab completion (recommended) by opening
       - [Pseudo Styles](#pseudo-styles)
       - [Breakpoints](#breakpoints)
     - [Tailwind](#tailwind)
+      - [Layout Snippets](#layout-snippets)
+      - [FlexBox Snippets](#flexbox-snippets)
+      - [Grid Snippets](#grid-snippets)
+      - [Spacing Snippets](#spacing-snippets)
     - [1 line layouts](#1-line-layouts)
   - [Extra Guides](#extra-guides)
     - [Snippets generation from Selected line/lines](#snippets-generation-from-selected-linelines)
@@ -91,10 +95,21 @@ You can enable tab completion (recommended) by opening
 
 ### [Tailwind](https://tailwindcss.com/)
 
-- [Layout Snippets](https://github.com/navin-moorthy/vscode-css-snippets/blob/master/docs/tailwind/layout.md)
-- [FlexBox Snippets](https://github.com/navin-moorthy/vscode-css-snippets/blob/master/docs/tailwind/flex.md)
-- [Grid Snippets](https://github.com/navin-moorthy/vscode-css-snippets/blob/master/docs/tailwind/grid.md)
-- [Spacing Snippets](https://github.com/navin-moorthy/vscode-css-snippets/blob/master/docs/tailwind/spacing.md)
+#### [Layout Snippets](https://github.com/navin-moorthy/vscode-css-snippets/blob/master/docs/tailwind/layout.md)
+
+![Layout Snippets Showcase](https://github.com/navin-moorthy/vscode-css-snippets/raw/master/media/tailwind-layout.gif)
+
+#### [FlexBox Snippets](https://github.com/navin-moorthy/vscode-css-snippets/blob/master/docs/tailwind/flex.md)
+
+![FlexBox Snippets Showcase](https://github.com/navin-moorthy/vscode-css-snippets/raw/master/media/tailwind-flex.gif)
+
+#### [Grid Snippets](https://github.com/navin-moorthy/vscode-css-snippets/blob/master/docs/tailwind/grid.md)
+
+![Grid Snippets Showcase](https://github.com/navin-moorthy/vscode-css-snippets/raw/master/media/tailwind-grid.gif)
+
+#### [Spacing Snippets](https://github.com/navin-moorthy/vscode-css-snippets/blob/master/docs/tailwind/spacing.md)
+
+![Spacing Snippets Showcase](https://github.com/navin-moorthy/vscode-css-snippets/raw/master/media/tailwind-spacing.gif)
 
 ### [1 line layouts](https://1linelayouts.glitch.me/)
 

docs/tailwind/flex.md

@@ -1,6 +1,9 @@
 # [Tailwind](https://tailwindcss.com/) FlexBox
 
+![FlexBox Snippets Showcase](https://github.com/navin-moorthy/vscode-css-snippets/raw/master/media/tailwind-flex.gif)
+
 - [Tailwind FlexBox](#tailwind-flexbox)
+  - [Flex Direction](#flex-direction)
   - [Flex Wrap](#flex-wrap)
   - [Align Items](#align-items)
   - [Align Content](#align-content)
@@ -10,7 +13,8 @@
   - [Flex Grow](#flex-grow)
   - [Flex Shrink](#flex-shrink)
   - [Flex Order](#flex-order)
-    [Flex Direction](https://tailwindcss.com/docs/flex-direction)
+
+## [Flex Direction](https://tailwindcss.com/docs/flex-direction)
 
 | Snippet            | Purpose                         |
 | ------------------ | ------------------------------- |

docs/tailwind/grid.md

@@ -1,12 +1,16 @@
 # [Tailwind](https://tailwindcss.com/) Grid
 
+![Grid Snippets Showcase](https://github.com/navin-moorthy/vscode-css-snippets/raw/master/media/tailwind-grid.gif)
+
 - [Tailwind Grid](#tailwind-grid)
+  - [Grid Template Columns](#grid-template-columns)
   - [Grid Column Start / End](#grid-column-start--end)
   - [Grid Template Rows](#grid-template-rows)
   - [Grid Row Start / End](#grid-row-start--end)
   - [Gap](#gap)
   - [Grid Auto Flow](#grid-auto-flow)
-    [Grid Template Columns](https://tailwindcss.com/docs/grid-template-columns)
+
+## [Grid Template Columns](https://tailwindcss.com/docs/grid-template-columns)
 
 | Snippet          | Purpose                                            |
 | ---------------- | -------------------------------------------------- |

docs/tailwind/layout.md

@@ -1,6 +1,9 @@
 # [Tailwind](https://tailwindcss.com/) Layout
 
+![Layout Snippets Showcase](https://github.com/navin-moorthy/vscode-css-snippets/raw/master/media/tailwind-layout.gif)
+
 - [Tailwind Layout](#tailwind-layout)
+  - [Container](#container)
   - [Box Sizing](#box-sizing)
   - [Display](#display)
   - [Float](#float)
@@ -14,6 +17,8 @@
   - [Visibility](#visibility)
   - [Z-Index](#z-index)
 
+## [Container](https://tailwindcss.com/docs/container)
+
 | Snippet     | Purpose                                                             |
 | ----------- | ------------------------------------------------------------------- |
 | `container` | A component for fixing an element's width to the current breakpoint |

docs/tailwind/spacing.md

@@ -1,9 +1,13 @@
 # [Tailwind](https://tailwindcss.com/) Spacing
 
+![Spacing Snippets Showcase](https://github.com/navin-moorthy/vscode-css-snippets/raw/master/media/tailwind-spacing.gif)
+
 - [Tailwind Spacing](#tailwind-spacing)
+  - [Padding](#padding)
   - [Margin](#margin)
   - [Space Between](#space-between)
-    [Padding](https://tailwindcss.com/docs/padding)
+
+## [Padding](https://tailwindcss.com/docs/padding)
 
 | Snippet | Purpose                                        |
 | ------- | ---------------------------------------------- |