Fix overlapping close icon in traditional alert example

This commit is contained in:
Adam Wathan 2017-11-01 13:20:41 -04:00
parent 71b88a8046
commit 454ae61cbc

View file

@ -23,7 +23,8 @@ title: "Alerts"
@component('_partials.code-sample', ['lang' => 'html'])
<div class="bg-red-lightest border border-red-light text-red-dark px-4 py-3 rounded relative">
<strong class="font-bold">Holy smokes!</strong> Something seriously bad happened.
<strong class="font-bold">Holy smokes!</strong>
<span class="block sm:inline">Something seriously bad happened.</span>
<span class="absolute pin-t pin-b pin-r px-4 py-3">
<svg class="h-6 w-6 text-red" role="button" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M14.348 14.849a1.2 1.2 0 0 1-1.697 0L10 11.819l-2.651 3.029a1.2 1.2 0 1 1-1.697-1.697l2.758-3.15-2.759-3.152a1.2 1.2 0 1 1 1.697-1.697L10 8.183l2.651-3.031a1.2 1.2 0 1 1 1.697 1.697l-2.758 3.152 2.758 3.15a1.2 1.2 0 0 1 0 1.698z"/></svg>
</span>