Style state variant notes as alerts

Author: adamwathan

docs/source/docs/state-variants.blade.md

@@ -8,8 +8,6 @@ Similar to our [responsive prefixes](/docs/responsive-design), Tailwind makes it
 
 ## Hover
 
-*By default, **hover variants are only generated for background color, border color, and text color utilities.** You can customize this in the [modules section](/docs/configuration#modules) of your configuration file.*
-
 Add the `hover:` prefix to only apply a utility on hover.
 
 @component('_partials.code-sample', ['lang' => 'html', 'class' => 'text-center'])
@@ -25,9 +23,20 @@ Add the `hover:` prefix to only apply a utility on hover.
 @endslot
 @endcomponent
 
-## Focus
+<div class="bg-blue-light text-white font-semibold px-4 py-3 mb-4 -mt-2">
+  <div class="flex">
+    <div class="py-1">
+      <svg class="fill-current h-6 w-6 text-white opacity-75 mr-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M10 20C4.477 20 0 15.523 0 10S4.477 0 10 0s10 4.477 10 10-4.477 10-10 10zm0-2c4.418 0 8-3.582 8-8s-3.582-8-8-8-8 3.582-8 8 3.582 8 8 8zm-.5-5h1c.276 0 .5.224.5.5v1c0 .276-.224.5-.5.5h-1c-.276 0-.5-.224-.5-.5v-1c0-.276.224-.5.5-.5zm0-8h1c.276 0 .5.224.5.5V8l-.5 3-1 .5L9 8V5.5c0-.276.224-.5.5-.5z"/></svg>
+    </div>
+    <div>
+      <p class="mb-2"><strong>By default, hover variants are only generated for background color, border color, and text color utilities.</strong></p>
+      <p>You can customize this in the <a href="/docs/configuration#modules" class="underline">modules section</a> of your configuration file.</p>
+    </div>
+  </div>
+</div>
 
-*By default, **focus variants are not generated for any utilities.** You can customize this in the [modules section](/docs/configuration#modules) of your configuration file.*
+
+## Focus
 
 Add the `focus:` prefix to only apply a utility on focus.
 
@@ -41,10 +50,20 @@ Add the `focus:` prefix to only apply a utility on focus.
 @endslot
 @endcomponent
 
+<div class="bg-blue-light text-white font-semibold px-4 py-3 mb-4 -mt-2">
+  <div class="flex">
+    <div class="py-1">
+      <svg class="fill-current h-6 w-6 text-white opacity-75 mr-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M10 20C4.477 20 0 15.523 0 10S4.477 0 10 0s10 4.477 10 10-4.477 10-10 10zm0-2c4.418 0 8-3.582 8-8s-3.582-8-8-8-8 3.582-8 8 3.582 8 8 8zm-.5-5h1c.276 0 .5.224.5.5v1c0 .276-.224.5-.5.5h-1c-.276 0-.5-.224-.5-.5v-1c0-.276.224-.5.5-.5zm0-8h1c.276 0 .5.224.5.5V8l-.5 3-1 .5L9 8V5.5c0-.276.224-.5.5-.5z"/></svg>
+    </div>
+    <div>
+      <p class="mb-2"><strong>By default, focus variants are not generated for any utilities.</strong></p>
+      <p>You can customize this in the <a href="/docs/configuration#modules" class="underline">modules section</a> of your configuration file.</p>
+    </div>
+  </div>
+</div>
 
-## Group Hover
 
-*By default, **group hover variants are not generated for any utilities.** You can customize this in the [modules section](/docs/configuration#modules) of your configuration file.*
+## Group Hover
 
 If you need to style a child element when hovering over a specific parent element, add the `.group` class to the parent element and add the `group-hover:` prefix to the utility on the child element.
 
@@ -63,6 +82,18 @@ If you need to style a child element when hovering over a specific parent elemen
 @endslot
 @endcomponent
 
+<div class="bg-blue-light text-white font-semibold px-4 py-3 mb-4 -mt-2">
+  <div class="flex">
+    <div class="py-1">
+      <svg class="fill-current h-6 w-6 text-white opacity-75 mr-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M10 20C4.477 20 0 15.523 0 10S4.477 0 10 0s10 4.477 10 10-4.477 10-10 10zm0-2c4.418 0 8-3.582 8-8s-3.582-8-8-8-8 3.582-8 8 3.582 8 8 8zm-.5-5h1c.276 0 .5.224.5.5v1c0 .276-.224.5-.5.5h-1c-.276 0-.5-.224-.5-.5v-1c0-.276.224-.5.5-.5zm0-8h1c.276 0 .5.224.5.5V8l-.5 3-1 .5L9 8V5.5c0-.276.224-.5.5-.5z"/></svg>
+    </div>
+    <div>
+      <p class="mb-2"><strong>By default, group hover variants are not generated for any utilities.</strong></p>
+      <p>You can customize this in the <a href="/docs/configuration#modules" class="underline">modules section</a> of your configuration file.</p>
+    </div>
+  </div>
+</div>
+
 ## Combining with Responsive Prefixes
 
 State variants are also responsive, meaning you can change an element's hover style for example at different breakpoints.