Add tailwind CSS content

content/roadmaps/100-frontend/content/114-css-frameworks/114-js-first/100-tailwind-css.md

@@ -1,14 +1,10 @@
-# Tailwind css
+# Tailwind CSS
 
-### Rapidly build modern websites without ever leaving your HTML.
+CSS Framework that provides atomic CSS classes to help you style components e.g. `flex`, `pt-4`, `text-center` and `rotate-90` that can be composed to build any design, directly in your markup.
-
-##### A utility-first CSS framework packed with classes like flex, pt-4, text-center and rotate-90 that can be composed to build any design, directly in your markup.
 
 <ResourceGroupTitle>Free Content</ResourceGroupTitle>
-<BadgeLink badgeText='Read' href='https://tailwindcss.com/'>Tailwind Website</BadgeLink>
+<BadgeLink colorScheme='blue' badgeText='Framework Website' href='https://tailwindcss.com'>Tailwind Website</BadgeLink>
-<BadgeLink badgeText='Read' href='https://www.codemag.com/Article/2105091/Tailwind-CSS-An-Introduction'>Tailwind CSS: An Introduction
+<BadgeLink colorScheme='blue' badgeText='YouTube Channel' href='https://www.youtube.com/c/TailwindLabs/videos'>Official Screencasts</BadgeLink>
-</BadgeLink>
+<BadgeLink colorScheme='yellow' badgeText='Watch' href='https://www.youtube.com/watch?v=hdGsFpZ0J2E'>Should You Use Tailwind CSS?</BadgeLink>
-<BadgeLink colorScheme='yellow' badgeText='Watch' href='https://www.youtube.com/watch?v=UBOj6rqRUME'>Tailwind CSS Crash Course
+<BadgeLink badgeText='Read' href='https://www.codemag.com/Article/2105091/Tailwind-CSS-An-Introduction'>Tailwind CSS: An Introduction</BadgeLink>
-</BadgeLink>
+<BadgeLink colorScheme='yellow' badgeText='Watch' href='https://www.youtube.com/watch?v=UBOj6rqRUME'>Tailwind CSS Crash Course</BadgeLink>
-<BadgeLink colorScheme='yellow' badgeText='Watch' href='https://www.youtube.com/watch?v=hdGsFpZ0J2E'>Should You Use Tailwind CSS?
-</BadgeLink>

pages/_app.tsx

@@ -26,6 +26,14 @@ const GlobalStyles = css`
     text-rendering: optimizeSpeed;
   }
   
+  code {
+    background: #1e1e3f;
+    color: #9efeff;
+    padding: 3px 5px;
+    font-size: 14px;
+    border-radius: 3px;
+  }
+  
   svg .clickable-group {
     cursor: pointer;