Add lesson 16 of tailwind tutorial

mdbootstrap · Jun 1, 2023 · ceebff9 · ceebff9
1 parent 370c7a7
commit ceebff9
Show file tree

Hide file tree

Showing 3 changed files with 529 additions and 4 deletions.
diff --git a/site/content/learn/te-foundations/2-tailwindcss/15-hover-state/index.html b/site/content/learn/te-foundations/2-tailwindcss/15-hover-state/index.html
@@ -6,13 +6,13 @@
 draft: false
 
 seo_title: "Tailwind CSS tutorial - Hover state explained"
-description: "A collection of practical examples that will allow you to quickly learn how hover state work in Tailwind CSS"
+description: "A collection of practical examples that will allow you to quickly learn how hover state works in Tailwind CSS"
 image: "https://tailwind-elements.com/learn/te-foundations/basics/introduction/assets/tailwind-elements.png"
 video: ""
 layout: tutorial
 hidden_sidenav: true
 previous_lesson: "/learn/te-foundations/tailwind-css/navbar-icons-and-logo/"
-next_lesson: "/learn/coming-soon/"
+next_lesson: "/learn/te-foundations/tailwind-css/focus-active-and-others/"
 ---
 
 <!-- Section: Text -->
@@ -55,10 +55,15 @@ <h2 class="mb-6 mt-12 text-xl font-semibold">Hover in regular CSS</h2>
 
   <!-- TE code css -->
   <div class="mb-8">
+    <!-- prettier-ignore -->
     {{< twsnippet/wrapper "css" "" "mobile" >}}{{< twsnippet/code active=true lang="CSS" >}}
 
-    #rectangle { background-color: blue; } #rectangle:hover { background-color:
-    red; }
+    #rectangle { 
+      background-color: blue; 
+    } 
+    #rectangle:hover { 
+      background-color: red; 
+    }
     {{< /twsnippet/code >}}{{< /twsnippet/wrapper >}}
   </div>